jQuery 過(guò)濾not()與filter()實(shí)例代碼
更新時(shí)間:2012年05月10日 23:02:06 作者:
下面兩種寫(xiě)法,都可以達(dá)到一樣的效果,not與filter是相反的過(guò)濾
第一種寫(xiě)法:
$(function(){
$("li").not(":even").css("color","red");
$("li").filter(":odd").css("color","red");
})
第二種寫(xiě)法:
$(function(){
$("li").filter(function(index) {
return index%2 == 0;
}).css("color","red");
$("li").not(function(index) {
return index%2 !== 0;
}).css("color","red");
})
這兩種寫(xiě)法,都可以達(dá)到一樣的效果,not與filter是相反的過(guò)濾!
jQuery過(guò)濾選擇器:not()方法介紹
jQuery(':not(selector)')
在jQuery的早期版本中,:not()篩選器只支持簡(jiǎn)單的選擇器,說(shuō)明我們傳入到:not這個(gè)filter中的selector可以任意復(fù)雜,比如:not(div a) and :not(div,a)
<p >"a">sdfsdfs</p>
<p >"b">sdfsdfs</p>
<p >"c">sdfsdfs</p>
$("p:not(.a)").css({"color":"red"})
那么除了class等于a的p元素外,其他的P的文字顏色就變成了紅色.
:not()偽類過(guò)濾選擇器,這叫法真拗口,jQuery的:not()方法是jQuery的偽類選擇器,可以過(guò)濾不需要的元素,篩選出正確的結(jié)果,簡(jiǎn)單的說(shuō)我們有如下代碼:
$("selector1:not(selector2)")
我們分析下上面的代碼,我們要獲取selector1的元素,但可能我不需要全部,怎么辦,通過(guò):not()方法來(lái)過(guò)濾,如果selector1的集合中有#1,#2,#3,#4
我們的selector2就是要過(guò)濾掉#4,上面的代碼我們最終將獲得#1,#2,#3
再舉幾個(gè)列子
$('li:not(:only-child)')//匹配所有的li,除了只有一個(gè)子元素的
$('li:not(:first-child)');//匹配除了在他父元素中是第一個(gè)子元素的LI
$("li :not(:first)").hide();//隱藏除了第一個(gè)LI外的所有LI
復(fù)制代碼 代碼如下:
$(function(){
$("li").not(":even").css("color","red");
$("li").filter(":odd").css("color","red");
})
第二種寫(xiě)法:
復(fù)制代碼 代碼如下:
$(function(){
$("li").filter(function(index) {
return index%2 == 0;
}).css("color","red");
$("li").not(function(index) {
return index%2 !== 0;
}).css("color","red");
})
這兩種寫(xiě)法,都可以達(dá)到一樣的效果,not與filter是相反的過(guò)濾!
jQuery過(guò)濾選擇器:not()方法介紹
jQuery(':not(selector)')
在jQuery的早期版本中,:not()篩選器只支持簡(jiǎn)單的選擇器,說(shuō)明我們傳入到:not這個(gè)filter中的selector可以任意復(fù)雜,比如:not(div a) and :not(div,a)
<p >"a">sdfsdfs</p>
<p >"b">sdfsdfs</p>
<p >"c">sdfsdfs</p>
$("p:not(.a)").css({"color":"red"})
那么除了class等于a的p元素外,其他的P的文字顏色就變成了紅色.
:not()偽類過(guò)濾選擇器,這叫法真拗口,jQuery的:not()方法是jQuery的偽類選擇器,可以過(guò)濾不需要的元素,篩選出正確的結(jié)果,簡(jiǎn)單的說(shuō)我們有如下代碼:
$("selector1:not(selector2)")
我們分析下上面的代碼,我們要獲取selector1的元素,但可能我不需要全部,怎么辦,通過(guò):not()方法來(lái)過(guò)濾,如果selector1的集合中有#1,#2,#3,#4
我們的selector2就是要過(guò)濾掉#4,上面的代碼我們最終將獲得#1,#2,#3
再舉幾個(gè)列子
$('li:not(:only-child)')//匹配所有的li,除了只有一個(gè)子元素的
$('li:not(:first-child)');//匹配除了在他父元素中是第一個(gè)子元素的LI
$("li :not(:first)").hide();//隱藏除了第一個(gè)LI外的所有LI
相關(guān)文章
jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效,鼠標(biāo)懸停在圖片上則停止輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12
jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能,涉及jQuery事件響應(yīng)及頁(yè)面元素遍歷、屬性修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery控制cookie過(guò)期時(shí)間的方法
這篇文章主要介紹了jQuery控制cookie過(guò)期時(shí)間的方法,涉及jQuery操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
將jQuery應(yīng)用于login頁(yè)面的問(wèn)題及解決
Login頁(yè)面應(yīng)該是迅速和簡(jiǎn)潔的,于是如果可以不產(chǎn)生回送,則不產(chǎn)生回送是最好的。2009-10-10
基于jquery實(shí)現(xiàn)的可以編輯選擇的下拉框的代碼
主要是通過(guò)CSS樣式表中clip來(lái)實(shí)現(xiàn)的。兼容IE6-8,谷歌,火狐等。2010-11-11
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析,很實(shí)用的分頁(yè)插件,感興趣的小伙伴們可以參考一下2016-04-04
jquery api參考 visualjquery 中國(guó)線路 速度快
jquery api參考 visualjquery 中國(guó)線路 速度快...2007-11-11

