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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现拖拽小方块效果
Dec 10 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模板之Phpbean的目录结构
2008/01/10 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python3.5安装python3-tk详解
2019/04/26 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python生成大写32位uuid代码
2020/03/03 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
大班上学期个人总结
2015/02/13 职场文书
管理失职检讨书
2015/05/05 职场文书