zoukankan      html  css  js  c++  java
  • 获取子节点

    获取子节点的方法有:

     方法  说明
     children()  选取子节点,可以带过滤参数。但只能选择子节点,不能选择孙子节点。
     find()  选取子节点,可以带过滤参数。可以选择子节点及孙子节点。

    children()示例:

    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
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>子节点</title>
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
            <style>
                .box{
                    border: 1px solid blueviolet;
                    padding: 1px;
                    margin-bottom: 12px;
                }
            </style>
        </head>
        <body>
            <div>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>电源</a></li>
                </ul>
            </div>
            <script>
                $('div').children("*").attr("class", "box");
            </script>
        </body>
    </html>

    find()示例:

    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
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>子节点</title>
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
            <style>
                .box{
                    border: 1px solid blueviolet;
                    padding: 1px;
                    margin-bottom: 12px;
                }
            </style>
        </head>
        <body>
            <div>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>电源</a></li>
                </ul>
            </div>
            <script>
                $('div').find("ul").attr("class", "box");
            </script>
        </body>
    </html>
  • 相关阅读:
    mysql基础(三)存储引擎和锁
    为给定字符串生成MD5指纹
    区块链基本原理,Part-2:工作量证明和权益证明
    区块链基本原理,Part-1:拜占庭容错
    区块链挖矿 2.0
    以太坊 2.0 中的验证者经济模型,Part-2
    以太坊 2.0 中的验证者经济模型,Part-1
    Java归并排序之递归
    Python爬虫入门教程 64-100 反爬教科书级别的网站-汽车之家,字体反爬之二
    Java棋盘覆盖问题
  • 原文地址:https://www.cnblogs.com/max-hou/p/9132044.html
Copyright © 2011-2022 走看看