jQuery使用资料.docx

.html（item_text）

.appendTo（'ol'）;

}）;

}

回页首

为HTML添加动画

可以使用jQuery处理基本的动画和显示效果。

animate（）函数是动画代码的核心，它用于更改任何随时间变化的数值型的CSS样式值。

比方说，您可以变化高度、宽度、不透明度和位置。

还可以指定动画的速度，定为毫秒或者预定义的速度：

慢速，中速或快速。

下面是一个同时变化某个元素高度和宽度的示例。

请注意，这些参数没有开始值，只有最终值。

开始值取自元素的当前尺寸。

同时我也附加了一个回调函数。

$（'#grow'）.animate（{height:

500,width:

500},"slow",function（）{

alert（'Theelementisdonegrowing!

'）;

}）;

jQuery的内置函数使更多常见的动画更容易完成。

可以使用show（）和hide（）元素，立即显示或者以特定的速度显示。

还可以通过使用fadeIn（）和fadeOut（），或者slideDown（）和slideUp（）显示和隐藏元素，这取决于您所需要的显示效果。

下面的示例定义了一个下滑的导航菜单。

$（'#nav'）.slideDown（'slow'）;

回页首

DOM脚本和事件处理

或许jQuery最擅长的就是简化DOM脚本和事件处理。

遍历和处理DOM非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。

从本质上说，jQuery可以使DOM脚本中的常用操作变得更加容易。

您可以创建元素并且使用append（）函数把它们与其它的一些元素链接到一起，使用clone（）复制元素，使用html（）设置内容，使用empty（）函数删除内容，使用remove（）函数删除所有的元素，即便是使用wrap（）函数，用其他元素将这些元素包装起来。

通过遍历DOM，一些函数可以用于更改jQuery对象本身的内容。

可以获得元素所有的siblings（）、parents（）和children（）。

还可以选择next（）和prev（）兄弟元素。

find（）函数或许是功能最强大的函数，它允许使用jQuery选择器搜索jQuery对象中元素的后代元素。

如果结合使用end（）函数，那么这些函数将变得更加强大。

这个函数的功能类似于undo函数，用于返回到调用find（）或parents（）函数（或者其它遍历函数）之前的jQuery对象。

如果配合方法链接（methodchaining）一起使用，这些函数可以使复杂的操作看上去非常简单。

清单7显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。

清单7.轻松地遍历和处理DOM

$（'form#login'）

//hideallthelabelsinsidetheformwiththe'optional'class

.find（'label.optional'）.hide（）.end（）

//addaredbordertoanypasswordfieldsintheform

.find（'input:

password'）.css（'border','1pxsolidred'）.end（）

//addasubmithandlertotheform

.submit（function（）{

returnconfirm（'Areyousureyouwanttosubmit?

'）;

}）;

不管您是否相信，这个示例只是一行满是空白的被链接的代码。

首先，选择登录表单。

然后，发现其中含有可选标签，隐藏它们，并调用end（）返回表单。

然后，我创建了密码字段，将其边界变为红色，再次调用end（）返回表单。

最后，我在表单中添加了一个提交事件处理程序。

其中尤为有趣的就是（除了其简洁性以外），jQuery完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。

处理常见事件就像调用函数（比方说click（）、submit（）或mouseover（））和为其传递事件处理函数一样简单。

此外，还可以使用bind（'eventname',function（）{}）指定自定义的事件处理程序。

可以使用unbind（'eventname'）删除某些事件或者使用unbind（）删除所有的事件。

有关这些函数的使用方法的完整列表，请参阅参考资料中的jQuery应用程序编程接口（ApplicationProgramInterface，API）文档。

回页首

释放jQuery选择器的强大能量

我们经常会使用ID来选择元素，比如#myid，或者通过类名，比如div.myclass来选择元素。

然而，jQuery提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。

jQuery的选择器语法主要是基于CSS3和XPath的。

