jQuery-后代

最新推荐文章于 2023-01-30 22:37:29 发布

Southern Wind

最新推荐文章于 2023-01-30 22:37:29 发布

阅读量286

点赞数

分类专栏： jQuery 文章标签： jquery html5 css

本文链接：https://blog.csdn.net/nanchen_J/article/details/120186969

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

后代指的是子，孙，子孙有两种方法，方法如下：

children()方法：返回被选元素的所有直接子元素，（父亲找儿子）

例如我想选取ul的儿子（li）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-后代</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        body {
            color: #fff;
        }
        .container * {
            display: block;
            border:  1px solid black;
            color: white;
            padding: 5px;
            margin: 15px;
        }
        .container div{
            background-color: #333;
        }
        ul{
            background-color: #555;
        }
        ul li {
            background-color: #777;
        }
        p{
            background-color: #999;
        }
    </style>
</head>
<body>
    <!-- 后代指的是子，孙，子孙 -->
    <!-- children()、find() -->
    <!-- children()方法
        返回被选元素的所有直接子元素
    -->
    <div class="container" style="width: 300px;">
        <div>div
            <ul>ul
                <li>第一个li
                    <p>p</p>  
                </li>
                <li>第二个li</li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $('ul').children().css({    //使用chikdren()方法获取ul元素的子元素
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })
    </script>
</body>
</html>

效果如下图：

当然也可以单独指定一个子元素

只需要在li里面添加个属性然后获取这个属性即可

<div class="container" style="width: 300px;">
        <div>div
            <ul>ul
                <li class="li1">第一个li
                    <p>p</p>  
                </li>
                <li class="li2">第二个li</li>
            </ul>
        </div>
</div>

//Jquery
$(function () {
            $('ul').children('li.li1').css({   
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })

效果：

css样式参考上方即可

find() 方法：方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(function () {
            $('div').find('ul,p,li').css({    //获取ul，p，li
                'border': "1px solid red",
                'color': "red",
                'background-color':'white'
            })
        })

效果如图：

当然也可以获取所有的后代：

$('.container').find('*').css({ }）

Southern Wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-后代

后代指的是子，孙，子孙有两种方法，方法如下：children()方法：返回被选元素的所有直接子元素，（父亲找儿子）例如我想选取ul的儿子（li）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
复制链接

扫一扫