6.1.1 認(rèn)識(shí)jQuery
為解決開(kāi)發(fā)過(guò)程中的頁(yè)面顯示兼容性問(wèn)題,網(wǎng)頁(yè)腳本技術(shù)產(chǎn)生了許多JavaScript庫(kù)瘪阁。目前售滤，被頻繁使用的JavaScript庫(kù)包括jQuery捕虽、Prototype瘾杭、Spry和Ext JS挥下。其中使用最廣泛的JavaScript庫(kù)是jQuery揽祥。它的主旨是以更少的代碼讽膏，實(shí)現(xiàn)更多的功能（Write less,do more）。
6.1.2 jQuery基本功能
1.訪問(wèn)和操作DOM元素
使用jQuery庫(kù)拄丰，可以很方便地獲取頁(yè)面中的元素府树，并能方便地修改其樣式和內(nèi)容。無(wú)論是刪除還是復(fù)制元素料按，jQuery都提供了一整套方便且快捷的方法奄侠，既減少了代碼的編寫(xiě)，又提高了用戶對(duì)頁(yè)面的體驗(yàn)度载矿。相關(guān)示例將在后續(xù)章節(jié)中展示垄潮。
2.對(duì)頁(yè)面事件的處理
引入jQuery庫(kù)，可以使頁(yè)面的表現(xiàn)層與功能開(kāi)發(fā)分離。開(kāi)發(fā)者可以更多地關(guān)注于程序的邏輯與功效弯洗；頁(yè)面設(shè)計(jì)者側(cè)重于頁(yè)面的優(yōu)化與用戶體驗(yàn)旅急。然后，通過(guò)事件綁定機(jī)制牡整，實(shí)現(xiàn)兩者的結(jié)合藐吮。
3.大量插件在頁(yè)面中的運(yùn)用
在引入jQuery庫(kù)后，還可以使用大量的插件來(lái)完善頁(yè)面的功能和效果逃贝，如驗(yàn)證插件和UI插件炎码。使用這些插件極大地豐富了頁(yè)面的展示效果，通過(guò)插件的引入輕松實(shí)現(xiàn)JavaScript代碼之前未能涉及的功能秋泳。
4.與Ajax技術(shù)的完美結(jié)合
Ajax異步讀取服務(wù)器數(shù)據(jù)的方法潦闲，極大地方便了程序的開(kāi)發(fā)，增強(qiáng)了用戶頁(yè)面體驗(yàn)度迫皱。引入jQuery庫(kù)后歉闰，Ajax不僅完善了原有的功能，而且簡(jiǎn)化了代碼卓起，只要通過(guò)其內(nèi)部對(duì)象或函數(shù)和敬，再添加幾行代碼可實(shí)現(xiàn)復(fù)雜的功能。
6.1.3 編寫(xiě)一個(gè)簡(jiǎn)單的jQuery應(yīng)用
在jQuery的官網(wǎng)網(wǎng)站（http：//jquery.com）中戏阅，可以下載最新版本的jQuery文件庫(kù)昼弟，下載文件的大小僅在100kb左右。通常在頁(yè)面的<head></head>中加入引用奕筐。
如：<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
下面通過(guò)一個(gè)簡(jiǎn)單的示例舱痘，來(lái)演講jQuery的基本使用。在頁(yè)面上有一個(gè)按鈕和一個(gè)隱藏的div元素离赫，div中嵌套一幅圖片芭逝，當(dāng)單機(jī)按鈕時(shí)，此隱藏的div放大并顯示出來(lái)渊胸。
示例 6.1：
<head>
<style type="text/css">
#info{
display:none;
}
</style>
<script type="text/javascript" scr="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).click(function(){
$("#info").show(2000);//show(2000)表示用2秒顯示元素
});
});
</script>
</head>
<body>
<input type="button" value="顯示" id="btn"/>
<div id="info">
<img src="flower1.jpg" width="200"/>
</div>
</body>
對(duì)示例6.1的說(shuō)明如下:
（1）在示例6.1中旬盯，有一段代碼如下：
$(document).ready(function(){
//程序段
});
該段代碼類(lèi)似于傳統(tǒng)的JavaScript代碼：
window.onload=function(){
//程序段
}
雖然上述兩段代碼在功能上是可以互換的，但它們之間又存在著一定的區(qū)別翎猛。這表現(xiàn)在執(zhí)行的
時(shí)間上： (document).ready只需圖片標(biāo)簽完成迂卢，而不用等該圖片加載完成某弦，即可設(shè)置圖片寬和高的屬性或樣式等桐汤。而window.onload需要等圖片加載完成之后，才能設(shè)置圖片的寬和高的屬性或樣式等靶壮。
$(document).ready(function(){})可以寫(xiě)成$(function(){})怔毛，因此下述代碼是等價(jià)的。
$(document).ready(function(){
//程序
});
等價(jià)于
$(function(){
//程序段
});
（2）使用下述代碼為id="btn"按鈕的單擊事件綁定響應(yīng)的函數(shù)腾降。
$("#btn").click(function(){
//可執(zhí)行代碼
}); //為事件添加響應(yīng)函數(shù)
使用click方法拣度，將函數(shù)綁定到制定元素的click事件中，單擊按鈕時(shí)螃壤，綁定的函數(shù)就會(huì)執(zhí)行抗果。
6.1.4 jQuery代碼特點(diǎn)
1.符號(hào)，它的對(duì)象jQuery的簡(jiǎn)書(shū)形式奸晴，$()等效于jQuery()冤馏。實(shí)際上，幾乎每一行jQuery命令的開(kāi)頭都需要使用該符號(hào)寄啼，頁(yè)面元素的選擇和功能函數(shù)的前綴逮光，也都使用該符號(hào)，它是jQuery程序的標(biāo)志墩划。
2.隱式循環(huán)
當(dāng)使用jQuery查找到符合要求的全部元素后涕刚，無(wú)需循環(huán)遍歷每一個(gè)元素。實(shí)現(xiàn)循環(huán)結(jié)構(gòu)的元素的同時(shí)乙帮，從而大幅度減少代碼量杜漠。
3.鏈?zhǔn)綍?shū)寫(xiě)
jQuery程序中允許將發(fā)生在同一個(gè)對(duì)象上的一組命令直接連寫(xiě)在一個(gè)語(yǔ)句中，還可以插入換行和空格察净。
6.2 jQuery選擇器
語(yǔ)法結(jié)構(gòu)為：
$(selector).action()
jQuery選擇器的4大類(lèi)：
基本選擇器驾茴、過(guò)濾選擇器、層次選擇器塞绿、表單選擇器
jQuery中提供的方法沟涨，包括單擊事件處理和綁定事件處理的方法：
$("#btn").click(function(){
//執(zhí)行代碼
})；
6.2.1 基本選擇器
id：根據(jù)id屬性值選取元素
.class：根據(jù)class屬性值選取元素
element：根據(jù)給定的標(biāo)簽名選取元素
*：選取所有元素异吻，包括html和body
selector1，selector2喜庞，... ：將每一個(gè)選擇器匹配到的元素合并后一起返回
6.2.2 過(guò)濾選擇器
過(guò)濾選擇器分為基本過(guò)濾選擇器诀浪、內(nèi)容過(guò)濾選擇器和屬性過(guò)濾選擇器
基本過(guò)濾選擇器：
first()或:first
last()或:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
內(nèi)容過(guò)濾選擇器：
:contains(text)
:empty
:has(selector)
:parent
屬性過(guò)濾選擇器：
[attribute] 獲取擁有該屬性的所有元素
[attribute=value] 獲取某屬性值為value的所有元素
[attribute!=value] 獲取某屬性值不等于value的所有元素
[attribute^=value] 選取屬性值以value開(kāi)頭的所有元素
[attribute$=value] 選取屬性值以value結(jié)束的所有元素
[attribute*=value] 選取屬性值中包含value的所有元素
[selector1][selector2]... 合并多個(gè)選擇器，滿足多個(gè)條件延都，每選擇一次將縮小一次范圍
6.2.3 層次選擇器
后代選擇器：selector1 selector2(從selector1的后代元素中選取selector2)
子選擇器：selector1>selector2(從selector的子元素中選取selector2)
相鄰元素選擇器：selector1+selector2(從selector1后面的第一個(gè)兄弟元素中選取selector2)
同輩元素選擇器：selector1~selector2(從selector1后面的所有兄弟元素中選取selector2)
