過濾方法,也就是函數,大多與前面介紹過的過濾器功能是一致的
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 = 'green'
}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中文網其他相關文章！
