JQuery.docx

1、JQuery前言 贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而误人子弟,最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评. 本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!? BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识. JQuery是什么 JQuery只是一个JS文件 人对新

2、鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单. JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便. 目前jQuery最新Release版本为1.32,官方下载地址为: 本系列教程基于1.32版进行讲解. JQuery有两种版本: 一种为uncompressed版(未压缩版)主要用在开发中. 另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本. 两种版本的区别 文件大小不一样, 最终用户在浏

3、览时可以减少下载JS时的等待时间. Uncompressed版文件大小为118KB Minified版文件大小为56KB JQuery能带给我们什么 一, 站在巨人的肩上 别人已经发明了轮子,我们没必要自己再去造一个. 二, 强大的BOM,DOM,CSS,事件 的操作能力 我最常用的是CSS及DOM的操作,真的太方便了. 三, 更加简洁的代码 自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了. 四, 与浏览器无关性 做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现

4、有时不一样,我们不得不为不同的浏览器编写相应的代码. JQuery在这方法已经内部处理,我们只管去用就是了. 五, 不错的性能 我自己有自知之明, 至少我写的JavaScript代码的运行效率不如JQuery的高. 如何使用JQuery 万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明. : ) 建立一个html文件,比如index.html 并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以) 首先我们解决JQuery的引用. 代码如下: JQuery测试 红色的那一行代码就完成了JQuery的引用,简单吧!

5、 现在我们再扩充一个功能,使 index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色. index.html代码结构: JQuery测试 /*table中偶数行*/ .tabEven background: #ff0000; /*table中奇数行*/ .tabOdd background: #00ff00; / 快购利众网_1 1 快购利众网_2 1 快购利众网_3 1 快购利众网_4 1 快购利众网_5 1 效果如下: 代码解析: $(document).ready(function() $(#tabTest tr:even).addC

6、lass(tabEven); $(#tabTest tr:odd).addClass(tabOdd); ); $(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的. $(#tabTest tr:even).addClass(tabEven); 为id为tabTest的表格的偶数行增加名为tab

7、Even的CSS样式 $(#tabTest tr:odd).addClass(tabOdd); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式 最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单. 就进入实战?是不是太快了?我还不知道怎么用JQuery! . 我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : ) 在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址 今天的教程有

8、些复杂(只是概念多点而已),但过了这一关,JQuery的学习可谓是一马平川. 好了,进入正题. 再次申明JQuery很简单,take easy! 从那开始呢? 最好的切入地方就从JQuery的最基本的一个函数 ready 开始! 该函数的作用可以看做和onLoad,至少现在可以这么看待. 定义 ready(fn); 功能 这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需

9、要在那一刻执行。 有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。 请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法? 我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处

10、都是JavaScript代码,很容易出问题的哟! 在 中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript代码. 实例 两种编写方式 一 $(document).ready(function()alert(Hello World!);); 二 var myFun = function()alert(Hello World!); $(document).ready(myFun); 到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急. 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函

11、数就够了. 看完下面的代码我们就明白了$()的用法. index.html代码结构如下: JQuery测试 .p1 background: #ff0000; .p2 background: #00ff00; .p3 background: #0000ff; .myPCss font-size:36px; / p).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementById(myP); $(aP).addClass(p2); ); / 快购利众网1 快购利众网2 快购利众网

12、3 快购利众网4 快购利众网5 快购利众网6 快购利众网7 代码解析: $(p).addClass(p1); $(p).removeClass(p1); $(#myP).addClass(p2); $(.myPCss).addClass(p3); $(#myDiv p).addClass(p3); $(#myDivp).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementById(myP); $(aP).addClass(p2); $(p).addClass(p1); $(

13、p).removeClass(p1); 选择文档里全部的 元素对象,不论 在文档中所处的层次结构如何, 最后选到了7个 元素对象 快购利众网1 快购利众网2 快购利众网3 快购利众网4 快购利众网5 快购利众网6 快购利众网7 addClass(css name)函数很简单,就是为前面$()选择到的元素对象增加CSS样式. removeClass(css name)函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式. 在这儿,这两段代码功能抵消,相当什么也没做. $(#myP).addClass(p2); 选择文档里id为myP的指定元素对象,并为该元素对象增加名称为p2的样式. 最

14、后选到了1个 元素对象 快购利众网2 知识点: 如果要选择指定ID号的元素对象,记得前面用# $(.myPCss).addClass(p3); 选择文档里样式名为myPCss的指定元素对象,并为该元素对象增加名称为p3的样式. 最后选到了1个 元素对象 快购利众网3 知识点: 如果要选择指定样式的元素对象,记得前面用. 现在可以为大家正式介绍$(),在JQuery里,我们称她为选择器函数,里面的内容称为选择器. 现在大家自己试试,记住选择器选择出的对象有可能是多个哟. 上面的内容是不是挺简单的! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住选择器选择出的元

15、素对象可能是多个这点就不用怕了. $(#myDiv p).addClass(p3); 功能:在给定的祖先元素下匹配所有的后代元素 分成两部分来分析 一,$(#myDiv) 根据上面所学的知识,选择出1个 元素对象, 二,$(#myDiv p) 在上面2个 元素对象中的任意层中选择 元素对象. 几个? 3个 快购利众网4 快购利众网5 快购利众网6 其中 快购利众网4 快购利众网5 快购利众网6 都是在 内部定义的 虽然 快购利众网4 是在id为myDivInner的div内部定义的.但因为id为myDivInner的div 也是id为myDiv的下层,所以 快购利众网5 也属于id为myDiv

16、的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中 最后为这3个 元素对象增加名为p3的样式 知识点: 对于这类有层次的选择表达式$(A B),A选择器和B选择器可以是标签名,#id,.css三种中的任意一种,中间用空格分开,空格表示任意层次. 右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). p).addClass(p3); 功能:在给定的父元素下匹配所有的子元素 代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个 元素对象

17、, 快购利众网5 快购利众网6 ,并为该 对象增加名为p3的样式 $(div+p).addClass(p3); 功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素 +代表紧接着div同层的第一个子元素对象. id为myDivInner同层后面第一个因为是 ,所以后没有紧接着的 id为myDiv同层后面正好是一个 最后选择出1个 元素对象, 快购利众网7 ,并为该 对象增加名为p3的样式 知识点: 是紧接着,如果A与B之间有其它元素都无法匹配. $(divp).addClass(p3); 功能:匹配 #myDiv 元素之后的所有同辈p 元素 该功能与 + 类似,不同的有两处. 一, +为

18、同辈并且紧跟, 为同辈不需要一定紧跟 二, +为同辈并且第一个, 为同辈多个. var aP = document.getElementById(myP); $(aP).addClass(p2); $(aP).addClass(p2) 其实就是$(#myP).addClass(p2) 的另一种形式. $()中处了可以用字符串的表达式选择器,还可以使用DOM对象 当你能看到这句话,我想对你说辛苦了. 学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切. 到现在我们应该明白之前的$(document)代表什么意思了吧. 好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.在实战篇上发布后很多朋友建议用真正的“实战”例子。 好吧，我尽量用我自己的项目中的例子来讲解，但如果开篇说的那样，我自己也是刚刚开始学JQuery，所以自己项目中的例子也许是很简单的。 有些朋友希望我讲解一些有关JavaScript,CSS方面的知识,说实话我本没有准备在本套教程里讨论与此有关的知识, 但挺多