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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
vue实现数字滚动效果
Jun 29 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
一个程序下载的管理程序(二)
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
Three.js加载外部模型的教程详解
2017/11/10 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
浅析Python中的join()方法的使用
2015/05/19 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python 字典操作提取key,value的方法
2019/06/26 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
计算机网络专业个人的自我评价
2013/10/17 职场文书
建筑工地宣传标语
2014/06/18 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
安全在我心中演讲稿
2014/09/01 职场文书