jQuery选择器之基本过滤选择器用法实例分析


Posted in jQuery onFebruary 19, 2019

本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考,具体如下:

前面一篇介绍了层次选择器,今天我们学习一下jQuery的另一种选择器:基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西,也就是说过滤后留下的都是自己需要的。jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性过滤、内容过滤、子元素过滤、表单对象属性过滤、可见性过滤等。今天我们主要学习一下其中的“基本过滤选择器”。

一、:first

选择器::first
描述:获取匹配的第一个元素
返回值:单个元素

示例:

$("E:first")//E是DOM元素集合,:first是过滤条件

二、:last

选择器::last
描述:获取匹配的最后一个元素
返回值:单个元素

示例:

$("E:last")//E是DOM元素集合,:last是过滤条件

三、:not(selector)

选择器::not(selector)
描述:去除所有与给定选择器selector匹配的元素。
返回值:元素集合

示例:

$("div.aaa:not(#two)")//div.aaa是DOM元素集合,:not(#two)是过滤条件

四、:even

选择器::even
描述:匹配所有索引值为偶数的元素,索引值从 0 开始计数。
返回值:元素集合

示例:

$("tr.item:even")//tr:item是DOM元素集合,:even是过滤条件

五、:odd

选择器::odd
描述:匹配所有索引值为奇数的元素,索引值从 0 开始计数。
返回值:元素集合

示例:

$("tr.item:odd")//tr.item是DOM元素集合,:odd是过滤条件

六、:eq(index)

选择器::eq(index)
描述:匹配一个给定索引值的元素,索引值从 0 开始计数。
返回值:单个元素

示例:

$("tr.item:eq(0)")//tr.item是DOM元素集合,:eq(0)是过滤条件

七、:gt(index)

选择器::gt(index)
描述:匹配所有大于给定索引值的元素,索引值从 0 开始计数。
返回值:元素集合

示例:

$("tr.item:gt(2)")//tr.item是DOM元素集合,:gt(2)是过滤条件

八、:lt(index)

选择器::lt(index)
描述:
返回值:

示例:

$("tr.item:lt(2)")//tr.item是DOM元素集合,:lt(2)是过滤条件

九、:header

选择器::header
描述:匹配如h1、h2、h3之类的标题元素
返回值:元素集合

示例:

$(":header")//:header是指页面的所有标题h1~h6

十、:animated

选择器::animated
描述:匹配所有正在执行动画效果的元素。
返回值:元素集合

示例:

$("E:animated")//E是DOM元素集合,:animated是过滤条件
$("div:not(:animated)").animate({left:"+=20"}, 1000);

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
You might like
PHP新手上路(十一)
2006/10/09 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python中的zip函数使用示例
2015/01/29 Python
Python实现股市信息下载的方法
2015/06/15 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python线程信号量semaphore使用解析
2019/11/30 Python
详解django中Template语言
2020/02/22 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
小学生家长评语大全
2014/02/10 职场文书
教师产假请假条
2014/04/10 职场文书
大学生社团活动总结
2014/04/26 职场文书
年终奖发放方案
2014/06/02 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
JavaScript的function函数详细介绍
2021/11/20 Javascript