jQuery基本选择器

<!DOCTYPE>
<html>
<head>
<title>jQuery基本选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
    font-family: "微软雅黑"
}
div,span {
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;
}

div.mini {
    width: 40px;
    height: 43px;
    background: #CC66FF;
    border: #000 1px solid;
    font-size: 12px;
    font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    //让整个页面加载完成
    $(function() {
        /* ---------基本选择器练习--------- */
        //1、改变元素名为 <div> 的所有元素的背景色为 #FF69B4"  id="b1"

        $("#b1").click(function () {
            $("div").css("background","#FF69B4");
        });
        //2、改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
        /* 选中b2按钮,为b2按钮绑定点击事件 */
        $("#b2").click(function(){
            $("#one").css("background","#9ACD32");
        });

        //3、改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
        /* 选中b3按钮,为b3按钮绑定点击事件 */

        $("#b3").click(function(){
            $(".mini").css("background","#FF0033");
        });
        
        //4、改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b4"
        $("#b4").click(function(){
            $("span,#two,#one,.mini").css("background","#006400");
        });
    });
</script>
</head>

<body>
    <!-- 按钮1 -->
    <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"/>
    <!-- 按钮2 -->
    <input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
    <!-- 按钮3 -->
    <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
    <!-- 按钮4 -->
    <input type="button"
        value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
        id="b4" />

    <h1>天气冷了</h1>
    <h2>天气又冷了</h2>

    <div id="one">id为one</div>

    <div id="two" class="mini">
        id为two class是 mini
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>
    
    <br>
    <div id="mover">动画</div>
    <br>
    <span class="spanone"> span </span>
    <span class="mini"> span class是mini </span>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容