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中Math对象使用说明
Jan 16 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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产生随机字符串函数
2006/12/06 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
js 通用订单代码
2013/12/23 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
浅谈python中set使用
2016/06/30 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
协议书怎么写
2014/04/21 职场文书
经典演讲稿汇总
2014/05/19 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
MySQL基础(二)
2021/04/05 MySQL