jQuery學習筆記(二):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元素

---------------->此文轉發!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM