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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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程序的方法
2009/03/09 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
js实现鼠标拖曳效果
2020/12/30 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
2014信息公开实施方案
2014/02/22 职场文书
空气的环保标语
2014/06/12 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript