前端基礎-jQuery的內容之選擇器

閱讀目錄

1. ID選擇器
2. 類選擇器
3. 元素選擇器
4. 通配符選擇器
5. 層級選擇器
6. 基本篩選器
7. 內容篩選器
8. 可見性篩選器
9. 屬性篩選器
10. 子元素篩選器
11. 表單元素篩選器
12. 表單對象篩選器
13. this和$(this)

1、jQuery選擇器之id選擇器

頁面的任何操做都須要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。

jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者能夠更少的處理複雜選擇過程與性能優化，更多專一業務邏輯的編寫。

jQuery幾乎支持主流的css1~css3選擇器的寫法，咱們從最簡單的也是最經常使用的開始學起

id選擇器：一個用來查找的ID，即元素的id屬性

$( "#id" )

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。

原生語法的支持老是很是高效的，因此在操做DOM的獲取上，若是能採用id的話盡然考慮用這個選擇器

值得注意：

id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。
但這種行爲不該該發生;有超過一個元素的頁面使用相同的id是無效的

2、jQuery選擇器之類選擇器

類選擇器，顧名思義，經過class樣式類名來獲取節點

描述：

$( ".class" )

類選擇器，相對id選擇器來講，效率相對會低一點，可是優點就是能夠多選

配合使用：

$("div.c1")  // 找到有c1 class類的div標籤

使用jQuery選擇節點，不只僅只是選擇上的簡單，同時還增長不少關聯的便利操做，後續咱們還會慢慢的學到其餘的優點。

 

3、jQuery選擇器之元素選擇器

元素選擇器：根據給定（html）標記名稱選擇全部的元素

描述：

$( "element" )

搜索指定元素標籤名的全部節點，這個是一個合集的操做。一樣的也有原生方法getElementsByTagName()函數支持

右邊編輯器代碼所示：

第一組：經過getElementsByTagName方法獲得頁面全部的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集對象，經過循環給每個合集中的<div>元素賦予新的boder樣式

第二組：一樣的效果，$("p")選取全部的<p>元素，經過css方法直接賦予樣式

 

4、jQuery選擇器之通配選擇器（*選擇器）

在CSS中，常常會在第一行寫下這樣一段樣式

* {padding: 0; margin: 0;}

通配符*意味着給全部的元素設置默認的邊距。jQuery中咱們也能夠經過傳遞*選擇器來選中文檔頁面中的元素

描述：

$( "*" )

拋開jQuery，若是要獲取文檔中全部的元素，經過document.getElementsByTagName()中傳遞"*"一樣能夠獲取到

不難發現，id、class、tag均可以經過原生的方法獲取到對應的節點，可是咱們還須要考慮一個兼容性的問題，我這裏順便說起一下，好比:

1. IE會將註釋節點實現爲元素，因此在IE中調用getElementsByTagName裏面會包含註釋節點，這個一般是不該該的
2. getElementById的參數在IE8及較低的版本不區分大小寫
3. IE7及較低的版本中，表單元素中，若是表單A的name屬性名用了另外一個元素B的ID名而且A在B以前，那麼getElementById會選中A
4. IE8及較低的版本，瀏覽器不支持getElementsByClassName

5、jQuery選擇器之層級選擇器

文檔中的全部的節點之間都是有這樣或者那樣的關係。咱們能夠把節點之間的關係能夠用傳統的家族關係來描述，

能夠把文檔樹看成一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。

選擇器中的層級選擇器就是用來處理這種關係

子元素 後代元素 兄弟元素 相鄰元素

經過一個列表，對比層級選擇器的區別

 仔細觀察層級選擇器之間仍是有不少類似與不一樣點

1. 層級選擇器都有一個參考節點
2. 後代選擇器包含子選擇器的選擇的內容
3. 通常兄弟選擇器包含相鄰兄弟選擇的內容
4. 相鄰兄弟選擇器和通常兄弟選擇器所選擇到的元素，必須在同一個父元素下

6、jQuery選擇器之基本篩選器

不少時候咱們不能直接經過基本選擇器與層級選擇器找到咱們想要的元素，爲此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。

篩選器不少都不是CSS的規範，而是jQuery本身爲了開發者的便利延展出來的篩選器

篩選器的用法與CSS中的僞元素類似，選擇器用冒號「：」開頭，經過一個列表，看看基本篩選器的描述：

注意事項：

1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據以前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引
2. gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

7、jQuery選擇器以內容篩選器

