教程主要是來自慕課網(wǎng)的Aaron艾倫，如有冒犯叛赚，請見諒
在教程中用的是JQuery1.9,在官網(wǎng)http://jquery.com/download可以進行下載,當(dāng)然現(xiàn)在已經(jīng)是3.1版本了驻仅，不過基本原理是相似的其徙。
JQuery是一個庫唯灵，不需要進行安裝丰泊，只需要在頁面的<head></head>標簽內(nèi)進行script腳本中引入即可薯定。如下：
對于JQuery來說它本身還是JavaScript代碼，但是它還是對JavaScript進行了很好的包裝處理瞳购，提供了很多好用的功能话侄。
對于JQuery和DOM對象來說，是不一樣的学赛，兩者之間可以互相轉(zhuǎn)換年堆。看下例子盏浇。
對上訴元素進行獲取然后給這個文本節(jié)點增加文字嘀韧，原生的JavaScript是這樣處理的。
利用DOM模型提供的document.getElementById()方法獲取的是一個DOM對象用innerHTML屬性處理文本缠捌。
而JQuery是這樣處理的锄贷。
通過$()方法會得到一個JQuery對象，這是一個類數(shù)組的對象曼月，對象內(nèi)部是包含DOM對象的信息然后封裝許多操作方法,通過調(diào)用自己的html方法得到與用純JavaScript的效果一致谊却。通過JQuery方法包裝的到的是JQeury對象，與DOM對象一樣他們都能處理DOM哑芹。
如何將JQuery對象轉(zhuǎn)化成DOM對象炎辨？
①利用數(shù)組下標的方式讀取JQuery中的DOM對象
? ? ?假如有如下HTML代碼，想將其中的div中的文字變成紅色字體：
JQuery找到所以div元素聪姿，共三個,因為JQuery對象也是一個數(shù)組結(jié)構(gòu),所以可以通過下標來找元素碴萧，返回的是DOM對象，通過調(diào)用style屬性修改顏色末购。注意:同JAVA數(shù)組一樣破喻，它的下標是從0開始的。
②通過JQuery自帶的get()方法
JQuery對象自身提供了一個get()方法允許直接訪問對象內(nèi)相關(guān)的DOM節(jié)點盟榴。
如何將DOM對象轉(zhuǎn)化成JQuery對象曹质？
$(參數(shù))是一個多功能的方法，通過傳遞不同的參數(shù)而產(chǎn)生不同的作用擎场。
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象羽德，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象。例子如下：
通過getElementsByTagName獲取所以div節(jié)點的元素迅办，結(jié)果是一個dom合集對象宅静，通過$()方法轉(zhuǎn)化成JQuery對象，用first和css獲取第一個元素和修改顏色站欺。
JQuery的選擇器
①id選擇器：用來查找ID姨夹，即元素的ID屬性
? 格式：$('#id')
在JQuery內(nèi)部采用的函數(shù)是用document.getElementById()來處理ID的獲取究驴，注意的是id是唯一的，每個id值在一個頁面中只能使用一次匀伏。如果多個元素分配了相同的id洒忧，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應(yīng)該發(fā)生;有超過一個元素的頁面使用相同的id是無效的
②類選擇器：通過class樣式名來獲取節(jié)點
? 格式：$('.class')
對于id選擇器來說够颠，它的效率要低一些熙侍，但它可以多選，同樣履磨，JQuery內(nèi)部是利用document.getElementByClassName()來實現(xiàn)的蛉抓。
可見在JQuery內(nèi)部還實現(xiàn)了循環(huán)處理。
③元素選擇器:通過給定的標志名稱選擇所以元素
? ?格式:$('element')
搜索指定元素標簽名的所有節(jié)點剃诅，這個是一個合集的操作巷送。同樣的也有原生方法getElementsByTagName()函數(shù)支持。
可見在JQuery內(nèi)部還實現(xiàn)了循環(huán)處理矛辕。
④全選擇器(*選擇器)
? 格式:$('*')
通配符*便是選中所有元素笑跛，在JavaScript中同樣可以使用document.getElementByTagName('*')來獲取相應(yīng)的節(jié)點。
⑤層級選擇器:處理元素與元素之間的子元素聊品、后代元素飞蹂、兄弟元素、相鄰元素翻屈。
對于層級選擇器來說陈哑，都有一個參考節(jié)點。后代選擇器包含了子選擇器的選擇內(nèi)容伸眶；一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容惊窖；相鄰兄弟選擇器和一般兄弟選擇器選擇到的元素必須在同一父元素下。
⑥基本篩選選擇器:篩選選擇器的用法與CSS中的偽元素相似厘贼，選擇器用冒號“：”開頭.
注意事項：
┝:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素界酒，根據(jù)之前匹配的元 ? ? ? 素在進一步篩選，注意jQuery合集都是從0開始索引
┝gt是一個段落篩選涂臣，從指定索引的下一個開始盾计，gt(1) 實際從2開始
⑦內(nèi)容篩選選擇器：通過內(nèi)容來過濾
注意事項：
┝:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素赁遗，has查找包含“指 ? ? ?定元素”的元素
┝如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的族铆。
┝:parent與:empty是相反的岩四，兩者所涉及的子元素，包括文本節(jié)點
⑧可見性篩選選擇器:元素有顯示狀態(tài)與隱藏狀態(tài)哥攘，jQuery根據(jù)元素的狀態(tài)擴展了可見性篩選選擇 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?器:visible與:hidden
:hidden選擇器剖煌，不僅僅包含樣式是display="none"的元素材鹦，還包括隱藏表單、visibility等等耕姊。
隱藏一個元素的方式：
┝CSS display的值是none桶唐。
┝type="hidden"的表單元素。
┝寬度和高度都顯式設(shè)置為0茉兰。
┝一個祖先元素是隱藏的尤泽，該元素是不會在頁面上顯示
┝CSS visibility的值是hidden
┝CSS opacity的指是0
注意:如果元素中占據(jù)文檔中一定的空間,元素被認為是可見的」媪常可見元素的寬度或高度坯约，是大于零。元素的visibility: hidden 或 opacity: 0被認為是可見的莫鸭，因為他們?nèi)匀徽加每臻g布局闹丐。
⑨屬性篩選選擇器：基于屬性來定位一個元素
TIPS:在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的
[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作被因，比如說input[type="text"],input[type="checkbox"]等卿拴。[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件
⑩子元素篩選選擇器
注意事項：
┝:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素梨与。這相當(dāng)于:nth-child(1)
┝:last 只匹配一個單獨的元素巍棱， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最后一個子元素
┝如果子元素只有一個的話蛋欣，:first-child與:last-child是同一個
┝:only-child匹配某個元素是父元素中唯一的子元素航徙，就是說當(dāng)前子元素是父元素中唯一的元素，則匹配
┝jQuery實現(xiàn):nth-child(n)是嚴格來自CSS規(guī)范陷虎，所以n值是“索引”到踏，也就是說，從1開始計數(shù)尚猿，:nth-child(index)從1開始的窝稿，而eq(index)是從0開始的
┝nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計算，后者從后往前計算
?表單元素選擇器
注意：
除了input篩選選擇器凿掂，幾乎每個表單類別篩選器都對應(yīng)一個input元素的type值伴榔。大部分表單類別篩選器可以使用屬性篩選器替換庄萎。比如 $(':password') == $('[type=password]')
?表單對象屬性篩選選擇器:對所選擇的表單元素進行篩選
注意事項：
┝選擇器適用于復(fù)選框和單選框，對于下拉框元素, 使用 :selected 選擇器
