jQuery内容过滤选择器与子元素过滤选择器用法实例分析


Posted in jQuery onFebruary 20, 2019

本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法。分享给大家供大家参考,具体如下:

jQuery的内容过滤选择器

一、:contains(text)

选择器::contains(text)
描述:匹配包含给定文本的元素
返回值:元素集合

示例:

$("div.mini:contains('div')")
//div.mini是DOM元素集合,:contains('div')是过滤条件

二、:has(selector)

选择器::has(selector)
描述:匹配含有选择器所匹配的元素的元素
返回值:元素集合

示例:

$("div.mini:has(p)")
//div.mini是DOM元素集合,:has(p)是过滤条件

三、:empty

选择器::empty
描述:匹配所有不包含子元素或者文本的空元素
返回值:元素集合

示例:

$("div.item:empty")
//div.item是DON元素集合,:empty是过滤条件

四、:parent

选择器::parent
描述:匹配含有子元素或者文本的元素
返回值:元素集合

示例:

$("div.item:parent")
//div.item是DOM元素集合,:parent是过滤条件

jQuery子元素过滤选择器

一、:first-child

选择器::first-child
描述:匹配第一个子元素
返回值:元素集合

示例:

$("div.mini:first-child")//如果div.mini是某元素的第一个子元素,那么选中此div.mini
$("div.mini :first-child")//如果**div.mini**的后代元素A是某元素的第一个子元素,那么选中此后代元素A
$("div.mini span:first-child")//如果**div.mini**的span后代元素A是某元素的第一个子元素,那么选中此**span后代元素A**
$("div.mini span :first-child")//如果**div.mini的span后代元素**的后代元素A是某元素的第一个子元素,那么选中此后代元素A

二、:last-child

选择器::last-child
描述:匹配最后一个子元素
返回值:元素集合

示例:

$("div.mini:last-child")//如果div.mini是某元素的最后一个子元素,那么选中此div.mini
$("div.mini :last-child")//如果**div.mini**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A
$("div.mini span:last-child")//如果**div.mini**的span后代元素A是某元素的最后一个子元素,那么选中此**span后代元素A**
$("div.mini span :last-child")//如果**div.mini的span后代元素**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A

三、:only-child

选择器::only-child
描述:如果某元素A是其父元素中唯一的子元素,那么A将会被匹配
返回值:单个元素

示例:

$("div.mini:only-child")//如果div.mini是某元素唯一的子元素,那么选中此div.mini
$("div.mini :only-child")//如果**div.mini**的后代元素A是某元素唯一的子元素,那么选中此后代元素A
$("div.mini span:only-child")//如果**div.mini**的span后代元素A是某元素唯一的子元素,那么选中此**span后代元素A**
$("div.mini span :only-child")//如果**div.mini的span后代元素**的后代元素A是某元素唯一的子元素,那么选中此后代元素A

四、:nth-child

选择器::nth-child(:eq()索引从0开始,:nth-child()索引从1开始)
描述:匹配包含给定文本的元素
返回值:元素集合

示例:

$("div.mini:nth-child(1)")//如果div.mini是某元素的**第一个**子元素,那么选中此div.mini
$("div.mini :nth-child(1)")//如果**div.mini**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A
$("div.mini span:nth-child(1)")//如果**div.mini**的span后代元素A是某元素的**第一个**子元素,那么选中此**span后代元素A**
$("div.mini span :nth-child(1)")//如果**div.mini的span后代元素**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A

:nth-child()的索引值除了具体数字值为还可以是表达式:

:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(3n+1)
:nth-child(3n+2)

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #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
You might like
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
详解原生JS动态添加和删除类
2019/03/26 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
django manage.py扩展自定义命令方法
2018/05/27 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
应届毕业生求职信
2014/05/26 职场文书
大学课外活动总结
2014/07/09 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
小学体育课教学反思
2016/02/16 职场文书
《去年的树》教学反思
2016/02/18 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
教你nginx跳转配置的四种方式
2022/07/07 Servers