Jquery全集 Jquery总结

0,jQ 的关键程序：

程序代码

window.onload = function(){ ... } .

 访问 HTML 文档的元素，必须先载入文档对象模型(DOM)。当 window.onload 函数执行的时候，说明所有

东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完

毕才能看到 window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。

  对于此，jquery 提供了一个"ready"事件,你可以使用以下的代码片段：

demo0:

   上面这段代码的意思是检查文档对象直到它能够允许被操作（译者注：这样做比 window.onload()函数要

快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成） ---这

是我们想要的。

好了 ，其他的也不多说了，我们开始来用 jQ 写几个简单的例子。

1，demo1:

鼠标点击时的触发

   首先，我们尝试鼠标点击超链接时触发某些行为。在 ready 函数里加入以下代码：

程序代码

$("p").click(function(){

alert("hello world");

$("a").addClass("test");

$("a").removeClass("test");

  那么当你调用了 addClass 函数后，所有超链接的字体将变成粗体。

3,demo3:

show( )和 html()的使用

$("a").addClass("test").show().html("foo");

程序解释：

首先增加样式，

然后

show( ):显示隐藏的匹配元素。

});

程序解释：

点击超链接，超链接就会慢慢的消失。

5，demo5:

demo5-收缩展开功能

$("#head").click(function()

{$("#content").slideToggle("slow",function(){ alert("Hello,cssrain..");});

});

程序解释：

1,首先把 JQ 导入.

2,然后开始写函数了。$(document).ready(function(){});

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

appendTo 的用法

{$("#head2").click(function()

{$("<input type='text' name='ddd' id='ddd' value='hello,cssrain..'

><br>").appendTo("#ccc");});}

<input type="button" name="head2" id="head2" value="appendTo" >

<div name="ccc" id="ccc" >看这里的变化</div>

程序解释：

appendTo():

把所有匹配的元素追加到另一个、指定的元素元素集合中

7, demo7:

表格隔行变色, 鼠标滑过变色，点击变色.

代码解释：

例子中我已经把 解释放上去了，这里就不再贴注释了。

例子中用了：mouseover（），addClass（），mouseout（），removeClass（），click（），

toggleClass（），tr:even 等方法。