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中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery实现滑动开关效果
Aug 02 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的FTP学习(一)
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
python正则分组的应用
2013/11/10 Python
django框架如何集成celery进行开发
2017/05/24 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python list格式数据excel导出方法
2018/10/31 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
总经理秘书工作职责
2013/12/26 职场文书
护林防火标语
2014/06/27 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
县委务虚会发言材料
2014/10/20 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server