基本篩選器針對的都是元素DOM節點，若是咱們要經過內容來過濾，jQuery也提供了一組內容篩選器，固然其規則也會體如今它所包含的子元素或者文本內容上

內容過濾器描述以下表：

注意事項：

1. :contains與:has都有查找的意思，可是contains查找包含「指定文本」的元素，has查找包含「指定元素」的元素
2. 若是:contains匹配的文本包含在元素的子元素中，一樣認爲是符合條件的。
3. :parent與:empty是相反的，二者所涉及的子元素，包括文本節點

8、jQuery選擇器之可見性篩選器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden

描述以下：

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，可是元素可見性依賴於適用的樣式

:hidden選擇器，不只僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

咱們有幾種方式能夠隱藏一個元素：

1. CSS display的值是none。
2. type="hidden"的表單元素。
3. 寬度和高度都顯式設置爲0。
4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

若是元素中佔據文檔中必定的空間,元素被認爲是可見的。 可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認爲是可見的，由於他們仍然佔用空間佈局。

不在文檔中的元素是被認爲是不可見的，若是當他們被插入到文檔中，jQuery沒有辦法知道他們是不是可見的，由於元素可見性依賴於適用的樣式

 

9、jQuery選擇器之屬性篩選器

屬性選擇器讓你能夠基於屬性來定位一個元素。能夠只指定該元素的某個屬性，這樣全部使用該屬性而無論它的值，這個元素都將被定位，

也能夠更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展現它們的威力的地方。

描述以下：

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫咱們定位不一樣類型的元素，特別是表單form元素的操做，好比說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件

10、jQuery選擇器之子元素篩選器

子元素篩選器不常使用，其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選器描述表：

注意事項：

1. :first只匹配一個單獨的元素，可是:first-child選擇器能夠匹配多個：即爲每一個父級元素匹配第一個子元素。這至關於:nth-child(1)
2. :last 只匹配一個單獨的元素， :last-child 選擇器能夠匹配多個元素：即，爲每一個父級元素匹配最後一個子元素
3. 若是子元素只有一個的話，:first-child與:last-child是同一個
4.  :only-child匹配某個元素是父元素中惟一的子元素，就是說當前子元素是父元素中惟一的元素，則匹配
5. jQuery實現:nth-child(n)是嚴格來自CSS規範，因此n值是「索引」，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
6. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前日後計算，後者從後往前計算

11、jQuery選擇器之表單元素器

不管是提交仍是傳遞數據，表單元素在動態交互頁面的做用是很是重要的。jQuery中專門加入了表單選擇器，從而可以極其方便地獲取到某個類型的表單元素

表單選擇器的具體方法描述：

注意事項：

除了input篩選器，幾乎每一個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可使用屬性篩選器替換。好比 $(':password') == $('[type=password]')

 

12、jQuery選擇器之表單對象屬性篩選器

除了表單元素選擇器外，表單對象屬性篩選器也是專門針對表單元素的選擇器，能夠附加在其餘選擇器的後面，主要功能是對所選擇的表單元素進行篩選

表單篩選選擇器的描述：

注意事項：

1. 選擇器適用於複選框和單選框，對於下拉框元素, 使用 :selected 選擇器
2. 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，因此保險起見換用選擇器input:checked，確保只會選取<input>元素

十3、jQuery選擇器之特殊選擇器this

相信不少剛接觸jQuery的人，不少都會對$(this)和this的區別模糊不清，那麼這二者有什麼區別呢？

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的全部者

下面例子中，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var imooc = {
    name:"多多帥",
    getName:function(){
        //this,就是imooc對象
        return this.name;
    }
}
imooc.getName(); //多多帥

固然在JavaScript中this是動態的，也就是說這個上下文對象都是能夠被動態改變的(能夠經過call,apply等方法)，具體的你們能夠查閱相關資料

一樣的在DOM中this就是指向了這個html元素對象，由於this就是DOM元素自己的一個引用

假如給頁面一個P元素綁定一個事件:

p.addEventListener('click',function(){
    //this === p
    //如下二者的修改都是等價的
    this.style.color = "red";
    p.style.color = "red";
},false);

經過addEventListener綁定的事件回調中，this指向的是當前的dom對象，因此再次修改這樣對象的樣式，只須要經過this獲取到引用便可

this.style.color = "red"

可是這樣的操做其實仍是很不方便的，這裏面就要涉及一大堆的樣式兼容，若是經過jQuery處理就會簡單多了，咱們只須要把this加工成jQuery對象

