zoukankan      html  css  js  c++  java
  • jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)

    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                 //方法4
    11                 $("#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(){...});

      总结:wrap() 和 wrapInner() 的显示效果相同,不同的是前者为 seletor 添加了父节点,而后者为 selector 添加了子节点。

                  wrap() 和 wrapAll() 显示效果也相同,不同的是前者为 seletor 中的每一个子元素均添加父节点,而后者为整个 seletor 只添加一个父节点

  • 相关阅读:
    WTL自绘表指针
    QQ日志搬家工具 1.0
    一个消失很久的首页
    共享.net PE文件结构浏览器+名称混淆 + 16进制结构图 (源码)
    JavaScript中Array 对象相关的几个方法
    ASP.NET底层架构
    ASP.NET 2.0 正式版中无刷新页面的开发
    ASP.NET组件设计Step by Step(9)
    ASP.NET组件设计Step by Step(8)
    ajax上传(xmlhttp上传文件突破大小限制)
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2584139.html
Copyright © 2011-2022 走看看