您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 信息化管理 > JQuery无废话系列教程
前言贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型,在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而误人子弟,最终还是鼓起勇气.如在文章中有错误或者不合适的理解望广大朋友直接指出批评.本文的宗旨,授人鱼不如授人渔.我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过.但当我们已经会渔了还用担心鱼吗!?BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.JQuery是什么JQuery只是一个JS文件人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样.想掌握又怕自己学不会.其实JQuery很简单.JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论.记住JQuery很简单,很方便.本系列教程基于1.32版进行讲解.JQuery有两种版本:一种为uncompressed版(未压缩版)主要用在开发中.另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本.两种版本的区别文件大小不一样,最终用户在浏览时可以减少下载JS时的等待时间.Uncompressed版文件大小为118KBMinified版文件大小为56KBJQuery能带给我们什么一,站在巨人的肩上别人已经发明了轮子,我们没必要自己再去造一个.二,强大的BOM,DOM,CSS,事件的操作能力我最常用的是CSS及DOM的操作,真的太方便了.三,更加简洁的代码自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了.四,与浏览器无关性做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现有时不一样,我们不得不为不同的浏览器编写相应的代码.JQuery在这方法已经内部处理,我们只管去用就是了.五,不错的性能我自己有自知之明,至少我写的JavaScript代码的运行效率不如JQuery的高.如何使用JQuery万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明.:)建立一个html文件,比如index.html并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以)首先我们解决JQuery的引用.代码如下:htmlheadtitleJQuery测试/titlescriptlanguage=javascriptsrc=jquery-1.3.2.js/script/headbody/body/thml红色的那一行代码就完成了JQuery的引用,简单吧!现在我们再扩充一个功能,使index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.index.html代码结构:htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleJQuery测试/titlestyletype=text/css/*table中偶数行*/.tabEven{background:#ff0000;}/*table中奇数行*/.tabOdd{background:#00ff00;}/stylescriptlanguage=javascriptsrc=jquery-1.3.2.js/scriptscriptlanguage=JavaScripttype=text/javascript//![CDATA[$(document).ready(function(){$(#tabTesttr:even).addClass(tabEven);$(#tabTesttr:odd).addClass(tabOdd);});//]]/script/headbodytableid=tabTesttbodytrtd快购利众网_1/tdtd1/td/trtrtd快购利众网_2/tdtd1/td/trtrtd快购利众网_3/tdtd1/td/trtrtd快购利众网_4/tdtd1/td/trtrtd快购利众网_5/tdtd1/td/tr/tbody/table/body/thml效果如下:代码解析:$(document).ready(function(){$(#tabTesttr:even).addClass(tabEven);$(#tabTesttr:odd).addClass(tabOdd);});$(document).ready的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟),这个函数几乎在所有使用JQuery的代码中都用到.因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.$(#tabTesttr:even).addClass(tabEven);为id为tabTest的表格的偶数行增加名为tabEven的CSS样式$(#tabTesttr:odd).addClass(tabOdd);为id为tabTest的表格的奇数行增加名为tabEven的CSS样式最后,初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.就进入实战?是不是太快了?我还不知道怎么用JQuery!!...我知道大家的想法,放心好了,有些东西是不需要太多的理论知道做为基础,其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识.还是入门篇所说的那样,其实JQuery很简单.:)在我们开始学习之前建议大家先去下载JQuery1.3中文参考.下载地址今天的教程有些复杂(只是概念多点而已),但过了这一关,JQuery的学习可谓是一马平川.好了,进入正题.再次申明JQuery很简单,takeeasy!从那开始呢?最好的切入地方就从JQuery的最基本的一个函数ready开始!该函数的作用可以看做和onLoad,至少现在可以这么看待.定义ready(fn);功能这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。请确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。通过上面所述,我们可以把ready看做onLoad的替代方法.这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法?我个人的体会及看法是onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟!在ppk谈JavaScript中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript代码.实例两种编写方式一$(document).ready(function(){alert(HelloWorld!);});二varmyFun=function(){alert(HelloWorld!);}$(document).ready(myFun);到这儿我想大家对ready的用法应该是明白了,但对前面的$(document)应该很迷惑.这是什么东东?别急...现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.看完下面的代码我们就明白了$()的用法.index.html代码结构如下:htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleJQuery测试/titlestyletype=text/css.p1{background:#ff0000;}.p2{background:#00ff00;}.p3{background:#0000ff;}.myPCss{font-size:36px;}/stylescriptlanguage=javascriptsrc=jquery-1.3.2.js/scriptscriptlanguage=JavaScripttype=text/javascript//![CDATA[$(document).ready(function(){$(p).addClass(p1);$(p).removeClass(p1);$(#myP).addClass(p2);$(.myPCss).addClass(p3);$(#myDivp).addClass(p3);$(#myDivp).addClass(p3);$(div+p).addClass(p3);$(div~p).addClass(p3);varaP=document.getElementById(myP);$(aP).addClass(p2);});//]]/script/headbodyp快购利众网1/ppid=myP快购利众网2/ppclass=myPCss快购利众网3/pdivid=myDivdivid=myDivInnerp快购利众网4/p/divdivid=myDivTemp/divp快购利众网5/pp快购利众网6/p/divp快购利众网7/p/body/thml代码解析:$(p).addClass(p1);$(p).removeClass(p1);$(#myP).addClass(p2);$(.myPCss).addClass(p3);$(#myDivp).addClass(p3);$(#myDivp).addClass(p3);$(div+p).addClass(p3);$(div~p).addClass(p3);varaP=document.getElementById(myP);$(aP).addClass(p2);$(p).addClass(p1);$(p).removeClass(p1);选择文档里全部的p元素对象,不论p在文档中所处的层次结构如何,最后选到了7个p元素对象p快购利众网1/ppid=myP快购利众网2/ppclass=myPCss快购利众网3/pp快购利众网4/pp快购利众网5/pp快购利众网6/pp快购利众网7/paddClass(cssname)函数很简单,就是为前面$()选择到的元素对象增加CSS样式.removeClass(cssname)函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.在这儿,这两
本文标题:JQuery无废话系列教程
链接地址:https://www.777doc.com/doc-2879386 .html