由于時(shí)間緊任務(wù)急，我必須馬上把前端這套東西流程走通，為了第一步能先看懂師兄們寫的項(xiàng)目代碼，我開始了jQuery的學(xué)習(xí)。。。
jQuery簡(jiǎn)單介紹
簡(jiǎn)介
jQuery是繼Prototype后的又一個(gè)優(yōu)秀的JavaScript庫，是一個(gè)創(chuàng)建于2006年的開源項(xiàng)目。它憑借簡(jiǎn)潔的語法、跨平臺(tái)的兼容性，極大簡(jiǎn)化了開發(fā)人員遍歷dom文檔、html文檔、操作dom、處理事件、執(zhí)行動(dòng)畫和開發(fā)ajax的操作。
jQuery強(qiáng)調(diào)寫得少，做得多。它獨(dú)特的選擇器、鏈?zhǔn)讲僮?、事件處理機(jī)制和封裝完善的ajax都是其他js庫望塵莫及的。
優(yōu)勢(shì)
輕量級(jí)、強(qiáng)大的選擇器、出色的DOM封裝、可靠的事件處理機(jī)制、完善的Ajax、出色的瀏覽器兼容性、鏈?zhǔn)讲僮鞣椒?、豐富的插件支持、隱式迭代。
配置環(huán)境
不需要特別安裝，只要在頁面<head>標(biāo)簽內(nèi)寫一行標(biāo)簽引入即可，此方法是在百度上調(diào)用jquery。
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
或者采用本地存放jquery方法：在jquery官網(wǎng)下載一個(gè)jquery.js文件，放在本地項(xiàng)目所在webroot的js文件夾內(nèi)，再在<head>標(biāo)簽內(nèi)寫一行標(biāo)簽：
<script type="text/javascript" src="jquery.js"></script>
代碼風(fēng)格
鏈?zhǔn)讲僮黠L(fēng)格
- 對(duì)于同一個(gè)對(duì)象不超過3個(gè)操作的，可以寫在一行
- 對(duì)于同一個(gè)對(duì)象較多操作，建議每一行寫一個(gè)操作
- 對(duì)于多個(gè)對(duì)象少量操作，可以每個(gè)對(duì)象寫一行，如果涉及子元素，可以適當(dāng)縮進(jìn)
jQuery對(duì)象和DOM對(duì)象
DOM：document object model 文檔對(duì)象模型
jQuery對(duì)象：通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，jQuery對(duì)象可以使用jQuery里的方法。
$("#foo").html();
等同于
document.getElementById("foo").innerHTML;
在jQuery對(duì)象中無法使用DOM對(duì)象的任何方法。DOM對(duì)象也不能使用jQuery里的方法。
jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換
獲取jQuery對(duì)象：var $variable = jQuery 對(duì)象;
獲取DOM對(duì)象：var variable = DOM 對(duì)象;
1、 jQuery對(duì)象-->DOM對(duì)象
[index]和get(index)
- [index]方法
var $cr = $("#cr");
var cr = $cr[0];
```-
- get(index)方法
var $cr = $("#cr");
var cr = $cr.get(0);
2、DOM對(duì)象--> jQuery對(duì)象
var cr = document.getElementById("cr");
var $cr = $(cr);
- 平時(shí)用到的jQuery對(duì)象都是通過$()函數(shù)制造出來的，$()函數(shù)是jQuery對(duì)象的制造工廠。
#### jQuery選擇器
選擇器是jQuery的根基，對(duì)事件處理、遍歷DOM、Ajax操作都依賴于選擇器。
##### 一、CSS選擇器
要使某個(gè)樣式應(yīng)用于特定的HTML元素，需要找到該元素，在CSS中，執(zhí)行這一任務(wù)的表現(xiàn)規(guī)則稱為CSS選擇器。
|選擇器|語法|描述|示例|
|:--|:--|:--|:--|
|標(biāo)簽選擇器|E{<br/> CSS規(guī)則<br/>}<br/>|以文檔元素作為選擇符|a{<br/> font-size:14px;<br/>}|
|ID選擇器|#{<br/> CSS規(guī)則<br/>}|以文檔元素的唯一標(biāo)識(shí)符ID作為選擇符|#note{<br/> font-size:14px;<br/>}|
|類選擇器|E.className{<br/> CSS規(guī)則<br/>}|以文檔元素的class作為選擇符|div.note{<br/> font-size:14px;<br/>}|
|群組選擇器|E1,E2,E3{<br/> CSS規(guī)則<br/>}|多個(gè)選擇符應(yīng)用同樣的樣式規(guī)則|td,p,a{<br/> font-size:14px;<br/>}|
|后代選擇器|E F{<br/> CSS規(guī)則<br/>}|元素E的任意后代元素F|#links a{<br/> font-size:14px;<br/>}|
|通配選擇器|*{<br/> CSS規(guī)則<br/>}|以文檔的所有元素作為選擇符|*{<br/> font-size:14px;<br/>}|
這就尷尬了，回車的代碼都顯示出來了，下次還是粘貼表格圖片好了。br是回車的意思。
幾乎所有主流瀏覽器都支持上面這些選擇器。此外CSS還有偽類選擇器、子選擇器、臨近選擇器和屬性選擇器，但主流瀏覽器并不支持所有CSS選擇器~~
##### 二、jQuery選擇器
jQuery選擇器完全繼承了CSS風(fēng)格，可以便捷迅速的找出特定的DOM元素，無需擔(dān)心瀏覽器是否支持這一選擇器，jQuery的行為都必須在獲取到元素后才能生效。
**jQuery選擇器的優(yōu)勢(shì)**
- 簡(jiǎn)潔的寫法
`比如：用$("#ID")代替document.getElementById()函數(shù)`
- 支持CSS1到CSS3選擇器
- 完善的處理機(jī)制
即使用jQuery獲取網(wǎng)頁中不存在的元素也不會(huì)報(bào)錯(cuò)~
**jQuery選擇器**
- 基本選擇器
最常用、最簡(jiǎn)單的選擇器。通過id、class、標(biāo)簽名等來查找DOM元素。在網(wǎng)頁中，每個(gè)id只能用一次，class可以重復(fù)使用。
- 層次選擇器
如果想通過DOM元素之間的層次關(guān)系來獲取特定元素，如后代元素、子元素、相鄰元素和同輩元素等，那么需要用層次選擇器。
- 過濾選擇器（基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對(duì)象過濾選擇器）
過濾選擇器是通過特定過濾規(guī)則來篩選所需的DOM元素，選擇器以：開頭。
1、基本過濾選擇器
2、內(nèi)容過濾選擇器
3、可見性過濾選擇器
4、屬性過濾選擇器
它的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素。
5、子元素過濾選擇器
需要注意父元素和子元素的區(qū)分。
6、表單對(duì)象屬性過濾選擇器
此屬性主要對(duì)所選擇的表單元素進(jìn)行過濾。.
- 表單選擇器
它可以方便的獲取到表單的某個(gè)或某類型的元素。
##### 三、jQuery選擇器注意事項(xiàng)
1、選擇器中含有特殊符號(hào)
- 含有"·"、"#"、"（"、"]"等特殊字符：
在特殊符號(hào)前加"\\"
- 屬性選擇器的@符號(hào)問題：
由于jQuery版本問題，如果屬性選擇器前面有@，則去掉
2、選擇器中含有空格的注意事項(xiàng)
多一個(gè)少一個(gè)空格會(huì)得到不同結(jié)果，這點(diǎn)需要注意