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 07 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue-router传参用法详解
Jan 19 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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/07/23 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php 归并排序 数组交集
2011/05/10 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
售后专员岗位职责
2013/12/08 职场文书
美发店5.1活动方案
2014/01/24 职场文书
环保专项行动方案
2014/05/12 职场文书
离婚代理词范文
2015/05/23 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python