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是一个数组，这里的[ ]不能漏掉。