此文以实例为基础一步步说明了jQuery的工作方式。
另外我认为在学习过程中,有两个API文档你要打开随时查看:
这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的HelloWorld的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)
现在,我们就已经做好了一切准备来进行这个著名的"Helloworld"例子.
在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:
$(document).ready(function(){ //dostuffwhenDOMisready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.
$(document).ready(function(){ $("a").click(function(){ alert("Helloworld!"); });});这样在你点击页面的一个链接时都会触发这个"Helloworld"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)
让我们看一下这些修改是什么含义。$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQueryobject)。函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
这里有一个拟行相似功能的代码:
下面我们会更多地了解到选择器与事件.
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div>ula")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个orderedlist.
一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：
$(document).ready(function(){ $("#orderedlist").addClass("red");});这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(orderedlist)背景色变成了红色，而第二个有序列表没有变化.
现在，让我们添加一些新的样式到list的子节点.
$(document).ready(function(){ $("#orderedlist>li").addClass("blue");});这样，所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。
用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！
$(document).ready(function(){ $("#orderedlist").find("li").each(function(i){ $(this).html($(this).html()+"BAM!"+i); });});find()让你在已经选择的element中作条件查找,因此$("#orderedlist).find("li")就像$("#orderedlistli")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(),都可以用它们自己的each()。在这个例子中,html()用来获取每个li的html文本,追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：
$(document).ready(function(){ //usethistoresetasingleform $("#reset").click(function(){ $("form")[0].reset(); });});（译者Keel注：这里作者将form的id也写成了form，源文件有
上面这个代码选择了所有的"form"元素，并在其中的第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：
$(document).ready(function(){ //usethistoresetseveralformsatonce $("#reset").click(function(){ $("form").each(function(){ this.reset(); }); });});（译者Keel注：请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会！必要时要观察starterkit.html的html代码）
这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery提供了filter()和not()方法来解决这个问题。filter()以过滤表达式来减少不符合的被选择项,not()则用来取消所有符合过滤表达式的被选择项.考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。
$(document).ready(function(){ $("li").not(":has(ul)").css("border","1pxsolidblack");//原文为$("li").not("[ul]").css("border","1pxsolidblack");});这个代码选择了所有的li元素，然后去除了有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。
（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$("li").not("[ul]").css("border","1pxsolidblack").css("color","red");）
上面代码中的[expression]语法是从XPath而来，可以在子元素和属性(elementsandattributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:
$(document).ready(function(){ $("a[name]").css("background-color","#eee");//原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代});这个代码给所有带有name属性的链接加了一个背景色。（译者Keel注：这个颜色太不明显了，建议写成$("a[name]").css("background-color","#eee");）[注：在jQuery1.2及以上版本中,@符号应该去除,下文中不再说明]
$(document).ready(function(){ $('#faq').find('dd').hide().end().find('dt').click(function(){varanswer=$(this).next();if(answer.is(':visible')){answer.slideUp();}else{answer.slideDown();}});});这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq'只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。
在点击事件中的，我们用$(this).next()来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。
（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意if(answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）
在我们继续之前我们先来看看这一步：jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：
$(function(){ //codetoexecutewhentheDOMisready});应用到我们的Helloworld例子中，可以这样:
$(function(){ $("a").click(function(){ alert("Helloworld!"); });});现在，我们手上有了这些基础的知识，我们可以更进一步的探索其它方面的东西，就从AJAX开始！
在这一部分我们写了一个小小的AJAX应用，它能够rate一些东西（译Keel注：就是对某些东西投票），就像在youtube.com上面看到的一样。
虽然这些例子也可以不使用AJAX来实现，但显示我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating".
（译者Keel注：这个在线实例从国内访问还是比较慢的，点击后要等一会儿才能看到结果，可以考虑对它进行修改，比如加上loading，投票后加上再投票的返回链接等。此外，这个例子中还是有很多需要进一步消化的地方，看不懂的地方请参考API文档。）
一个在使用AJAX载入内容时经常发生的问题是：当载入一个事件句柄到一个HTML文档时，还需要在载入内容上应用这些事件，你不得不在内容加载完成后应用这些事件句柄，为了防止代码重复执行，你可能用到如下一个function:
请注意addClickHandlers函数是作为一个局部变量定义的，而不是全局变量(如：functionaddClickHandlers(){...})，这样做是为了防止与其他的全局变量或者函数相冲突.
另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法，简单的办法是将这个回调方法包含在一个其它的function中:
//getsomedatavarfoobar=...;//specifyhandler,itneedsdataasaparamtervarhandler=function(data){...};//addclickhandlerandpassfoobar!$('a').click(function(event){handler(foobar);});//ifyouneedthecontextoftheoriginalhandler,useapply:$('a').click(function(event){handler.apply(this,[foobar]);});用到简单的AJAX后，我们可以认为已经非常之“web2.0”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将会谈到这些效果.
一些动态的效果可以使用show()和hide()来表现:
$(document).ready(function(){ $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ $(".stuff").show('fast'); });});你可以与animate()联合起来创建一些效果,如一个带渐显的滑动效果:
这些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我们下一章讲到的表格排序插件。
这个表格排序插件能让我们在客户端按某一列进行排序，引入jQuery和这个插件的js文件，然后告诉插件你想要哪个表格拥有排序功能。
要测试这个例子，先在starterkit.html中加上像下面这一行的代码：
$(document).ready(function(){ $("#large").tableSorter();});现在点击表格的第一行head区域，你可以看到排序的效果，再次点击会按倒过来的顺序进行排列。
这个表格还可以加一些突出显示的效果，我们可以做这样一个隔行背景色（斑马线）效果:
几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的
当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.
写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.
如果你release你的插件,你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.
现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.
很多人试着控制所有的radio或者checkbox是否被选中,比如:
$("input[type='checkbox']").each(function(){ this.checked=true; //or,touncheck this.checked=false; //or,totoggle this.checked=!this.checked;});注：在jQuery1.2及以上版本中，选择所有checkbox应该使用input:checkbox,因此以上代码第一行可写为:$('input:checkbox').each(function(){无论何时候，当你的代码出现each时，你应该重写上面的代码来构造一个插件,很直接地:
$.fn.check=function(){ returnthis.each(function(){ this.checked=true; });};这个插件现在可以这样用:
$('input:checkbox').check();注：在jQuery1.2及以上版本中，选择所有checkbox应该使用input:checkbox原文为：$("input[type='checkbox']").check();现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.
$.fn.check=function(mode){ varmode=mode||'on';//ifmodeisundefined,use'on'asdefault returnthis.each(function(){ switch(mode){ case'on': this.checked=true; break; case'off': this.checked=false; break; case'toggle': this.checked=!this.checked; break; } });};这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off",或"toggle",如:
$("input[type='checkbox']").check();$("input[type='checkbox']").check('on');$("input[type='checkbox']").check('off');$("input[type='checkbox']").check('toggle');如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.
从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个key/value对来重新设置每个参数.
大大感谢JohnResig创造了这么好的library!感谢jQuerycommunity为John提供了如此多的咖啡和其他的一切!