对CSS3和XPath了解的越多，使用jQuery时就越加得心应手。

有关jQuery选择器的完整列表，包括CSS和XPath，请参阅参考资料中的链接。

CSS3包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。

然而，我们仍然可以在jQuery中使用CSS3选择元素，因为jQuery具备自己的自定义选择器引擎。

比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：

:

empty伪选择器（pseudo-selector）：

$（'td:

empty'）.html（'-'）;

如果需要找出所有不含特定类的元素呢？

CSS3同样提供了一个语法可以完成这个目的，使用:

not伪选择器：

如下代码显示了如何隐藏所有不含required类的输入内容：

$（'input:

not（.required）'）.hide（）;

与在CSS中一样，可以使用逗号将多个选择器连接成一个。

下面是一个同时隐藏页面上所有类型列表的简单示例：

$（'ul,ol,dl'）.hide（）;

XPath是一种功能强大的语法，用于在文档中搜寻元素。

它与CSS稍有区别，不过它能实现的功能略多于CSS。

要在所有复选框的父元素中添加一个边框，可以使用XPath的/..语法：

$（"input:

checkbox/.."）.css（'border','1pxsolid#777'）;

jQuery中也加入了一些CSS和XPath中没有的选择器。

比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名——也可以称作把表分段（striping）。

使用jQuery不费吹灰之力就可以做到这点，这需要归功于odd伪选择器。

下面这个例子使用striped类改变了表格中所有奇数行的背景颜色：

$（'table.striped>tr:

odd'）.css（'background','#999999'）;

我们可以看到强大的jQuery选择器是如何简化代码的。

不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个jQuery选择器对它们进行定义。

回页首

使用插件扩展jQuery

与大多数软件不同，使用一个复杂的API为jQuery编写插件并不是非常困难。

事实上，jQuery插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。

下面是可以编写的最基本的jQuery插件：

$.fn.donothing=function（）{

returnthis;

};

虽然非常简单，但是还是需要对这个插件进行一些解释。

首先，如果要为每一个jQuery对象添加一个函数，必须把该函数指派给$.fn。

第二，这个函数必须要返回一个this（jQuery对象），这样才不至于打断方法链接（methodchaining）。

可以轻松地在这个示例之上构建。

要编写一个更换背景颜色的插件，以替代使用css（'background'），可以使用下面的代码：

$.fn.background=function（bg）{

returnthis.css（'background',bg）;

};

清注意，可以只从css（）返回值，因为已经返回了jQuery对象。

因此，方法链接（methodchaining）仍然运作良好。

我建议在需要重复工作的时候使用jQuery插件。

比方说，如果您需要使用each（）函数反复执行相同的操作，那么可以使用一个插件来完成。

由于jQuery插件相当易于编写，所以有上百种可供你选择使用。

jQuery提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。

有关插件的完整列表，请参阅参考资料。

最为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面（UserInterface，UI）。

界面对于jQuery来说就如Scriptaculous对于Prototype一样。

表单插件也同样流行且非常有用，通过它可以使用Ajax在后台中轻松地提交表单。

这个插件用于处理一些常见的情况：

您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个Ajax调用。

回页首

结束语

我只是简要地介绍了使用jQuery可能完成的任务。

jQuery使用起来非常有趣，因此我们总是能学到看上去很简单的新技巧和新特性。

从刚开始使用jQuery的那一刻起，jQuery便可以完全简化您的JavaScript和Ajax编程；每学会一点新知识，您的代码就会更简单一点。

学习了jQuery之后，我在使用JavaScript语言进行编程的同时也获得了许多的乐趣。

不用操心所有无聊的内容，我可以专注地编写有趣的内容。

使用jQuery后，我几乎就告别了编写for循环代码的时代。

甚至在想到要使用其它JavaScript库时，不禁会有所畏缩不前。

jQuery确确实实改变了我对JavaScript编程的看法。