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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
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
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
建筑工程技术专业求职信
2014/07/16 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
保护地球的宣传语
2015/07/13 职场文书
装修公司管理制度
2015/08/05 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Python 语言实现六大查找算法
2021/06/30 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL