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


Posted in Javascript onMay 10, 2012

第一种写法:

$(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)

<p >"a">sdfsdfs</p>
<p >"b">sdfsdfs</p>
<p >"c">sdfsdfs</p>

$("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

Javascript 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
js实现数组转换成json
Jun 26 Javascript
去除html代码里面的script正则方法
May 19 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
Node.js使用Angular简单示例
May 11 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
手写实现JS中的new
Nov 07 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 #Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 #Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 #Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
jQuery 图片切换插件(代码比较少)
May 07 #Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 #Javascript
You might like
php绘制一条弧线的方法
2015/01/24 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
原生js实现轮播图
2017/02/27 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python创建模块及模块导入的方法
2015/05/27 Python
不可错过的十本Python好书
2017/07/06 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
自荐信的两点禁忌
2013/10/30 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
读群众路线心得体会
2014/03/07 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
干部培训工作总结2015
2015/05/25 职场文书
员工规章制度范本
2015/08/07 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android