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 28 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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
thinkphp 多表 事务详解
2013/06/17 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
JavaScript工具库之Lodash详解
2019/06/15 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python map比for循环快在哪
2020/09/21 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
抽样调查项目计划书
2014/04/24 职场文书
党员教师一句话承诺
2014/05/30 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android