jQuery基本过滤选择器

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

div.mini {
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    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、改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
        $("#b1").click(function(){
            $("div[id]").css("background","#FF6347");
        });

        //2、改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2"
        $("#b2").click(function(){
            $("div[title='aa']").css("background","#9ACD32");
        });
        //==================================

        /* ---------子元素选择器练习--------- */
        //4、改变第一个子div元素的背景色为 #FF69B4"  id="b4"
        $("#b4").click(function(){
            $("div:first-child").css("background","#FF69B4");
        });
        
        //5、改变第二个子div元素的背景色为 #006400"  id="b5"
        $("#b5").click(function(){
            $("div:nth-child(2)").css("background","#006400");
        });
    })
</script>
</head>

<body>
    <input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" />
    <input type="button" value=" 改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" />

    <hr/>
    <hr/>
    
    <input type="button" value=" 改变div的第一个子元素的背景色为 #FF69B4"  id="b4" />
    <input type="button" value=" 改变div的第二个子元素的背景色为 #006400"  id="b5" />

    <h1>天气冷了</h1>

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

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

    <div class="one" title="aa">
        class是 one title为aa
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one" title="bb">
        class是 one title为bb
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">id为mover 动画</div>
    <br>
    <input type="submit"/>
</body>
</html>
jQuery基本过滤选择器

推荐阅读更多精彩内容
