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 21 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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开发入门教程之面向对象
2006/12/05 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
前端面试知识点目录一览
2019/04/15 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
node 版本切换的实现
2020/02/02 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python logging模块的使用总结
2019/07/09 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python with语句用法原理详解
2020/07/03 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
机电专业毕业生推荐信
2013/11/10 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
安全承诺书范文
2014/03/26 职场文书
小学教师寄语大全
2014/04/03 职场文书
婚育证明样本
2015/06/16 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
小程序自定义轮播图圆点组件
2022/06/25 Javascript