教程主要是來(lái)自慕課網(wǎng)的Aaron艾倫，如有冒犯，請(qǐng)見(jiàn)諒
在教程中用的是JQuery1.9,在官網(wǎng)http://jquery.com/download可以進(jìn)行下載,當(dāng)然現(xiàn)在已經(jīng)是3.1版本了，不過(guò)基本原理是相似的。
JQuery是一個(gè)庫(kù)，不需要進(jìn)行安裝，只需要在頁(yè)面的<head></head>標(biāo)簽內(nèi)進(jìn)行script腳本中引入即可。如下：
對(duì)于JQuery來(lái)說(shuō)它本身還是JavaScript代碼，但是它還是對(duì)JavaScript進(jìn)行了很好的包裝處理，提供了很多好用的功能。
對(duì)于JQuery和DOM對(duì)象來(lái)說(shuō)，是不一樣的，兩者之間可以互相轉(zhuǎn)換。看下例子。
對(duì)上訴元素進(jìn)行獲取然后給這個(gè)文本節(jié)點(diǎn)增加文字，原生的JavaScript是這樣處理的。
利用DOM模型提供的document.getElementById()方法獲取的是一個(gè)DOM對(duì)象用innerHTML屬性處理文本。
而JQuery是這樣處理的。
通過(guò)$()方法會(huì)得到一個(gè)JQuery對(duì)象，這是一個(gè)類(lèi)數(shù)組的對(duì)象，對(duì)象內(nèi)部是包含DOM對(duì)象的信息然后封裝許多操作方法,通過(guò)調(diào)用自己的html方法得到與用純JavaScript的效果一致。通過(guò)JQuery方法包裝的到的是JQeury對(duì)象，與DOM對(duì)象一樣他們都能處理DOM。
如何將JQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象？
①利用數(shù)組下標(biāo)的方式讀取JQuery中的DOM對(duì)象
? ? ?假如有如下HTML代碼，想將其中的div中的文字變成紅色字體：
JQuery找到所以div元素，共三個(gè),因?yàn)镴Query對(duì)象也是一個(gè)數(shù)組結(jié)構(gòu),所以可以通過(guò)下標(biāo)來(lái)找元素，返回的是DOM對(duì)象，通過(guò)調(diào)用style屬性修改顏色。注意:同JAVA數(shù)組一樣，它的下標(biāo)是從0開(kāi)始的。
②通過(guò)JQuery自帶的get()方法
JQuery對(duì)象自身提供了一個(gè)get()方法允許直接訪問(wèn)對(duì)象內(nèi)相關(guān)的DOM節(jié)點(diǎn)。
如何將DOM對(duì)象轉(zhuǎn)化成JQuery對(duì)象？
$(參數(shù))是一個(gè)多功能的方法，通過(guò)傳遞不同的參數(shù)而產(chǎn)生不同的作用。
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對(duì)象，jQuery方法會(huì)把這個(gè)DOM對(duì)象給包裝成一個(gè)新的jQuery對(duì)象。例子如下：
通過(guò)getElementsByTagName獲取所以div節(jié)點(diǎn)的元素，結(jié)果是一個(gè)dom合集對(duì)象，通過(guò)$()方法轉(zhuǎn)化成JQuery對(duì)象，用first和css獲取第一個(gè)元素和修改顏色。
JQuery的選擇器
①id選擇器：用來(lái)查找ID，即元素的ID屬性
? 格式：$('#id')
在JQuery內(nèi)部采用的函數(shù)是用document.getElementById()來(lái)處理ID的獲取，注意的是id是唯一的，每個(gè)id值在一個(gè)頁(yè)面中只能使用一次。如果多個(gè)元素分配了相同的id，將只匹配該id選擇集合的第一個(gè)DOM元素。但這種行為不應(yīng)該發(fā)生;有超過(guò)一個(gè)元素的頁(yè)面使用相同的id是無(wú)效的
②類(lèi)選擇器：通過(guò)class樣式名來(lái)獲取節(jié)點(diǎn)
? 格式：$('.class')
對(duì)于id選擇器來(lái)說(shuō)，它的效率要低一些，但它可以多選，同樣，JQuery內(nèi)部是利用document.getElementByClassName()來(lái)實(shí)現(xiàn)的。
可見(jiàn)在JQuery內(nèi)部還實(shí)現(xiàn)了循環(huán)處理。
③元素選擇器:通過(guò)給定的標(biāo)志名稱(chēng)選擇所以元素
? ?格式:$('element')
搜索指定元素標(biāo)簽名的所有節(jié)點(diǎn)，這個(gè)是一個(gè)合集的操作。同樣的也有原生方法getElementsByTagName()函數(shù)支持。
可見(jiàn)在JQuery內(nèi)部還實(shí)現(xiàn)了循環(huán)處理。
④全選擇器(*選擇器)
? 格式:$('*')
通配符*便是選中所有元素，在JavaScript中同樣可以使用document.getElementByTagName('*')來(lái)獲取相應(yīng)的節(jié)點(diǎn)。
⑤層級(jí)選擇器:處理元素與元素之間的子元素、后代元素、兄弟元素、相鄰元素。
對(duì)于層級(jí)選擇器來(lái)說(shuō)，都有一個(gè)參考節(jié)點(diǎn)。后代選擇器包含了子選擇器的選擇內(nèi)容；一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容；相鄰兄弟選擇器和一般兄弟選擇器選擇到的元素必須在同一父元素下。
⑥基本篩選選擇器:篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號(hào)“：”開(kāi)頭.
注意事項(xiàng)：
┝:eq(), :lt(), :gt(), :even, :odd 用來(lái)篩選他們前面的匹配表達(dá)式的集合元素，根據(jù)之前匹配的元 ? ? ? 素在進(jìn)一步篩選，注意jQuery合集都是從0開(kāi)始索引
┝gt是一個(gè)段落篩選，從指定索引的下一個(gè)開(kāi)始，gt(1) 實(shí)際從2開(kāi)始
⑦內(nèi)容篩選選擇器：通過(guò)內(nèi)容來(lái)過(guò)濾
注意事項(xiàng)：
┝:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指 ? ? ?定元素”的元素
┝如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的。
┝:parent與:empty是相反的，兩者所涉及的子元素，包括文本節(jié)點(diǎn)
⑧可見(jiàn)性篩選選擇器:元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴(kuò)展了可見(jiàn)性篩選選擇 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?器:visible與:hidden
:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等。
隱藏一個(gè)元素的方式：
┝CSS display的值是none。
┝type="hidden"的表單元素。
┝寬度和高度都顯式設(shè)置為0。
┝一個(gè)祖先元素是隱藏的，該元素是不會(huì)在頁(yè)面上顯示
┝CSS visibility的值是hidden
┝CSS opacity的指是0
注意:如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的?？梢?jiàn)元素的寬度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。
⑨屬性篩選選擇器：基于屬性來(lái)定位一個(gè)元素
TIPS:在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類(lèi)型的元素，特別是表單form元素的操作，比如說(shuō)input[type="text"],input[type="checkbox"]等。[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類(lèi)型的文件
⑩子元素篩選選擇器
注意事項(xiàng)：
┝:first只匹配一個(gè)單獨(dú)的元素，但是:first-child選擇器可以匹配多個(gè)：即為每個(gè)父級(jí)元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
┝:last 只匹配一個(gè)單獨(dú)的元素， :last-child 選擇器可以匹配多個(gè)元素：即，為每個(gè)父級(jí)元素匹配最后一個(gè)子元素
┝如果子元素只有一個(gè)的話，:first-child與:last-child是同一個(gè)
┝:only-child匹配某個(gè)元素是父元素中唯一的子元素，就是說(shuō)當(dāng)前子元素是父元素中唯一的元素，則匹配
┝jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來(lái)自CSS規(guī)范，所以n值是“索引”，也就是說(shuō)，從1開(kāi)始計(jì)數(shù)，:nth-child(index)從1開(kāi)始的，而eq(index)是從0開(kāi)始的
┝nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算，后者從后往前計(jì)算
?表單元素選擇器
注意：
除了input篩選選擇器，幾乎每個(gè)表單類(lèi)別篩選器都對(duì)應(yīng)一個(gè)input元素的type值。大部分表單類(lèi)別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')
?表單對(duì)象屬性篩選選擇器:對(duì)所選擇的表單元素進(jìn)行篩選
注意事項(xiàng)：
┝選擇器適用于復(fù)選框和單選框，對(duì)于下拉框元素, 使用 :selected 選擇器
