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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 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
php实现的在线人员函数库
2008/04/09 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python requests 测试代理ip是否生效
2018/07/25 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
聚美优品广告词改编
2014/03/14 职场文书
六一儿童节开幕词
2015/01/29 职场文书
长城导游词300字
2015/01/30 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
运输公司工作总结
2015/08/11 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python