包装集

<body>
    <div id="a01">1.包装集——length</div>
    <div id="a02">2.包装集——index(obj)</div>
    <div id="a03">3.包装集——get(index)或者[index]_会由Jquery对象变成Dom对象</div>
    <div id="a04">4.包装集——add()</div>
    <a href="#">我是一个链接</a>
    <div id="a05">5.包装集——clone().appendTo</div>
    <div id="a06">6.包装集——not() [去掉]</div>
    <div id="a07">7.包装集——filter [保留]</div>
    <div id="a08">8.包装集——slice(2,4) [取中间]</div>
    <div id="a09">9.包装集——each </div>
</body>
1.包装集——length
$("#a01").click(function(){
        alert($("#a01").length);
        
    });

 

2.包装集——index(obj)
$("#a02").click(function(){
        var arrayList=$("div");
        var oneElement=$("#a01");
        alert ( arrayList.index( oneElement ) );
        //错误示范
         //alert(arrayList.index(1));//index(int)不返回对应的坐标对象
        //解释
        alert( arrayList[1] );
        alert( $(arrayList[1]) );
        
        //包装集包含里面的所有元素都只是DOM对象，而不是Jquery对象
        //alert( arrayList[1].text() )
        alert( $(arrayList[1]).text() )
        });
3.包装集——get(index)或者[index]_会由Jquery对象变成Dom对象
$("#a03").click(function(){
         var arrayList=$("div");
         //get[]获得的是Dom对象
         alert( arrayList[2].innerText);
         //$()Jquery对象
         alert( $(arrayList[2]).text() )
         alert( $(arrayList.get(2)).text() )
        })

 

4.包装集——add()
$("#a04").click(function(){
        var arrayList= $("div");
        arrayList
        .css("border","50px solid gray")
        .add("<a href='#'>123</a>").appendTo(document.body)
        .css("background","pink");        
        });
5.包装集——clone().appendTo
//clone()克隆
     $("#a05").click(function(){
            $("a").clone().appendTo(document.body);
        });

6.包装集——not() [去掉]

//去掉 not
$("#a06").click(function(){
$("div").not("#a05,#a06").css("background","green");    
});

7.包装集——filter [保留]

//保留
     $("#a07").click(function(){
                $("div").filter("#a05,#a06").css("background","green");     
     });

8.包装集——slice(2,4) [取中间]

$("#a08").click(function(){
                $("div").slice(2,4).css("background","green");     
     });

9.包装集——each

//each遍历
     $("#a09").click(function(){
                $("#a01,#a02,#a03").each(function(){
                alert($(this).text());                
                });     
     });