jQuery层级选择器（常用）

最新推荐文章于 2024-04-17 09:18:10 发布

Keeling1720

最新推荐文章于 2024-04-17 09:18:10 发布

阅读量408

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118267611

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

jQuery层级选择器（常用）

层级有四种：

某元素A的所有后代元素B用空格表示（例：form input表示form中的所有input标签）
某元素A的子元素B用>表示（例：form>input仅表示form中的input子元素）
某元素A下边的元素B用+表示（例：label>input表示前面是label的input元素）
某元素A后边的兄弟元素B用~表示（例：form~input表示与form互为兄弟元素的input元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        //把所有input的背景色变灰，方便查看颜色变化
        input{
            background-color: grey;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //form下的所有input
                $("form input").css('color','red');
            });
            $("#btn2").click(function () {
                //form下的子代input
                $("form > input").css('color','green');
            });
            $("#btn3").click(function () {
                //前面是label的input
                $("label + input").css('color','blue');
            });
            $("#btn4").click(function () {
                //form的兄弟input
                $("form ~ input").css('color','#bfa');
            });

        })
    </script>
</head>
<body>
    <form>
        <label>Name</label>
        <input name="name" value="name"/>
        <fieldset>
            <label>Newsletter:</label>
            <input name="newsletter" value="newsletter"/>
        </fieldset>
    </form>
    <input name="none" value="none"/>
    <button id="btn1">form的所有后代input变red</button>
    <button id="btn2">form的子代input变green</button>
    <button id="btn3">label下的所有input变blue</button>
    <button id="btn4">form的兄弟input变#bfa</button>
</body>
</html>

显示：
在这里插入图片描述
点击第一个按钮：

点击第二个按钮：

点击第三个按钮

点击第四个按钮

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery层级选择器（常用）

jQuery层级选择器（常用）层级有四种：某元素A的所有后代元素B用空格表示（例：form input表示form中的所有input标签）某元素A的子元素B用>表示（例：form>input仅表示form中的input子元素）某元素A下边的元素B用+表示（例：label>input表示前面是label的input元素）某元素A后边的兄弟元素B用~表示（例：form~input表示与form互为兄弟元素的input元素）<!DOCTYPE html><ht
复制链接

扫一扫