JQuery选择器1

最新推荐文章于 2023-04-23 17:34:04 发布

老施同学

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/guofengs/article/details/51451678

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

check

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>check dome</title>
    <style>
        div{
            color: red;
        }
    </style>
    <script src="jquery-2.2.3.min.js"></script>

</head>
<body>
    <form>
        <p>
            <input  type="checkbox" name="newspaper" value="Hourly" checked="checked">Hourly
            <input  type="checkbox" name="newspaper" value="Daily" >Daily
            <input  type="checkbox" name="newspaper" value="Weekly" >Weekly
            <input  type="checkbox" name="newspaper" value="Monthly" >Monthly
            <input  type="checkbox" name="newspaper" value="Yearly" >Yearly
        </p>
    </form>
    <div>
    </div>
    <script>
//        var count = function () {
//            var n =  $("input:checked").length;
//            $("div").text(n+(n==1?"is":"are")+"checked");
//        }
//        count();
//        $("input[type=checkbox]").on("click",count);//on 绑定事件

//        var count = function () {
//            var n = $("input:checked").length;
//            $("div").text(n+(n==1?"is":"are")+"checked");
//        }
//        count();
//        $("input[type=checkbox]").on("click",count);

        var count = function () {
            var n = $("input:checked").length;
            $("div").text(n+(n==1?"is":"are")+"checked");
        }
        count();
        $("input[type=checkbox]").on("click",count);

    </script>
</body>
</html>

child selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>child demo</title>
    <style>
        body{
            font-size: 14px;
        }
    </style>
    <script src="jquery-2.2.3.min.js"></script>
</head>
<body>
    <ul class="nav">
        <li>
            Item 1
        </li>
        <li>
            Item 2
            <ul class="navv">
                <li>Nested item 1</li>
                <li>Nested item 2</li>
                <li>Nested item 3</li>
            </ul>
        </li>
        <li>
            Item 3
        </li>
    </ul>

    <script>
        $("ul.nav > li").css("border","3px double red");
        $("ul.navv > li").text("fasjfhafhaw");
    </script>
</body>
</html>