JQueryWord文档格式.docx
《JQueryWord文档格式.docx》由会员分享，可在线阅读，更多相关《JQueryWord文档格式.docx（20页珍藏版）》请在冰豆网上搜索。
我最常用的是CSS及DOM的操作,真的太方便了.
三,更加简洁的代码
自己的亲身经历,比如表格（Table）中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了.
四,与浏览器无关性
做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现有时不一样,我们不得不为不同的浏览器编写相应的代码.JQuery在这方法已经内部处理,我们只管去用就是了.
五,不错的性能
我自己有自知之明,至少我写的JavaScript代码的运行效率不如JQuery的高.
如何使用JQuery
万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明.:
）
建立一个html文件,比如index.html并与JQuery库文件jquery-1.3.2.js放到同目录下（其实放那都可以）
首先我们解决JQuery的引用.代码如下:
<
html>
head>
title>
JQuery测试<
/title>
scriptlanguage="
javascript"
src="
jquery-1.3.2.js"
>
/script>
/head>
body>
/body>
/thml>
红色的那一行代码就完成了JQuery的引用,简单吧!
现在我们再扩充一个功能,使index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.
index.html代码结构:
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
styletype="
text/css"
/*table中偶数行*/
.tabEven{
background:
#ff0000;
}
/*table中奇数行*/
.tabOdd{
#00ff00;
/style>
scriptlanguage="
JavaScript"
type="
text/javascript"
//<
!
[CDATA[
$（document）.ready（function（）{
$（"
#tabTesttr:
even"
）.addClass（"
tabEven"
）;
odd"
tabOdd"
}）;
//]]>
tableid="
tabTest"
tbody>
tr>
td>
快购利众网_1<
/td>
1<
/tr>
快购利众网_2<
快购利众网_3<
快购利众网_4<
快购利众网_5<
/tbody>
/table>
效果如下:
代码解析:
$（document）.ready的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码（别忘了JQuery也是JavaScript代码哟）,这个函数几乎在所有使用JQuery的代码中都用到.因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.
为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
为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（"
}
$（document）.ready（myFun）;
到这儿我想大家对ready的用法应该是明白了,但对前面的$（document）应该很迷惑.这是什么东东?
别急...现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.
看完下面的代码我们就明白了$（）的用法.
index.html代码结构如下:
.p1{
.p2{
.p3{
#0000ff;
.myPCss{
font-size:
36px;
}
p"
p1"
）.removeClass（"
#myP"
p2"
.myPCss"
p3"
#myDiv
p"
#myDiv>
div+p"
div~p"
varaP=document.getElementById（"
myP"
$（aP）.addClass（"
p>
快购利众网1<
/p>
pid="
快购利众网2<
pclass="
myPCss"
快购利众网3<
divid="
myDiv"
myDivInner"
快购利众网4<
/div>
myDivTemp"
快购利众网5<
快购利众网6<
快购利众网7<
代码解析:
选择文档里全部的<
元素对象,不论<
在文档中所处的层次结构如何,最后选到了7个<
元素对象"
addClass（"
cssname"
）函数很简单,就是为前面$（）选择到的元素对象增加CSS样式.
removeClass（"
）函数也很简单,就是去掉前面$（）选择到的元素对象的指定的样式.
在这儿,这两段代码功能抵消,相当什么也没做.
选择文档里id为"
的指定元素对象,并为该元素对象增加名称为"
的样式.最后选到了1个<
知识点:
如果要选择指定ID号的元素对象,记得前面用"
#"
选择文档里样式名为"
如果要选择指定样式的元素对象,记得前面用"
."
现在可以为大家正式介绍$（）,在JQuery里,我们称她为"
选择器函数"
里面的内容称为"
选择器"
.
现在大家自己试试,记住选择器选择出的对象有可能是多个哟.
上面的内容是不是挺简单的!
嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住"
选择出的元素对象可能是多个这点就不用怕了.
功能:
在给定的祖先元素下匹配所有的后代元素
分成两部分来分析
一,$（"
#myDiv"
）根据上面所学的知识,选择出1个<
div>
元素对象,"
二,$（"
）在上面2个<
元素对象中的任意层中选择<
元素对象.几个?
3个"
其中"
都是在"
内部定义的
虽然"
是在id为"
myDivInner的"
div"
内部定义的.但因为id为"
也是id为"
myDiv的下层,所以"
也属于id为"
myDiv的下层.有些绕口,记住一点就行.A,B操作器中如果是用空格连接,那么表示B属于A的下层（可以为任意层）之中
最后为这3个<
元素对象增加名为"
的样式
对于这类有层次的选择表达式$（"
AB"
）,A选择器和B选择器可以是"
标签名"
"
#id"
.css"
三种中的任意一种,中间用空格分开,空格表示任意层次.
右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择,记住是在左边选择出的元素对象（可能是多个）的内部进行再次选择（可能是多个）.<
-这个知识点一定要理解透!
在给定的父元素下匹配所有的子元素
>
代表#myDiv下的子元素对象（多个并只是下一层）,最后选择出2个<
元素对象,"
并为该<
对象增加名为"
匹配所有紧接在div元素后的第一个同辈p元素
+代表紧接着div同层的第一个子元素对象.
id为"
同层后面第一个因为是"
所以后没有紧接着的"
同层后面正好是一个"
最后选择出1个<
是紧接着,如果A与B之间有其它元素都无法匹配.
匹配#myDiv元素之后的所有同辈p元素
该功能与+类似,不同的有两处.
一,+为同辈并且紧跟,~为同辈不需要一定紧跟
二,+为同辈并且第一个,~为同辈多个.
）其实就是$（"
）的另一种形式.
$（）中处了可以用字符串的表达式选择器,还可以使用DOM对象
当你能看到这句话,我想对你说"
辛苦了."
学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.
到现在我们应该明白之前的"
$（document）"
代表什么意思了吧.
好了,今天先讲到这儿.要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.
在实战篇上发布后很多朋友建议用真正的“实战”例子。
好吧，我尽量用我自己的项目中的例子来讲解，但如果开篇说的那样，我自己也是刚刚开始学JQuery，所以自己项目中的例子也许是很简单的。
有些朋友希望我讲解一些有关JavaScript,CSS方面的知识,说实话我本没有准备在本套教程里讨论与此有关的知识,但挺多
升级会员 