JQuery.docx
《JQuery.docx》由会员分享，可在线阅读，更多相关《JQuery.docx（20页珍藏版）》请在冰豆网上搜索。
JQuery
前言
贝壳（就是本文作者了）也属于刚刚会用点JQuery的那一类型,在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而"误人子弟",最终还是鼓起勇气.如在文章中有错误或者不合适的理解望广大朋友直接指出批评.
本文的宗旨,授人鱼不如授人渔.我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过.但当我们已经会渔了还用担心鱼吗!
?
BTW:
贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.
JQuery是什么
JQuery只是一个JS文件
人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样.想掌握又怕自己学不会.其实JQuery很简单.
JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了（有点类似SDK）,具体内部原理和实现我们现在不去讨论.记住JQuery很简单,很方便.
目前jQuery最新Release版本为1.32,官方下载地址为:
本系列教程基于1.32版进行讲解.
JQuery有两种版本:
一种为uncompressed版（未压缩版）主要用在开发中.
另一种为Minified（迷您版）当开发完毕了,就可以改用这个版本.
两种版本的区别
文件大小不一样,最终用户在浏览时可以减少下载JS时的等待时间.
Uncompressed版文件大小为118KB
Minified版文件大小为56KB
JQuery能带给我们什么
一,站在巨人的肩上
别人已经发明了轮子,我们没必要自己再去造一个.
二,强大的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的引用.代码如下:
JQuery测试
红色的那一行代码就完成了JQuery的引用,简单吧!
现在我们再扩充一个功能,使index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.
index.html代码结构:
JQuery测试
/*table中偶数行*/
.tabEven{
background:
#ff0000;
}
/*table中奇数行*/
.tabOdd{
background:
#00ff00;
}
//
[CDATA[
$（document）.ready（function（）{
$（"#tabTesttr:
even"）.addClass（"tabEven"）;
$（"#tabTesttr:
odd"）.addClass（"tabOdd"）;
}）;
//]]>
快购利众网_1 |
1 |
快购利众网_2 |
1 |
快购利众网_3 |
1 |
快购利众网_4 |
1 |
快购利众网_5 |
1 |
效果如下:
代码解析:
$（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代码.
实例
两种编写方式
一
$（document）.ready（function（）{alert（"HelloWorld!
"）;}）;
二
varmyFun=function（）{alert（"HelloWorld!
"）;}
$（document）.ready（myFun）;
到这儿我想大家对ready的用法应该是明白了,但对前面的$（document）应该很迷惑.这是什么东东?
别急...现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.
看完下面的代码我们就明白了$（）的用法.
index.html代码结构如下:
JQuery测试
.p1{
background:
#ff0000;
}
.p2{
background:
#00ff00;
}
.p3{
background:
#0000ff;
}
.myPCss{
font-size:
36px;
}
//
[CDATA[
$（document）.ready（function（）{
$（"p"）.addClass（"p1"）;
$（"p"）.removeClass（"p1"）;
$（"#myP"）.addClass（"p2"）;
$（".myPCss"）.addClass（"p3"）;
$（"#myDiv p"）.addClass（"p3"）;
$（"#myDiv>p"）.addClass（"p3"）;
$（"div+p"）.addClass（"p3"）;
$（"div~p"）.addClass（"p3"）;
varaP=document.getElementById（"myP"）;
$（aP）.addClass（"p2"）;
}）;
//]]>
快购利众网1
快购利众网2
快购利众网3
快购利众网4
升级会员 