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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
图象函数中的中文显示
2006/10/09 PHP
改进的IP计数器
2006/10/09 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
Python解析nginx日志文件
2015/05/11 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python七夕浪漫表白源码
2019/04/05 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
离婚上诉状范文
2015/05/23 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python