JQuery教程---DOM操作(二)
JQuery教程---DOM操作(二)
1. clone() 复制一个jQuery对象
例：
<p id="test">after</p><a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
$("#test").clone().appendTo($("a"));
}
复制$("#test")然后插入到<a>后,执行后相当于
<p id="test">after</p>
<a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
<p id="test">after</p>
2.empty() 删除匹配对象的所有子节点
例：
<div id="test"> <span>span</span> <p>after</p> </div> <a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
$("#test").empty();
}
执行后相当于：
<div id="test"></div> <a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
3. insertAfter(expr) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(expr) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
例：与 $("#foo").after("p")相同
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery代码及功能：
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>
4. remove() 删除匹配对象
注意区分:
empty():移出匹配对象的子节点，
remove():移出匹配对象
wrap(htm): 将匹配对象包含在给出的html代码内
例：
<p>TestParagraph.</p> <a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
$("p").wrap("<div class='wrap'></div>");
}
执行后相当于
<div class='wrap'><p>TestParagraph.</p></div>
5. wrap(elem) 将匹配对象包含在给出的对象内
例：
<p>TestParagraph.</p> <div id="content"></div> <a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
$("p").wrap(document.getElementById('content'));
}
执行后相当于：
<div id="content"><p>TestParagraph.</p></div>
6. add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
例：
<p>Hello</p> <p><span>HelloAgain</span></p> <a href="http://p5s8.ddvip.com/index.php#" onClick="jq()">jQuery</a>
jQuery代码及功能：
function jq(){
varf=$("p").add("span");
for(var i=0;i<$(f).size();i++){
alert($(f).eq(i).html());}
}
执行$("p")得到匹配<p>的对象，有两个，add("span")是在("p")的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[<p> Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。
7. add(el) 在匹配对象的基础上在附加指定的dom元素。
例：
<p>Hello</p><p><span>HelloAgain</span></p>
jQuery代码及功能：
function jq(){
varf=$("p").add([document.getElementById("a"),document.getElementById("b")])
for(var i=0;i<$(f).size();i++){
alert($(f).eq(i).html());}
}
注意els是一个数组，这里的[ ]不能漏掉。