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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现本地存储
Dec 22 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中Object对象的笔记分享
2011/06/28 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript 写类方式之七
2009/07/05 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python continue语句用法实例
2014/03/11 Python
Python的Django框架中的Context使用
2015/07/15 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
利用Python计算KS的实例详解
2020/03/03 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
优秀员工评优方案
2014/06/13 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
校园之声广播稿
2015/08/18 职场文书