《jQuery的起点教程》由会员分享，可在线阅读，更多相关《jQuery的起点教程（17页珍藏版）》请在金锄头文库上搜索。
1、juery的起点教程此文以实例为基础一步步说明了jery的工作方式。现以中文翻译（添加我的补充说明）如下.如有相关意见或建议请 E 告知.或者在 BLOG中留言。英文原版： ,感谢原文作者Jrn Zaeffeer 本文发布已征求原作者同意。 说明：在本教程发布之后，得到了几个网友的指正,对部分内容作了修正,但在jQuery版本不断更新的情况下,教程中的某些内容已经过时(尤其是13以上版本)，在忠于原文的基础上,我将这部分内容加以标红的补充说明，希望更多的前端开发者能对此文提出宝贵意见，谢谢！ -09310另外我认为在学习过程中，有两个API文档你要打开随时查看： 注：已更新为jury新地址 Q
2、uey入门指南教程这个指南是一个对jQury库的说明，要求读者了解HML（O）和CSS的一些常识.它包括了一个简单的Hello Wrld的例子，选择器和事件基础，AAX、FX的用法，以及如何制作jQu的插件。 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果. 内容提要1. 安装 2. Ho jer3. Fidme：使用选择器和事件4. Re m：使用AJA 5. Anima e（让我生动起来):使用F 6. Sot me(将我有序化)：使用tabesorte插件(表格排序) 7. lg e：制作您自己的插件 8. Nex steps(下一步） 安装一开始,我们需要一
3、个juery的库，最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载。下载：Query Startekit（译者ee注:一定要下载这个包，光看文章不实践肯定是不行的。） 下载后解压缩，然后用你最喜欢的文本编辑器打开srterithtml和custo。js这两个文件。(译者el注：这两个就是例子文件，所有的例子都用这两个例子作出,ustom.js写Qury代码，treit。tl观察效果。建议用eitlu打开） 现在，我们就已经做好了一切准备来进行这个著名的”Hlo worl例子.本章的相关链接： tartert juery owloads Hell jQury在做所有事情之前,我们
4、要让juery读取和处理文档的DOM，必须尽可能快地在O载入后开始执行事件,所以，我们用一个ready事件作为处理HTML文档的开始。看看我们打开的custom。s这个文件，里面已经准备好了：（dcumen)。red(futio() /do stufwen ireay）;放一个简单的alert事件在需要等DOM完成载入，所以我们把任务稍稍变复杂一点：在点击任何一个链接时显示一个lert.(document)eay（fncton（） （a).ci（function()le（Heo wor!”）；）;);这样在你点击页面的一个链接时都会触发这个eo worl的提示。（译者el注:请照此代码修改cu
5、st.并保存,然后用浏览器打开saerkit。h观察效果。）让我们看一下这些修改是什么含义.$(”) 是一个jQue选择器（etor），在这里,它选择所有的a标签（译者Ke注:即a/a),号是 jQery “类”（juerylass）的一个别称,因此$()构造了一个新的Qury对象（Quey objec）。函数cick（） 是这个jQery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法。这里有一个拟行相似功能的代码：a ref=” ocli=art（Helloworld）ink不同之处很明显，用Query不需要在每个标签
6、上写onclic事件,所以我们拥有了一个整洁的结构文档（TML）和一个行为文档()，达到了将结构与行为分开的目的,就像我们使用CS追求的一样下面我们会更多地了解到选择器与事件。本章的相关链接: Query Core jue Selctors jQurEventsFnd me:使用选择器和事件jQr提供两种方式来选择htm的lms，第一种是用CSS和Xath选择器联合起来形成一个字符串来传送到jQury的构造器（如：$（”div ul ）;第二种是用jQuery对象的几个thods（方法)。这两种方式还可以联合起来混合使用。为了测试一下这些选择器，我们来试着在我们satekihl中选择并修改第一
7、个rderelt.一开始,我们需要选择这个list本身，这个li有一个D叫“orderedlist”，通常的ascript写法是documengetementId(rderedist”).在jQuy中,我们这样做:$(documen).rad（unctn（） $(rderdist”）.ddlas（red）；)；这里将trtrki中的一个SS样式rd附加到了derlis上(译者Keel注：参考测试包中的css目录下的cocss，其中定义了red样式）。因此，在你刷新了tarterkit。htm后，你将会看到第一个有序列表（ordred i）背景色变成了红色,而第二个有序列表没有变化。现在，让我们
8、添加一些新的样式到list的子节点.$（ocumnt）ready(untion（） $(ordredli li”)。addClas(”blue)；）；这样，所有rredlist中的li都附加了样式”blue”。现在我们再做个复杂一点的,当把鼠标放在i对象上面和移开时进行样式切换，但只在ist的最后一个leent上生效。（dcument）。ed(funci() （”#orderedlist li：last)hve(functo（） $(this）.addClas(geen)；, funti(） $(this)。reoveClass（”gren”)；);）;还有大量的类似的SS和XPth例子，更多
9、的例子和列表可以在这里找到.（译者Keel注：入门看此文，修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的！不会又要翻译吧。_！）每一个nXXX事件都有效，如nclik,oncag，osubmt等，都有jQury等价表示方法（译者Kel注:jQuery不喜欢onXXX，所以都改成了XX，去掉了o）。其他的一些事件,如ay和ver，也提供了相应的方法.你可以在Visual jQuer找到全部的事件列表，在Evets栏目下用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东！$(ocuet).read（funion() $（”oreedlt)。fid（”li”）
10、。eah（unction(i） （this）.html（ （his）.html() M！ +i );）;）；fin(） 让你在已经选择的elent中作条件查找，因此 （”ordrdlist)find（li”）就像 （#orderedlis l”)一样。each（)方法迭代了所有的i,并可以在此基础上作更多的处理。 大部分的方法，如addClas（)， 都可以用它们自己的 ach（） .在这个例子中，htm(）用来获取每个li的tml文本，追加一些文字，并将之设置为l的htm文本。（译者Keel注：从这个例子可以看到。ht(）方法是获取对象的html代码，而.html（x）是设置xxx为对象的h
11、tm代码)另一个经常碰到的任务是在没有被uy覆盖的OM元素上cll一些方法，想像一个在你用AJX方式成功提交后的rse：$(docunt）ready(fuctio(） / use this toret a sigl orm（set”)ci(funcion（) $（”#orm”）0。ese（)；）;）；（译者ee注:这里作者将fom的id也写成了form,源文件有form id=form”,这是非常不好的写法，你可以将这个ID改成or1或者tsorm，然后用$(frm1）或者(tesFrm）来表示它，再进行测试.)这个代码选择了所有ID为”f”的元素,并在其第一个上al了一个rest（)。如果你
12、有一个以上的for，你可以这样做：(document).ready（funtion（） / sehisto reset sveaform a ce$(#est）lick（function()$（”orm”）。h（functin(） h.est(）;）；）;)；（译者Keel注：请注意一定要亲自将这些代码写在customjs中并在trterkhtml上测试效果才能有所体会！必要时要观察trtekit。tml的htl代码)这样你在点击se链接后，就选择了文档中所有的form元素，并对它们都执行了一次reet（）.还有一个你可能要面对的问题是不希望某些特定的元素被选择。jey 提供了fr() 和n（
13、） 方法来解决这个问题。 file（）以过滤表达式来减少不符合的被选择项， nt（)则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的li，你想要选择所有的没有ul子元素的li元素。$（duent）。read（unction() $（l)not（:hs（ul)。cs（ordr， ”1 soid blak”）；/原文为$（li”）.not（ul”)ss(border, 1solid blac）;)；这个代码选择了所有的li元素,然后去除了有ul子元素的l元素。刷新浏览器后,所有的l元素都有了一个边框,只有ul子元素的那个li元素例外.（译者el注：请注意体会方便之极的ss（）方法，并再次提醒请务必实际测试观察效果,比方说换个CS样式呢？再加一个CS样式呢?像这样:$（”li”）.（ul”)。css(bordr, ”1px soldback”）cs(olr”,re”)；）上面代码中的epresson 语法是从XPah而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有ae属性的链接:$(
