jquery 常用選擇器 回顧 ajax() parent() parents() children() siblings() find() eq()
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()