jQuery學習筆記（二）：this相關問題及選擇器

上一節的遺留問題，關於this的相關問題，先來解決一下。 this的相關問題 this指代的是什麼這個應該是比較好理解的，this就是指代當前操作的DOM對象。在jQuery中，this可以用於單個對象，也可以用於多個對象。 jQuery中的this和$(this)有什麼區別 jQuery中的t ...

上一節的遺留問題，關於this的相關問題，先來解決一下。

this的相關問題

this指代的是什麼

這個應該是比較好理解的，this就是指代當前操作的DOM對象。

在jQuery中，this可以用於單個對象，也可以用於多個對象。

$('btn').click(function(){
    alert(this.innerHTML);  // 單個對象，this指代當前id為btn的DOM對象
});

$('div').each(function(index){
    alert(this.innerHTML);  // 多個對象，this指代當前迴圈中索引為index的DOM對象 
});

jQuery中的this和$(this)有什麼區別

jQuery中的this和$(this)有什麼區別

$("div").each(function(index){
     alert($(this));  // [object Object] jQuery對象
     alert(this);    // [object HTMLDivElement] DOM對象
});

可以觀察到，this指代的是DOM對象，$(this)指代的是包裝當前DOM對象的jQuery對象。

jQuery選擇器

上一節也分析到，jQuery的最大貢獻之一就是方便的獲取DOM元素，並對DOM元素進行操作。

先看幾個簡單的例子：

$('div');  // 選擇所有標簽為div的DOM元素

$('#info');  // 選擇id為info的DOM元素

$('div>p');  // 選擇所有div標簽下的子集標簽為p的DOM元素

$('input[placeholder*="info"]');  // 獲取所有input標簽中，屬性placeholder值中包含info欄位的DOM元素

$('p:odd');  // 獲取所有標簽為p的元素壓入棧中，選擇其中索引值為奇數的DOM元素

可以看到，有多種選擇方式讓你獲取你所需要的對象，這些先作為一個引子，讓我們對jQuery的選擇器有一個大致上的印象。現在以開發者的角度來思考：如何選擇需要的DOM元素。

1. 首先能想到的是，獲取指定id的元素，對其進行操作。

$('#info');  // 獲取id為info的元素

2. 既然可以獲取指定id的元素，那麼理所應當的，也可以獲取指定class的元素。

$('.info');  // 獲取class為info的元素

3. 有時會遇到一系列具有相同className的元素，而這些元素之間沒有辦法互相區分彼此。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
    　　<div class='info'>0</div>
    　　<div class='info'>1</div>
    　　<div class='info'>2</div>
    　　<div class='info'>3</div>
    　　<div class='info'>4</div>
    </body>
</html>

這時，如果我想獲取這一系列元素中的第一個：

$('.info:first').val();  // 獲取class為info的一系列元素中的第一個元素的值，即0

我想獲取這一系列元素中的最後一個：

$('.info:last').val();  // 獲取class為info的一系列元素中的最後一個元素的值，即4

那獲取任意一個元素呢？

$('.info:eq(2)').val();  // 獲取class為info的一系列元素中索引為2的元素的值，即2（索引從0開始）

看來選擇單個元素還是很方便的，那要是選擇符合某些條件的複數個元素呢？比如選擇這一組元素的後三個元素：

$('.info:gt(1)');  // 獲取class為info的一系列元素中索引大於1的對象，即2,3,4
$('.info:lt(2)');  // 獲取class為info的一系列元素中索引小於2的對象，即0,1

選擇系列元素中索引為奇數的元素（好像很少這麼做，但jQuery也為我們提供了選擇器）

$('.info:odd');  // 獲取class為info的一系列元素中索引為奇數（1,3）的對象，即1,3
$('.info:even');  // 獲取class為info的一系列元素中索引為偶數（0,2,4）的對象，即0、2、4

4. 比如現在有一系列鏈接元素，但是它們並沒有唯一id標識，也沒有className區分，各個元素之間僅有href是不一致的，該如何選擇需要的元素呢？

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div>
        　　<a>0</a>
        　　<a href='/info'>1</a>
        　　<a href='/infomation'>2</a>
        　　<a href='/test'>3</a>
        </div>
    </body>
</html>

比如我想選擇帶有href屬性的a標簽元素：

$('a[href]');  // 選擇帶有href屬性的a標簽，即1,2,3

選擇href屬性值為info的a標簽元素：

$('a[href="info"]');  // 選擇href屬性為info的a標簽，即1

選擇href屬相值已info開頭的a標簽元素：

$('a[href^="info"]');  // 選擇帶有href屬性值已info開頭的a標簽，即1,2

選擇href屬性值已tion結尾的a標簽元素：

$('a[href$="tion"]');  // 選擇帶有href屬性值已tion結尾的a標簽，即2

選擇href屬性值中有fo欄位的a標簽元素：

$('a[href*="fo"]');  // 選擇帶有href屬性值中包含fo的a標簽，即1,2

當然，也可以進行反選，選擇href屬性值中不包含info的a標簽元素：

$('a[href!="info"]');  // 選擇帶有href屬性值中不包含info的a標簽，即3

5. 還有會遇到一些情況，要求我們根據DOM元素的內容來選擇合適的元素。

$('div:contains("info")'); // 選擇div標簽中內容包含info欄位的元素

6. 現在我們已經通過指定id、class或是指定索引值、屬性值來確定元素，讓我們換個角度，有沒有可能從元素之間的關係來確定元素呢？

先統一名稱：

同級元素：即當前元素處於同一層級。

<div>
    <p>0</p>  // 當前兩個標簽為p的元素處於同一層級，屬於同級元素
    <p>1</p>
</div>

父級元素：即當前元素的直屬上層元素。

祖先元素：即當前元素的所有上層元素。

子級元素：即當前元素的直屬子層元素。

後代元素：即當前元素的所有子層元素。

<div id='ancestor'>
    <div id='father'>  // 標簽為p的元素的父級元素是id為father的元素，祖先元素為id為father和ancestor的元素
          <p><span>0</span></p>  // id為father的元素的子級元素是標簽為p的元素，後代元素為標簽p與span的元素  
          <p>1</p>
    </div>
</div>

統一好關係名稱之後，再探討元素之間的關係就不會感覺混亂。

現在有如下代碼：

<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="firstletter" />
　　　　 <input name="secondletter" />
    </fieldset>
    <input name="none" /> 
</form>

選擇標簽為form的所有子級input元素：

$('form>input'); // 選擇標簽為from的元素下的所有標簽為input的子級元素，即name=“name”，name=“none”的元素

選擇標簽為form的所有的後代input元素：

$('form input'); // 選擇標簽為from的元素下的所有標簽為input的後代元素，即name=“name”，name=“none”，name=“firstletter”，name=“secondletter”的元素

也可以選擇符合條件的同級元素（同級元素中的第一個）：

$('label+input'); // 選擇標簽為label的同級元素中，標簽為input的元素中的第一個，即name=“name”，name=“firstletter”的元素

也可以選擇所有符合條件的同級元素：

$('label~input'); // 選擇標簽為label的同級元素中，所有標簽為input的元素，即name=“name”，name=“firstletter”，name=“secondletter”，name=“none”的元素

選擇後代元素中包含選定元素的元素：

<div>
    <p><span>Hello</span></p>
</div>
<div>Hello again!</div>

$('div:has(span)') // 選擇所有後代元素中包含span元素的div元素

以上便是暫時能夠想到的獲取DOM對象的方法，通過閱讀jQuery手冊，發現jQuery也很好的將這些考慮了進去。在下一節中，可以針對jQuery中的選擇器進行總結。