JQuery 层级选择器

最新推荐文章于 2023-03-21 16:58:58 发布

_七七

最新推荐文章于 2023-03-21 16:58:58 发布

阅读量139

点赞数

分类专栏： JQuery 文章标签： css js javascript html jquery

本文链接：https://blog.csdn.net/qq_43472877/article/details/106745343

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

层级选择器

后代选择器
语法: $(“A B”)选择A元素内部的所有B元素
子选择器
语法: $(“A > B”)选择A元素内部的所有B子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery层级选择器</title>
    <script src="js/jquery-3.4.1.min.js"></script>

    <style>
        #div1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        #div2{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        #div3{
            background-color: red;
            height: 50px;
            width: 50px;
        }
    </style>

    <script>
        $(function () {
            //使用b1改变body标签所有div的背景色为绿色
            $("#b1").click(function () {
                $("body div").css("backgroundColor","green");
            })

            //使用b2改变body内子div的背景色为蓝色
            $("#b2").click(function () {
                $("body > div").css("backgroundColor","blue");
            })
        })
    </script>
</head>

<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...
        <div id="div3">div3...</div>
    </div>

    <input type="button" id="b1" value="改变body内div的颜色">
    <input type="button" id="b2" value="改变body子div的颜色">

</body>
</html>

_七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 层级选择器

层级选择器后代选择器语法: $(“A B”)选择A元素内部的所有B元素子选择器语法: $(“A > B”)选择A元素内部的所有B子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery层级选择器</title> <script src="js/jquery-3.4.1.min.js"&g
复制链接

扫一扫

专栏目录