jQuery开发之DOM操作二

来源：互联网发布：淘宝卖视频教程犯法编辑：程序博客网时间：2024/06/07 05:24

接上篇文章

3，插入节点
插入节点的方法如下图：
这里写图片描述

4，删除节点
(1) remove()方法
作用是从DOM中删除所有匹配的元素。示例代码如下：

var $li =$("ul li:eq(1)").remove();       //获取第二个<li>节点后，将它从网页中删除。

注意：当某个节点用remove()删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向被删除节点的引用，因此可以在以后继续使用这些元素。

(2) detach()方法
detach() 和remove()方法一样，也是从DOM中去掉匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件，附加的数据都会保留下来。
示例代码如下：

 var $li =$("ul li:eq(1)").detach();  //获取第二个<li>节点后，将它从网页中删除。

(3) empty()方法
严格来说empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
示例代码如下：

var $li = $("ul li:eq(1)").empty();  //获取第二个<li>节点后，清空元素里的内容。

5，复制节点

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>css ajax </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){    $("ul li:eq(2)").click(function(){        $(this).clone().appendTo("ul");　　//复制当前单击的节点，并将它追加到<ul>元素中。    });});</script></head><body><p title ="选择最喜欢的水果">选择最喜欢的水果</p><ul><li title ="苹果">苹果</li><li title ="橘子">橘子</li><li title ="菠萝">菠萝</li></ul></body></html>

6，节点替换
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll();
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML活着DOM元素。
示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){    $("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")});</script></head><body><p title ="选择最喜欢的水果">选择最喜欢的水果</p><ul><li title ="苹果">苹果</li><li title ="橘子">橘子</li><li title ="菠萝">菠萝</li></ul></body></html>

运行结果如下：
这里写图片描述

replaceAll()方法的示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){    $("<li>荔枝</li>").replaceAll("li")});</script></head><body><p title ="选择最喜欢的水果">选择最喜欢的水果</p><ul><li title ="苹果">苹果</li><li title ="橘子">橘子</li><li title ="菠萝">菠萝</li></ul></body></html>

运行结果如下：

这里写图片描述

7，包裹节点
(1) wrap()方法
jQuery代码示例如下：

$("strong").wrap("<br></br>"); //用<br>标签将<strong>元素包裹起来

运行结果如下:

<br><srong>something</strong></br>

(2) wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap() 方法是将所有的元素进行包裹。
jQuery示例代码如下：

$("strong").wrapAll("<br></br>");

运行结果如下：

<br><strong>你最喜欢的水果</strong><strong>你最不喜欢的水果</strong></br>

(3) wrapInner()方法
该方法将每一个匹配的元素的字内容包括(文本节点) 用其结构化的标记包裹起来。jQuery示例代码如下：

$("strong").wrapInner("<br></br>");

运行结果如下：

<strong><br>最喜欢的水果</br></strong>

0 0