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插件之validation插件
Mar 29 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 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多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
在python中安装basemap的教程
2018/09/20 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
本科生个人求职自荐信
2013/09/26 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python