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弹幕效果
May 06 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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实现三级级联下拉框
2016/04/17 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python 从相对路径下import的方法
2018/12/04 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python爬取天气数据的实例详解
2020/11/20 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
顺丰快递Java软件工程师面试题
2015/07/31 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
旅游网创业计划书
2014/01/31 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
教师岗位职责范本
2015/04/02 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
地震捐款简报
2015/07/21 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Nginx源码编译安装过程记录
2021/11/17 Servers