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 09 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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连接MSsql server的五种方法总结
2018/03/04 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
图解Python变量与赋值
2018/04/03 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python爬虫用mongodb的理由
2020/07/28 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
外企财务年会演讲稿
2014/01/03 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
护士自我评价范文
2014/01/25 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
平面设计求职信
2014/03/10 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
奠基仪式致辞
2015/07/30 职场文书
团支部书记竞选稿
2015/11/21 职场文书
Python装饰器详细介绍
2022/03/25 Python