換成jQuery的作法：

$('p').click(function(){
    //把p元素轉化成jQuery的對象
    var $this= $(this) 
    $this.css('color','red')
})

經過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，咱們就能夠用jQuery提供的快捷方法直接處理樣式了

整體：

this，表示當前的上下文對象是一個html對象，能夠調用html對象所擁有的屬性和方法。 $(this),表明的上下文對象是一個jquery的上下文對象，能夠調用jQuery的方法和屬性值。
在python語言中，this就是面向對象的self，對象本身，能夠調用所擁有的屬性和方法

1).基本 ·#id 根據給定的ID匹配一個元素。例如：$("#id") ·element 根據給定的元素名匹配全部元素。例如：$("div") ·.class 根據給定的類匹配元素。例如：$(".style1"); ·* 匹配全部元素。例如：$("*") ·selector1,selector2,selectorN 將每個選擇器匹配到的元素合併後一塊兒返回。例如：$("#id,div,.style1") 2).表單 ·:button 匹配全部按鈕。例如：$(":button") ·:checkbox 匹配全部複選框。例如：$(":checkbox") ·:file 匹配全部文件域。例如：$(":File") ·:hidden 匹配全部不可見元素，或者type爲hidden的元素。例如：$("input:hidden") ·:image 匹配全部圖像域。例如：$(":image") ·:input 匹配全部 input, textarea, select 和 button 元素。例如：$(":input") ·:password 匹配全部密碼框。例如：$(":password") ·:radio 匹配全部單選按鈕。例如：$(":radio") ·:reset 匹配全部重置按鈕。例如：$(":reset") ·:submit 匹配全部提交按鈕。例如：$(":submit") ·:text 匹配全部的單行文本框。例如：$(":text") ·:header 匹配如 h1, h2, h3之類的標題元素。例如：$(":header").css("background", "#EEE"); 2.篩選條件 1).屬性篩選 ·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'") ·[attribute!=value] 匹配全部含有指定的屬性，但屬性不等於特定值的元素。例如：$(input[name!='man'); ·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如：$("input[name$='man']") ·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如：$("input[name='man']"); ·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]") ·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如：$("input[name^='man']") ·[selector1][selector2][selectorN] 同時知足多個條件。例如：$("input[id][name$='man']") ·:hidden 匹配全部的不可見元素。例如：$("tr:hidden") ·:visible 匹配全部的可見元素。例如：$("tr:visible") ·:checked 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option)。例如：$("input:checked") ·:disabled 匹配全部不可用元素。例如：$("input:disabled") ·:enabled 匹配全部可用元素。例如：$("input:enabled") ·:selected 匹配全部選中的option元素。例如：$("select option:selected") 2).內容篩選 ·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')") ·:empty 匹配全部不包含子元素或者文本的空元素。例如：$("td:empty") ·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)"); ·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent") 3).層級篩選 ·ancestor descendant 在給定的祖先元素下匹配全部的後代元素。例如：$("form input") ·parent > child 在給定的父元素下匹配全部的子元素。例如：$("form > input") ·prev + next 匹配全部緊接在 prev 元素後的 next 元素。例如：$("label + input") ·prev ~ siblings 匹配 prev 元素以後的全部 siblings 元素。例如：$("form ~ input") ·:first-child 匹配第一個子元素。例如：$("ul li:first-child") ·:last-child 匹配最後一個子元素。例如：$("ul li:last-child") ·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 若是某個元素是父元素中惟一的子元素，那將會被匹配。例如：$("ul li:only-child") 4).方法篩選 ·:animated 匹配全部正在執行動畫效果的元素。例如：$("div:animated"); ·:eq(index) 匹配一個給定索引值的元素。例如：$("tr:eq(1)") ·:even 匹配全部索引值爲偶數的元素，從 0 開始計數。例如：$("tr:even") ·:first 匹配找到的第一個元素。例如：$("tr:first") ·:gt(index) 匹配全部大於給定索引值的元素，從 0 開始計數。例如：$("tr:gt(0)") ·:last 匹配找到的最後一個元素。例如：$("tr:last") ·:lt(index) 匹配全部小於給定索引值的元素。例如：$("tr:lt(2)") ·:not(selector) 去除全部與給定選擇器匹配的元素。例如：$("input:not(:checked)") ·:odd 匹配全部索引值爲奇數的元素，從 0 開始計數。例如：$("tr:odd")

文字版的總結