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 05 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery实现下载图片功能
Jul 18 jQuery
JQuery绑定事件四种实现方法解析
Dec 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之第六天
2006/10/09 PHP
模仿OSO的论坛(一)
2006/10/09 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
javascript import css实例代码
2008/07/18 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python如何获取文件指定行的内容
2020/05/27 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python绘制分布折线图的示例
2020/09/24 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
校园十大歌手策划书
2014/02/01 职场文书
社区工作感言
2014/02/21 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js