1. 程式人生 > >jquery 常用選擇器 回顧 ajax() parent() parents() children() siblings() find() eq()

jquery 常用選擇器 回顧 ajax() parent() parents() children() siblings() find() eq()

script 異步操作 html ava 對象 asc 異步 段落 strong

1. $.ajax()

ajax 本身是異步操作,當需要將 異步 改為 同步時:

async: false

2.parent() 父級元素 和 parents() 祖先元素 的區別

parent是指取得一個包含著所有匹配元素的唯一父元素的元素集合。
parents則是取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過一個可選的表達式進行篩選。

例如:

<div id=‘div1‘>
  <div id=‘div2‘>
	  <p></p>
  </div>
  <div id=‘div3‘ class=‘a‘>
	  <p></p>
  </div>
  <div id=‘div4‘>
	  <p></p>
  </div>
</div>

$(‘p‘).parent() 取到的是div2,div3,div4
$(‘p‘).parent(‘.a‘) 取到的是div3
$(‘p‘).parent().parent() 取到的是div1,這點比較奇特;不過Jquery對象本身的特點決定了這是可行的。
$(‘p‘).parents() 取到的是div1,div2,div3,div4
$(‘p‘).parents(‘.a‘) 取到的是div3

3.children() 子級元素

children(":eq()")children().eq()

$(‘ul‘).children(":eq(0)").css(‘color‘ , ‘red‘);
與
$(‘ul‘).children().eq(0).css(‘color‘ , ‘red‘);
相同

3.siblings() 同胞元素

$this.parent().siblings().eq(1).text();
當前操作元素父元素的第一個同胞元素的內容
$("給定元素").siblings(".selected")

其作用是篩選給定的同胞同類元素(不包括給定元素本身)

例如:

//顯示選項卡對應的內容並隱藏未被選中的內容
$("#content li:eq(" + index + ")").show().siblings().hide();

4.find() 查找

找到的是 所有的後代元素,即是子孫元素

$(‘div‘).find(‘ul‘).eq(2).css(‘color‘ , ‘red‘);

小結:

find()查找的是後代,子代,子子代,而且參數必須填寫
children()本身查找的就是子代,裏面的參數選填

5.eq()

.eq():eq() 的區別

$("p").eq(1).css("color","red");
與
$("p:eq(1)").css("color","red");
相同

6.has()

例如:

$("li").has("span").css("color","green");

匹配含有span元素的li元素,並將其中的字體顏色設置為綠色。

7.filter()

.filter() 方法 過濾的是集合本身

filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素。

例如:

$(‘p‘).find(‘.tag‘);  
$(‘p‘).filter(‘.tag‘);  

(1)第一行語句是在p標簽下面的子元素去找是否有類為tag的元素.返回的元素若不為空一定是p標簽下面的子元素
(2)第二行語句是找p標簽中是否有tag類的元素.返回的元素一定是在$(‘p‘)這些P標簽裏面(即 找到所有 類名為tag的 P 標簽

8.next()

next() 獲得匹配元素集合中每個元素緊鄰的同胞元素。如果提供選擇器,則取回匹配該選擇器的下一個同胞元素。

例如:

$("p").next(".selected").css("background", "yellow");

查找每個段落的下一個同胞元素,僅選中類名為 "selected" 的段落

.

jquery 常用選擇器 回顧 ajax() parent() parents() children() siblings() find() eq()