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

時間 2019-11-07

原文原文鏈接

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

this的相關問題

this指代的是什麼this

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

在jQuery中，this能夠用於單個對象，也能夠用於多個對象。code

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

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

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

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

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

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

jQuery選擇器

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

先看幾個簡單的例子：索引

$('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、二、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中的選擇器進行總結。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。