??xml version="1.0" encoding="utf-8" standalone="yes"?> jQuery ?John Resig 创徏?2006 q初Q对于Q何?JavaScript 代码的程序员来说Q它是一个非常有用的 JavaScript 库。无论您是刚刚接?JavaScript 语言Qƈ且希望获得一个能解决文档对象模型QDocument Object ModelQDOMQ脚本和 Ajax 开发中一些复杂问题的库,q是作ؓ一个厌倦了 DOM 脚本?Ajax 开发中无聊的重复工作的资深 JavaScript 专家QjQuery 都会是您的首选?/p>
jQuery 能帮助您保证代码z易诅R您再也不必~写大堆重复的@环代码和 DOM 脚本库调用了。?jQueryQ您可以把握问题的要点,q用尽可能最的代码实现您想要的功能?/p>
毫无疑问QjQuery 的原理是独一无二的:它的目的是保证代码zƈ可重用。当您理解ƈ体会q一原理后,便可以开始学习本教程了,看看 jQuery Ҏ们的~程方式有多改q吧?/p>
下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的Q务,比方说ؓ面的某一区域中的每个链接附加一个单击(clickQ事Ӟ您可以用纯 JavaScript 代码?DOM 脚本来实玎ͼ?清单 1 所C?/p>
清单 1. 没有使用 jQuery ?DOM 脚本
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
是不是很奇Q?使用 jQueryQ您可以把握问题的要点,只让代码实现您想要的功能Q而省M一些繁琐的q程。无需对元素进行@环,click()
函数完成这些操作。同样也不需要进行多?DOM 脚本调用。您只需要用一个简短的字符串对所需的元素进行定义即可?/p>
理解q一代码的工作原理可能会有一点复杂。首先,我们使用?$()
函数 —?jQuery 中功能最强大的函数。通常Q我们都是用这个函C文档中选择元素。在本例中,一个包含有一些层叠样式表QCascading Style SheetQCSSQ语法的字符串被传递给函数Q然?jQuery 可能高效地把这些元素找出来?/p>
如果您具?CSS 选择器的基本知识Q那么应该很熟悉q些语法。在 清单 2 中,#external_links
用于?id
?external_links
的元素?code>a 后的I格表示 jQuery 需要检?external_links
元素中的所?<a>
元素。用p说v来非常绕口,甚至?DOM 脚本中也是这P但是?CSS 中这再简单不q了?code>$() 函数q回一个含有所有与 CSS 选择器匹配的元素?jQuery 对象?em>jQuery 对象 cM于数l,但是它附带有大量Ҏ?jQuery 函数。比方说Q您可以通过调用 click
函数?click 处理函数指定l?jQuery 对象中的所有元素。还可以?$()
函数传递一个元素或者一个元素数l,该函数将把这些元素封装在一?jQuery 对象中。您可能会想要用这个功能将 jQuery 函数用于一些对象,比方?window
对象。例如,我们通常会像下面q样把函数分配给加蝲事gQ?/p>
window.onload = function() { // do this stuff when the page is done loading }; |
使用 jQuery ~写的功能相同的代码Q?/p>
$(window).load(function() { // run this when the whole page has been downloaded }); |
您可能有所体会Q等待窗口加载的q程是非常缓慢而且令h痛苦的,q是因ؓ必须{整个页面加载完所有的内容Q包括页面上所有的的图片。有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加蝲文本标志语aQHypertext Markup LanguageQHTMLQ就可以了。通过在文档中创徏Ҏ?ready
事gQjQuery 解决了这个问题,Ҏ如下Q?/p>
$(document).ready(function() { // do this stuff when the HTML is all ready }); |
q个代码围绕 document
元素创徏了一?jQuery 对象Q然后徏立一个函敎ͼ用于?HTML DOM 文档qA的时候调用实例。可以根据需要Q意地调用q个函数。ƈ且能够以真正?jQuery 格式Q用快h式调用这个函数。这很简单,只需?$()
函数传递一个函数就可以了:
$(function() { // run this when the HTML is done downloading }); |
到目前以止,我已l向大家介绍?$()
函数的三U用法。第四种Ҏ可以使用字符串来创徏元素。结果会产生一个包含该元素?jQuery 对象?a >清单 3 昄的示例在面中添加了一个段落?br />
清单 3. 创徏和附加一个简单的D落
$('<p></p>') .html('Hey World!') .css('background', 'yellow') .appendTo("body"); |
$('#message').css('background', 'yellow').html('Hello!').show(); |
使用 jQuery Ajax 变得及其单。jQuery 提供有一些函敎ͼ可以使简单的工作变得更加单,复杂的工作变得不再复杂?/p>
Ajax 最常见的用法就是把一?HTML 代码加蝲到页面的某个区域中去。ؓ此,只需单地选择所需的元素,然后使用 load()
函数卛_。下面是一个用于更新统计信息的CZQ?/p>
$('#stats').load('stats.html'); |
通常Q我们只需单地把一些参C递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现q一操作非常地简单。您可以使用 $.post()
或?$.get()
Q这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数?a >清单 4 昄了一个发送数据和使用回调的简单示例?br />
清单 4. 使用 Ajax 向页面发送数?/strong>
$.post('save.cgi', { text: 'my string', number: 23 }, function() { alert('Your data has been saved.'); }); |
如果您确实需要编写一些复杂的 Ajax 脚本Q那么需要用?$.ajax()
函数。您可以指定 xml
?code>script?code>html 或?json
QjQuery 自动ؓ回调函数准备合适的l果Q这h便可以立即用该l果。还可以指定 beforeSend
?code>error?code>success 或?complete
回调函数Q向用户提供更多有关 Ajax 体验的反馈。此外,q有一些其它的参数可供使用Q您可以使用它们讄 Ajax h的超Ӟ也可以设|页?“最q一ơ修?#8221; 的状态。清?5 昄了一个用一些我所提到的参数检?XML 文档的示例?/p>
清单 5. $.ajax() ?Ajax 由复杂变?
$.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ // do something with xml } }); |
?success 回调函数q回 XML 文档后,您可以?jQuery 索这?XML 文档Q其方式与检?HTML 文档是一L。这样得处?XML 文档变得相当地容易,q且把内容和数据集成C您的 Web 站点里面?a >清单 6 昄?success
函数的一个扩展,它ؓ XML 中的每个 <item>
元素都添加了一个列表项?Web 面中?/p>
清单 6. 使用 jQuery 处理 XML 文档
success: function(xml){ $(xml).find('item').each(function(){ var item_text = $(this).text(); $('<li></li>') .html(item_text) .appendTo('ol'); }); } |
可以使用 jQuery 处理基本的动d昄效果?code>animate() 函数是动M码的核心Q它用于更改M随时间变化的数值型?CSS 样式倹{比方说Q您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度Q定为毫U或者预定义的速度Q慢速,中速或快速?/p>
下面是一个同时变化某个元素高度和宽度的示例。请注意Q这些参数没有开始|只有最l倹{开始值取自元素的当前寸。同时我也附加了一个回调函数?/p>
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){ alert('The element is done growing!'); }); |
jQuery 的内|函C更多常见的动LҎ完成。可以?show()
?hide()
元素Q立xC或者以特定的速度昄。还可以通过使用 fadeIn()
?fadeOut()
Q或?slideDown()
?slideUp()
昄和隐藏元素,q取决于您所需要的昄效果。下面的CZ定义了一个下滑的D菜单?/p>
$('#nav').slideDown('slow'); |
或许 jQuery 最擅长的就是简?DOM 脚本和事件处理。遍历和处理 DOM 非常单,同时附加、移除和调用事g也十分容易,且不像手动操作那样容易出错?/p>
从本质上_jQuery 可以?DOM 脚本中的常用操作变得更加Ҏ。您可以创徏元素q且使用 append()
函数把它们与其它的一些元素链接到一P使用 clone()
复制元素Q?html()
讄内容Q?empty()
函数删除内容Q?remove()
函数删除所有的元素Q即便是使用 wrap()
函数Q用其他元素这些元素包装v来?/p>
通过遍历 DOMQ一些函数可以用于更?jQuery 对象本n的内宏V可以获得元素所有的 siblings()
?code>parents() ?children()
。还可以选择 next()
?prev()
兄弟元素?code>find() 函数或许是功能最强大的函敎ͼ它允怋?jQuery 选择器搜?jQuery 对象中元素的后代元素?/p>
如果l合使用 end()
函数Q那么这些函数将变得更加强大。这个函数的功能cM?undo 函数Q用于返回到调用 find()
?parents()
函数Q或者其它遍历函敎ͼ之前?jQuery 对象?/p>
如果配合Ҏ链接Qmethod chainingQ一起用,q些函数可以使复杂的操作看上去非常简单?a >清单 7 昄了一个示例,其中包含有一个登录表单ƈ处理了一些与之有关的元素?/p>
清单 7. L地遍历和处理 DOM
$('form#login') // hide all the labels inside the form with the 'optional' class .find('label.optional').hide().end() // add a red border to any password fields in the form .find('input:password').css('border', '1px solid red').end() // add a submit handler to the form .submit(function(){ return confirm('Are you sure you want to submit?'); }); |
不管您是否相信,q个CZ只是一行满是空白的被链接的代码。首先,选择d表单。然后,发现其中含有可选标{,隐藏它们Qƈ调用 end()
q回表单。然后,我创Z密码字段Q将其边界变为红Ԍ再次调用 end()
q回表单。最后,我在表单中添加了一个提交事件处理程序。其中尤为有的是Q除了其z性以外)QjQuery 完全优化了所有的查询操作Q确保将所有内容很好地链接在一起后Q不需要对一个元素执行两ơ查询?/p>
处理常见事g像调用函数Q比方说 我们l常会?ID 来选择元素Q比? jQuery 的选择器语法主要是Z CSS3 ?XPath 的。对 CSS3 ?XPath 了解的越多,使用 jQuery 时就加得心应手。有?jQuery 选择器的完整列表Q包?CSS ?XPathQ请参阅 参考资?/a> 中的链接?/p>
CSS3 包含一些ƈ不是所有浏览器都支持的语法Q因此我们很用它。然而,我们仍然可以?jQuery 中?CSS3 选择元素Q因?jQuery 具备自己的自定义选择器引擎。比方说Q要在表g的每一个空列中都添加一个横杠,可以使用Q?code>:empty 伪选择器(pseudo-selectorQ:click()
?code>submit() ?mouseover()
Q和为其传递事件处理函CL单。此外,q可以?bind('eventname', function(){})
指定自定义的事g处理E序。可以?unbind('eventname')
删除某些事g或者?unbind()
删除所有的事g。有兌些函数的使用Ҏ的完整列表,请参?参考资?/a> 中的 jQuery 应用E序~程接口QApplication Program InterfaceQAPIQ文档?/p>
#myid
Q或者通过cdQ比?div.myclass
来选择元素。然而,jQuery 提供了更为复杂和完整的选择器语法,允许我们在单个选择器中选择几乎所有的元素l合?/p>
$('td:empty').html('-'); |
如果需要找出所?strong>?/strong>含特定类的元素呢Q?CSS3 同样提供了一个语法可以完成这个目的,使用 :not
伪选择器: 如下代码昄了如何隐藏所有不?required
cȝ输入内容Q?/p>
$('input:not(.required)').hide(); |
与在 CSS 中一P可以使用逗号多个选择器连接成一个。下面是一个同旉藏页面上所有类型列表的单示例:
$('ul, ol, dl').hide(); |
XPath 是一U功能强大的语法Q用于在文档中搜d素。它?CSS E有区别Q不q它能实现的功能略多?CSS。要在所有复选框的父元素中添加一个边框,可以使用 XPath ?/..
语法Q?/p>
$("input:checkbox/..").css('border', '1px solid #777'); |
jQuery 中也加入了一?CSS ?XPath 中没有的选择器。比方说Q要使一个表更具可读性,通常可以在表格的奇数行或偶数行中附加一个不同的cd —?也可以称作把?em>分段QstripingQ?/em>。?jQuery 不费吹灰之力可以做到这点,q需要归功于 odd
伪选择器。下面这个例子?striped
cL变了表格中所有奇数行的背景颜Ԍ
$('table.striped > tr:odd').css('background', '#999999'); |
我们可以看到强大?jQuery 选择器是如何化代码的。不论您惛_理什么样的元素,不管q个元素是具体的q是模糊的,都有可能扑ֈ一U方法用一?jQuery选择器对它们q行定义?/p>
与大多数软g不同Q用一个复杂的 API ?jQuery ~写插gq不是非常困难。事实上QjQuery 插g非常易于~写Q您甚至希望~写一些插件来使代码更加简单。下面是可以~写的最基本?jQuery 插gQ?/p>
$.fn.donothing = function(){ return this; }; |
虽然非常单,但是q是需要对q个插gq行一些解释。首先,如果要ؓ每一?jQuery 对象d一个函敎ͼ必须把该函数指派l? 可以L地在q个CZ之上构徏。要~写一个更换背景颜色的插gQ以替代使用 $.fn
。第二,q个函数必须要返回一?this
QjQuery 对象Q,q样才不至于打断 Ҏ链接Qmethod chainingQ?/a>?/p>
css('background')
Q可以用下面的代码Q?/p>
$.fn.background = function(bg){ return this.css('background', bg); }; |
清注意,可以只从 css()
q回|因ؓ已经q回?jQuery 对象。因此,Ҏ链接Qmethod chainingQ仍然运作良好?/p>
我徏议在需要重复工作的时候?jQuery 插g。比方说Q如果您需要?each()
函数反复执行相同的操作,那么可以使用一个插件来完成?/p>
׃ jQuery 插g相当易于~写Q所以有上百U可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显C、工hC、日期选择器,以及我们可以惛_的一切效果。有x件的完整列表Q请参阅 参考资?/a>?/p>
最为复杂、用最为广泛的插g要属界面QInterfaceQ,它是一U动LӞ用于处理排序、拖攑֊能、复杂效果、以及其它有和复杂的用L面(User InterfaceQUIQ。界面对?jQuery 来说如 Scriptaculous 对于 Prototype 一栗?/p>
表单插g也同h行且非常有用Q通过它可以?Ajax 在后CL地提交表单。这个插件用于处理一些常见的情况Q您需要截h个表单的提交事gQ找出所有不同的输入字段Qƈ使用q些字段构造一?Ajax 调用?/p>