包装集
<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()); }); });