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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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与已存在的Java应用程序集成
2006/10/09 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
详解PHP PDO简单教程
2019/05/28 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
Angularjs 基础入门
2014/12/26 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
详解Django的CSRF认证实现
2018/10/09 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
给物业的表扬信
2014/01/21 职场文书
单位绩效考核方案
2014/05/11 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
环境保护建议书
2014/08/26 职场文书
先进单位事迹材料
2014/12/25 职场文书
小学校长开学致辞
2015/07/29 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS