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 相关文章推荐
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
element中的$confirm的使用
Apr 26 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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数据缓存技术
2007/02/14 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
如何让CI框架支持service层
2014/10/29 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python Flask-web表单使用详解
2017/11/18 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
优秀中专生推荐信
2013/11/17 职场文书
庆元旦广播稿
2014/02/10 职场文书
善意的谎言事例
2014/02/15 职场文书
学生会部长竞聘书
2014/03/31 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers