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>
<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>

显示:
在这里插入图片描述
点击第一个按钮:
在这里插入图片描述
点击第二个按钮:
在这里插入图片描述
点击第三个按钮
在这里插入图片描述
点击第四个按钮
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值