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聚焦于第一个字段的代码
Oct 15 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
vue特效之翻牌动画
Apr 20 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
PHP脚本的10个技巧(5)
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
js实现微信聊天效果
2020/08/09 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python实现月食效果实例代码
2019/06/18 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
如何一键升级Python所有包
2020/11/05 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
粗加工管理制度
2014/02/04 职场文书
致接力运动员广播稿
2014/02/17 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
经典祝酒词大全
2015/08/12 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技