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+JSon 无刷新分页实现代码
Apr 01 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JQuery球队选择实例
May 18 Javascript
javascript的BOM
May 03 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP7 windows支持
2021/03/09 PHP
javascript cookies操作集合
2010/04/12 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python读写json文件的简单实现
2017/04/11 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python装饰器练习题及答案
2019/11/01 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
挂靠协议书范本
2014/04/22 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
外出听课学习心得体会
2016/01/15 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Python OpenCV快速入门教程
2021/04/17 Python
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL