0

0

jQuery子代选择器parent > child用法详解

巴扎黑

巴扎黑

发布时间:2017-06-21 10:47:52

|

4143人浏览过

|

来源于php中文网

原创

jquery的parent > child选择器(子代选择器)用于匹配parent元素的所有子辈child元素,将其封装为jquery对象并返回。

注意:选择器child的查找范围必须是"parent元素"的子辈元素,不包括"孙子辈"及更后辈的元素。

如果你想在所有的后代元素中查找,请使用后代选择器(ancestor descendant)。

语法

// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

>号两侧的空格可以省略,但不建议省略,否则字符过于紧密可能影响阅读。

参数

参数                    描述

parent           一个有效的父辈选择器。

child             一个有效的子辈选择器,只用于匹配父辈选择器的子元素

返回值

Sider
Sider

多功能AI浏览器助手,帮助用户进行聊天、写作、阅读、翻译等

下载

返回封装了在父辈元素内查找到的符合条件的子元素的jQuery对象。

如果找不到与父辈选择器匹配的DOM元素,或者在符合父辈选择器的DOM元素内找不到符合子代选择器的子元素,则返回一个空的jQuery对象。

符合父辈选择器的父辈DOM元素可能有多个,在一个父辈DOM元素内也可能查找到多个子DOM元素,返回的jQuery对象中封装了符合条件的所有DOM元素。

示例&说明

以下面这段HTML代码为例:

Hello

World 365mini.com

现在,我们想要一次性查找到p标签内所有的span子元素,则可以编写如下jQuery代码:

// 选择了id分别为n3、n5的两个元素
// n6不是p标签的子元素,而是孙子辈的元素,因此无法匹配
$("p > span");

接着,我们查找span标签的span子元素,则可以编写如下jQuery代码:

// 选择了id为n6的一个元素
$("span > span");

我们可以配合使用所有元素选择器(*)来实现只查找孙子辈元素的选择器。例如:我们想要查找id为n1的元素的孙子辈的span标签,对应的jQuery代码如下:

// 选择了id分别为n3、n5的两个元素
$("#n1 > * > span");

相关专题

更多
c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

26

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

24

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

72

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

10

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

52

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

183

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

12

2026.01.09

php网站搭建教程大全
php网站搭建教程大全

本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

8

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.4万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号