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小问题说明
Sep 26 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue 翻页组件vue-flip-page效果
Feb 05 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php 文件缓存函数
2011/10/08 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python字符串替换的2种方法
2014/11/30 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
10个顶级Python实用库推荐
2021/03/04 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
《会走路的树》教后反思
2014/04/19 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
学前教育见习总结
2015/06/23 职场文书
学习雷锋主题班会
2015/08/14 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