jquery选择器部分有点不明白

最近在看 精通javascript+jquery这本书,对选择器有点不明白.
为什么书上的例子可以直接这样写例如:
$("span").html(内容省略);而我自己写了一个显示颜色的代码如下 :<script type="text/javascript">
    function change()
    {
     var color=$("#color").val();//有问题可以直接用,不要用下标?
     //alert(color);
     //var d=document.getElementById("d1");
     //d.style.backgroundColor=color;
     //$("#d1").get(0).style.backgroundColor=color;
     //$("#d1").each(function(){this.style.backgroundColor=color;});
     //$("div").style.backgroundColor=color;              //这样写就不行呢,非要加下下标[0]才可以?
           $("div")[0].style.backgroundColor=color;//
    }
    
    
    </script>
</head> <body>
please enter the value of color:
<input id="color" onblur="change()">
<hr> <div id="d1" style="width: 100px; height: 100px; background: black"
align="center"></div>
</body>

解决方案 »

  1.   

    $("div") 获取的是div数组，所以要用下表
      

  2.   

    $("div").css("backgroundColor",color);
      

  3.   


    <div>forder</div>
    <div>forder2</div>
      var obj = $("div");
                for (var i = 0; i < obj.length; i++)
                {
                    alert(obj[i].innerHTML);
                }
      

  4.   

    $("div")表示的是整个页面上所有的div元素，楼主要是想控制或者选择一个的话，就那就用id，id是表示标签的唯一性的标志，而class是可以表示像xx元素（标签）一样的所有有原素
      

  5.   

    $("#d1").style.backgroundColor=color;
    这种写法我也试过,但没用!
    我已经分不清哪些返回的是一个元素,哪些返回的是包装集了!!!
      

  6.   

    <script language="javascript">
    $(function(){
    //var sTitle = $("em").attr("title"); //获取第一个<em>元素的title属性值
    var sTitle = $("em:eq(1)").attr("title"); //获取第二个<em>元素的title属性值
    $("span").text(sTitle);
    });
    </script>
    </head>
    <body>
    <p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
    <p>在树林里面<em title="running">跑啊跑</em>...</p>
    <p>title属性的值是：<span></span></p>
    ---------------------为什么这个里面的span也没有下标呢?
      

  7.   

    <script language="javascript">
    $(function(){
    $("div").attr("id", function(index){
    //将id设置为序号相关的参数
    return "div-id" + index;
    }).each(function(){
    //找到每一项的span标记
    //$(this).find("span").text("(id='" + this.id + "')");
    $(this).find("span").html("(id='" + this.id + "')");
    });
    });
    </script>
    </head>
    <body>
    <div>第0项 <span></span></div>
    <div>第1项 <span></span></div>
    <div>第2项 <span></span></div>
    </body>------------------------------------这里的div也没有使用下标?