jquery常用的過濾方法

過濾方法,也就是函數,大多與前面介紹過的過濾器功能是一致的

1:get()將jquery物件轉為DOM物件:將第二個文字的前景色設置為紅色

$('li').get(1).style.color = 'red'

2.eq():取得指定序號的元素,注意,傳回的是jQuery物件

$('li').eq(4).css('color','red')

3.first():傳回第一個元素,不需要參數

$('li').first().css('color','red')

4.first():傳回最後一個元素,不需要參數

$('li').last().css('color','red')

5.toArray(),回傳DOM陣列,注意不是jquery物件

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = &#39;green&#39;
}

6 .find():傳回所有的子代元素,包括子,孫...

$('ul').find('li').css('color','coral')
$('ul').find('a').css('color','cyan')

7.children()傳回所有的直接子元素

$('ul').children().css('color','deeppink')
$('ul').children('p').css('color','deeppink')

8.對每個元素執行回呼函數

$('li').each(function(){
$(this).css('background-color','wheat')
$(this).css('color','black')
$(this).css('font-size','1.3em')
})

9.元素遍歷方法

//next()下一個同級元素

$('li').eq(2).next().css('color','blue')

//nextAll()後面全部的同級元素

$('li').eq(2).nextAll().css('color','blue')

//siblings():傳回所選元素的所有同級元素,除它自己

$('li').eq(2).siblings().css('color','blue')

向前遍歷

//prev():前一個同級元素

$('li').removeAttr('style')
$('li').eq(6).prev().css('color','coral')

//prevAll():您一定猜到了,對,是前面的所有同級元素

$('li').eq(6).prevAll().css('color','coral')

10. add(selector) ,將元素加入所選的集合中

//先去掉所有元素上面的自訂樣式,將元素打回原型,素顏模樣

$('*').removeAttr('style')

//將所有li文字設置為紅色,你會發現有一個p沒有選上,這也正常

$('li').css('color','red')

//那麼如何才能選上p元素呢,只有加大選區,把p元素放進這個選區中就可以了

//使用add()方法就可以做到

$('li').add('p').css('color','red')

11. filter()從結果傳回符合條件的元素

//只回傳第6個元素

$('li').filter(':eq(5)').css('background-color','lightgreen')

12. not()與filter()功能正好相反,去掉滿足條件的元素

$('li').not(':eq(5)').css('background-color','lightgreen')

13. slice(start, end),傳回指定範圍的元素

$('*').removeAttr('style')

//包含起始位置,不包含結束位置,回傳的結果數量是5-2=3

$('li').slice(2,5).css('background-color','lightgreen')

//取得前4個元素

$('li').slice(0,4).css('background-color','lightgreen')

//省略第二個參數,預設從目前開始直到結尾

$('li').slice(4).css('background-color','lightgreen')

以上是jquery常用的過濾方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！