jquery:小知識；

標籤：技術   選取器   多個   inf   第一個   set   for   上層   方便   

上一節的遺留問題，關於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元素

---------------->此文轉寄！

jquery:小知識；