jQuery 过滤not()与filter()实例代码

213 阅读 0 评论 141 点赞

我是靠谱客的博主唠叨大山，最近开发中收集的这篇文章主要介绍jQuery 过滤not()与filter()实例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一种写法:

复制代码代码如下:

 
$(function(){ 
$("li").not(":even").css("color","red"); 
$("li").filter(":odd").css("color","red"); 

}) 

第二种写法：

复制代码代码如下:

 
$(function(){ 
$("li").filter(function(index) { 
return index%2 == 0; 
}).css("color","red"); 

$("li").not(function(index) { 
return index%2 !== 0; 
}).css("color","red"); 
}) 

这两种写法，都可以达到一样的效果，not与filter是相反的过滤！

jQuery过滤选择器:not()方法介绍

jQuery(':not(selector)')
在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a)

"a">sdfsdfs
"b">sdfsdfs
"c">sdfsdfs

$("p:not(.a)").css({"color":"red"})
那么除了class等于a的p元素外,其他的P的文字颜色就变成了红色.
:not()伪类过滤选择器,这叫法真拗口,jQuery的:not()方法是jQuery的伪类选择器,可以过滤不需要的元素,筛选出正确的结果,简单的说我们有如下代码:

$("selector1:not(selector2)")
我们分析下上面的代码,我们要获取selector1的元素,但可能我不需要全部,怎么办,通过:not()方法来过滤,如果selector1的集合中有#1,#2,#3,#4
我们的selector2就是要过滤掉#4，上面的代码我们最终将获得#1,#2,#3
再举几个列子

$('li:not(:only-child)')//匹配所有的li,除了只有一个子元素的
$('li:not(:first-child)');//匹配除了在他父元素中是第一个子元素的LI
$("li :not(:first)").hide();//隐藏除了第一个LI外的所有LI