標籤：
初識jquery在學習jquery之前，就有看過一些相關的視頻，才知道它是可以寫很少的代碼就可以完成很多事的。記得第一寫輪播圖的時候，首先就百度了篇輪播圖的實現，當時還不知道自己百度的其實不是原生的JS代碼，而是用jquery完成的，當時也是初識JS，然後就一臉懵逼的看了視頻，結果好像還看懂了，於是跟著他的代碼像做著世界上最偉大的事一樣的敲著代碼，編譯的時候卻沒反應，經過一些瞭解後才發現這是用傳說中的jquery完成的。儘管第一次接觸jquery不是為接觸而接觸的，但是也意識到了他強大的功能。
真正接觸jquery：
jquery是一種輕量級的javascript庫不僅相容了css3，還相容各種瀏覽器。當我們再做一個項目時，需要做一些底層的東西，就是說相容，像一些方法，網頁事件，動畫，DOM操作、Ajax封裝等，他可以在最底層為事件做相容，除此外，jquery還具有強大的選取器。
講真，jquery強大的選取器真的把我給嚇到了，雖說“兵不在多而在於精“，但是jquery”多多益善“的各種選取器給我們操作頁面元素帶來了大大的方便，這裡我就先講講我對【id選取器、類別選取器、元素選取器、全選取器、層級選取器、基本篩選選取器、內容篩選選取器、可見度篩選選取器】的理解即總結。
頁面的任何操作都需要節點的支撐，開發人員如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選取器協助開發人員達到這一目的，讓開發人員可以更少的處理複雜選擇過程與效能最佳化，更多專註商務邏輯的編寫。
【id選取器】
一個用來尋找的ID的選取器，即元素的id屬性。
$("#id");
id選取器也是基本的選取器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的擷取。原生文法的支援總是非常高效的，所以在操作DOM的擷取上，如果能採用id的話盡然考慮用這個選取器
注意：id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的。
【類別選取器】
通過class樣式類名來擷取節點。
$(".class");
<body> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>選中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery選中</p> </div> <script type="text/javascript"> //通過原生方法處理 //樣式是可以多選的，所以得到的是一個合集 //需要通過迴圈給合集中每一個元素修改樣式 var divs = document.getElementsByClassName(‘aaron‘); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通過jQuery直接傳入class //class選取器可以選擇多個元素 $(".class").css("border", "3px groove red");//groove，展現出來的邊框內測是凹進去的，有點像畫框邊緣。 </script> </body>
jQuery除了選擇上的簡單，而且沒有再次使用迴圈處理，不難想到$(".imooc").css()方法內部肯定是帶了一個隱式的迴圈處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，還增加很多關聯的便利操作。
【元素選取器】
根據給定（html）標記名稱選擇所有的元素，搜尋指定元素標籤名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支援。如：$("p");（$("element");）
【全選取器】
萬用字元*意味著給所有的元素設定預設的邊距。jQuery中我們也可以通過傳遞*選取器來選中文檔頁面中的元素，拋開jQuery，如果要擷取文檔中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以擷取到。但是有時候我們選喲考慮相容性的我問題。他的描述：$("*");
【層級選取器】
文檔中的所有的節點之間都是有這樣或者那樣的關係。我們可以把節點之間的關係可以用傳統的家族關係來描述，可以把文檔樹當作一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。
選取器中的層級選取器就是用來處理這種關係。（子項目 後代元素 兄弟元素 相鄰元素）層級選取器有以下幾種表示：
（匹配過濾選取器的用法：
<script type="text/javascript"> //:not 選擇所有元素去除不匹配給定的選取器的元素 //選中所有緊接著沒有checked屬性的input元素後的p元素，賦予顏色 $("input:not(:checked)+p").css("background-color", "#CD00CD");</script>
）
選取器之間的相似與不同：
1、層級選取器都有一個參考節點
2、後代選取器包含子選取器的選擇的內容
3、一般兄弟選取器包含相鄰兄弟選擇的內容
4、相鄰兄弟選取器和一般兄弟選取器所選擇到的元素，必須在同一個父元素下
【基本篩選選取器】
為了方便能直接找到所需的DOM節點元素，jQuery提供了一系列的篩選選取器用來更快捷的找到所需的DOM元素。
篩選選取器的用法與CSS中的虛擬元素相似，選取器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：
【內容篩選選取器】
基本篩選選取器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選取器。幾種方式描述：
【可見度篩選選取器】
元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴充了可見度篩選選取器:visible與:hidden。描述：
如果元素中佔據文檔中一定的空間,元素被認為是可見的。
我們有幾種方式可以隱藏一個元素：
1寬度和高度都顯式設定為0。2、CSS visibility的值是hidden,display的值是none。3type="hidden"的表單元素。
【總結】
這裡這是jquery的部分選取器，但是看起來都很多了，對於記憶性的東西本來就很枯燥，除了機械記憶外，還應該在不斷地練習中掌握它的原理及用法，還有遇到一些簡稱的代碼，最好去查一下他的全稱，記憶會更牢固。例如：基本篩選選取器中，eq全稱是equal(意思是“等於”)；gt全稱是greater than(意思是大於)；lt全稱是less than(意思是小於)。
手已經申請休假了~~~~~~
初識JQuery（1）-選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
