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开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
jquery replace方法去空格
May 08 jQuery
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 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时间戳使用实例代码
2008/06/07 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
导航工程专业自荐信
2014/09/02 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
一条 SQL 语句执行过程
2022/03/17 MySQL
Python实现信息管理系统
2022/06/05 Python