jquery Dom操作

来源：互联网发布：返利网淘宝登录不上编辑：程序博客网时间：2024/06/10 16:59

1.删除操作

（1）remove()

　　$(selector).remove([selector])

$("#div3").remove(); //删除 id 为 div3 的 div 标签$("div").remove("#div3"); //删除 div 标签中 id 为 "div3" 的标签

（2）detach()

　　$(selector).detach([selector])

$("#div3").detach(); //删除 id 为 div3 的 div 标签$("div").detach("#div3"); //删除 div 标签中 id 为 "div3" 的标签

（3）empty()

　　$(selector).empty()

$("#div3").empty(); //删除 id 为 div3 的节点的所有子节点

总结：remove 方法和 detach 方法的返回值均为被删除的jQuery节点对象，不同的是，前者指保留该对象节点本身，其他绑定的事件及附加的数据等都会被移除。而后者全部保留。empty 方法则是将指定节点的所有子节点删除，本身保留。

2.复制节点 clone()

　　$(selector).clone([true]);

　　带true参数则复制出来的节点具备原节点所绑定的事件处理程序。

3.替换节点

（1）replaceAll()

　　$(content).replaceAll(selector);

（2）replaceWith()

　　$(selector).repalceWith(content);

这两种方法在使用时效果完全相同，都是用 content 代替 selector.

4.内部插入

　　内部插入是将content插入到selector节点内部，包括内部的头部和尾部。插入后的节点与原节点是父子关系。

（1）append()

　　将content添加到seletor内部的头部。

　　$(selector).append(content);

　　$(selector).append(function(index [,html]){...});

　　如果要获取selector的元素index及html内容，则采用第二种方法。调用的实例如下（html是可选参数）：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script> 6     <title>内部插入应用示例</title> 7     <script language="javascript" type="text/javascript"> 8         $(document).ready(function(){ 9             $("#btn").click(function(){10                 //方法1   用 eq() 选择器找到指定节点11                 //$("div:eq(1)").append("<b>jQuery内部插入测试</b>");12                 //方法2   用函数的参数index索引值找到指定节点13                 $("div").append(function(index, html){14                     if(index == 1){15                         return "<b>jQuery内部插入测试</b>" + "  " + html;16                     }17                 });18             });19         });20     </script>21 </head>22 <body bgcolor="#EEEEEE">23     <h1>内部插入应用实例</h1>24     <div>25         <button id="btn">测试</button>26         <div id="div1">1.水果</div>27         <div id="div2">2.蔬菜</div>28         <div id="div3">3.肉类</div>29     </div>30 </body>31 </html>

运行及点击测试按钮之后的效果如下：

（2）appendTo()

　　$(content).appendTo(selector);

（3）prepend()

　　将content添加到seletor内部的尾部。

　　$(selector).prepend(content);

　　$(selector).prepend(function(index [,html]){...});

（4）prependTo()

　　$(content).prependTo(selector);

前两种方法效果相同，后两种方法效果相同。

5.外部插入

　　外部插入是将content插入到selector节点外部，包括selector节点的前面和后面。插入后的节点与原节点是兄弟关系。

（1）after()

　　$(selector).after(content);

　　$(selector).after(function(index [,html]){...});

（2）insetAfter()

　　$(content).insertAfter(selector);

（3）before()

　　$(selector).before(content);

　　$(selector).before(function(index [,html]){...});

（4）insertBefore()

　　$(content).insertBefore(selector);

　　使用方法与内部插入类似。

6.包裹操作

（1）wrap()

　　$(selector).wrap(wrapper);

　　$(selector).wrap(function(){...});

　　下面代码中的四种方法效果相同：

 1         $(document).ready(function(){ 2             $("#btn").click(function(){ 3                 var newNode = $("<b></b>"); 4                 //方法1 5                 //$("#div2").wrap(newNode); 6                 //方法2 7                 //$("#div2").wrap("<b></b>"); 8                 //方法3 9                 //$("#div2").wrap(document.createElement("b"));10                 //方法411                 $("#div2").wrap(function(){12                     return "<b></b>";13                 });14             });15         });

（2）unwrap()

　　$(selector).unwrap();

（3）wrapAll()

　　$(selector).wrapAll(wrapper);

（4）wrapInner()

　　$(selector).wrapInner(wrapper);

　　$(selector).wrapInner(function(){...});

0 0