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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery表单元素取值赋值方法总结
May 12 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实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
vue组件name的作用小结
2018/05/23 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python之pandas用法大全
2018/03/13 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python pandas模块基础学习详解
2019/07/03 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python版中国省市经纬度
2020/02/11 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
什么是封装
2013/03/26 面试题
会计实习期自我鉴定
2013/10/06 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
美术教学感言
2014/02/22 职场文书
七匹狼男装广告词
2014/03/21 职场文书
新兵入伍心得体会
2014/09/04 职场文书
音乐剧猫观后感
2015/06/04 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技