Jquery之“基本选择器”

HTML代码：

<body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
    <h3>基本选择器.</h3>
    
    <input type="button" value="选择 id为 one 的元素." id="btn1" />
    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
    <input type="button" value="选择元素名是 div 的所有元素." id="btn3" />
    <input type="button" value="选择所有的元素." id="btn4" /> *
    <input type="button" value="选择所有的span元素和id为two的元素." id="btn5" />
    <br /><br />
    
    
    <div class="one" id="one">
        id为one,class为one的div
        <div class="mini">class为mini的div</div>
    </div>

    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other的div</div>
        <div class="mini" title="test">class为mini,title为test的div</div>
    </div>

    <div class="one">
        class为one的div
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
    </div>

    <div style="display:none;" class="none">
        style的display为"none"的div
    </div>

    <div class="hide">
        class为"hide"的div
    </div>

    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8" />
    </div>

<span id="mover">正在执行动画的span元素.</span>
</body>

CSS:

div,span,p {
    width:200px;
    height:230px;
    margin:5px;
    background:#aaa;
border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Arial;
    font-family:Verdana;
}
div.mini {
    width:80px;
    height:80px;
    background-color: #aaa;
    font-size:12px;
    font-family:Arial;
}
div.hide {
    display:none;
}

需要选择的标签：

JS代码：

            $("#btn2").click(function () {
                $(".mini").css("background-color", "yellow");
            });

            $("#btn3").click(function () {
                $("div").css("background-color", "green");
            });

            $("#btn4").click(function () {
                $("*").css("background-color", "#00FFFF");
            });

            $("#btn5").click(function () {
                $("span,#two").css("background-color", "black");
            });

});

</script>

Jquery之“基本选择器”

猜你喜欢