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 23 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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实现paypal整合方法
2010/11/28 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python实现可变变量名方法详解
2019/07/01 Python
python 制作简单的音乐播放器
2020/11/25 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
经典大学生求职信范文
2014/01/06 职场文书
办理暂住证介绍信
2014/01/11 职场文书
大学班长的职责
2014/01/27 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS