当前位置: 代码迷 >> Web前端 >> JQuery课程-DOM操作(二)
  详细解决方案

JQuery课程-DOM操作(二)

热度:89   发布时间:2012-10-31 14:37:31.0
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是一个数组,这里的[ ]不能漏掉。

?

?

  相关解决方案