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 06 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 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
List Installed Software Features
2007/06/11 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Flask之flask-session的具体使用
2018/07/26 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
django fernet fields字段加密实践详解
2019/08/12 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
人事助理岗位职责
2013/11/18 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
车辆转让协议书
2014/04/15 职场文书
企业口号大全
2014/06/12 职场文书
自我检讨报告
2015/01/28 职场文书
同学聚会邀请函
2015/01/30 职场文书
法律讲堂观后感
2015/06/11 职场文书
数学复习课教学反思
2016/02/18 职场文书
警用民用对讲机找不同
2022/02/18 无线电
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
详解OpenCV曝光融合
2022/04/29 Python