jQuery层次选择器




DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery层次选择器title>
head>
<body>
<p>p>
<div id="father">
    <div>
        <span>span1span>
        <span>span2span>
        <span>span3span>
    div>
    <div>
        <b>1b>
        <div>div1div>
        <div>div2div>
        <div>div3div>
        <p>p>
    div>
    <div>div>
    <p>p>
    <p>p>
    <p>p>
    <span>sss1span>
div>
body>
html>
<script src="jquery-1.12.4.js">script>
<script>
    $(function () {
        //需求1:获取id为father这个元素的所有子div.
        //   console.log($('#father > div'));

        //需求2:获取id为father这个元素的所有子div以及所有子p.
        // console.log($('#father > div, p'));
        // console.log($('#father > div, #father > p'));


        //需求3:获取id为father这个div的所有后代div.
        // console.log($('#father div'));


        //需求4:获取id为father这个div的所有后代div,以及id为father这个div的所有后代span.
        //   console.log($('#father div, #father div span')); // 错误, 显示9个
        console.log($('#father div, #father span')); // 显示 10个

        /**
         * jQuery层级选择器
         * 子代选择器: $('ul > li')
         * 藕带选择器: $('ul li'); // 包括孙子
         */

    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

在这里插入图片描述

相关阅读:
1、强化学习基础知识点
MySQL夺命连环15问，你能坚持到第几问？
c++面试题总结
【eBPF-03】进阶：BCC 框架中 BPF 映射的应用 v1.0
Kubernetes包管理工具-Helm3使用
使用QianWei网站源码配合cpolar，发布本地音乐分享网站
【Java集合类面试二十四】、ArrayList和LinkedList有什么区别？
数据结构--字符串的模式匹配
数商云渠道商系统如何赋能医疗器械企业实现全渠道数字化管理，驱动高质发展？
基于SSM实现的艺术品鉴定管理系统+App

原文地址：https://blog.csdn.net/beyondx/article/details/126094893