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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jquery实现广告上下滚动效果
Mar 04 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
php扩展ZF――Validate扩展
2008/01/10 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
JS实现鼠标移动拖尾
2020/12/27 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
学Python 3的理由和必要性
2019/11/19 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
出国签证在职证明
2014/01/16 职场文书
学校门卫岗位职责
2014/03/16 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
九年级化学教学反思
2016/02/22 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS