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的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
WordPress自定义时间显示格式
2015/03/27 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
django如何连接已存在数据的数据库
2018/08/14 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python中的逆序遍历实例
2019/12/25 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
工程项目建议书范文
2014/03/12 职场文书
党员领导干部承诺书
2014/05/28 职场文书
军训口号
2014/06/13 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年租房协议书范本
2014/10/30 职场文书
年底个人总结范文
2015/03/10 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
化妆品促销活动总结
2015/05/07 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
升学宴学生致辞
2015/09/29 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python