乐趣区

关于前端:JQuery文档处理

jiezi

1、外部插入

A.append(B) 将 B 插入到 A 的外部前面（之后的串联操作，操作 A）

       <A>

              ....

              <B></B>

       <A>

A.prepend(B) 将 B 插入到 A 的外部后面 

       <A>

              <B></B>

              ....

       <A>

A.appendTo(B) 将 A 插入到 B 的外部前面（之后的串联操作，操作 A）

A.prependTo(B) 将 A 插入到 B 的外部后面 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03_外部插入节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    </head>
     
    <body>
         <ul id="city">
              <li id="bj" name="beijing"> 北京 </li>
             <li id="tj" name="tianjin"> 天津 </li>
             <li id="cq" name="chongqing"> 重庆 </li>
         </ul>
         
         
          <ul id="love">
              <li id="fk" name="fankong"> 反恐 </li>
             <li id="xj" name="xingji"> 星际 </li>
         </ul>
        
        <div id="foo1">Hello1</div> 
       
    </body>
<script type="text/javascript">
    // 将 tj 插入 到 love 外部 前 或后
    
    var $tj = $("#tj");
    var $love = $("#love");
    
    // 后
//    $love.append($tj);
//    $tj.appendTo($love);
    
    
    // 前
//    $love.prepend($tj);
    $tj.prependTo($love);
    
</script>
   
</html>

2、内部插入

A.after(B) , 将 B 插入到 A 前面（同级）

       <A></A>

       <B></B>

A.before(B)，将 B 插入到 A 后面 

       <B></B>

       <A></A>

A.insertAfter(B) , 将 A 插入到 B 前面（同级）

       <B></B>

       <A></A>

A.insertBefore(B) 将 A 插入到 B 后面 

       <A></A>

       <B></B>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>04_内部插入节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    </head>
     
    <body>
         <ul id="city">
              <li id="bj" name="beijing"> 北京 </li>
             <li id="tj" name="tianjin"> 天津 </li>
             <li id="cq" name="chongqing"> 重庆 </li>
         </ul>
        
         <p  id="p3">I would like to say: p3</p>
         
         <p  id="p2">I would like to say: p2</p>
        
         <p  id="p1">I would like to say: p1</p>
       
    </body>
<script type="text/javascript">
    // 将 city  插入 到 p2 前或后
    
    var $city = $("#city");
    var $p2 = $("#p2");
    
    
    // 后
//    $p2.after($city);
//    $city.insertAfter($p2);
 
    // 前
//    $p2.before($city);
    $city.insertBefore($p2);
    
</script>
   
</html>

3、删除

empty() 清空标签体

remove() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都会被移除

detach() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都保留

 

l  绑定数据

       data(name) 取得

       data(name,value) 设置 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>05_删除节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    </head>
     
    <body>
         <ul id="city">
              <li id="bj" name="beijing"> 北京 <p> 海淀区 </p></li>
             <li id="tj" name="tianjin"> 天津 <p> 河西区 </p></li>
             <li id="cq" name="chongqing"> 重庆 </li>
         </ul>
        <p class="hello">Hello</p> how are <p>you?</p> 
    </body>
<script type="text/javascript">
    // 将 city 移除，再追加 body 前面
    
    //#1 绑定事件
    $("#city").click(function(){alert("O(∩_∩)O~");
    });
    //#2 绑定数据
    $("#city").data("itheima","就是屌");
    
    
    //1 移除
    var $city = $("#city").remove(); // 移除绑定的事件、移除绑定的数据
//    var $city = $("#city").detach(); // 保留绑定的事件、保留绑定的数据
    
    
    //2 追加
    $("body").append($city);
    
    
    //#3 取得绑定的数据
    alert($("#city").data("itheima"));
 
</script>
   
</html>

4、复制

clone() 克隆

       even：批示事件处理函数是否会被复制。V1.5 以上版本默认值是：false

<body>
        <button class="save"> 保留 </button><br>    
        <p> 段落 </p>
    </body>
    <script type="text/javascript">
        $(".save").click(function(){var $new = $(this).clone(true);
            $("body").append($new);
        });
    </script>

5、替换

A.replaceWith(B)，应用 A 将 B 替换掉

A.replaceAll(B)，应用 B 将 A 替换掉 

<html>
        <p> 段落 </p>
        <p> 段落 </p>
        <p> 段落 </p>
        <button> 保留 </button>
    </html>
<script type="text/javascript">
//    $("p").replaceWith("<a>xxx</a> <br/>");
 
    $("<a>xxx</a> <br/>").replaceAll("p");
</script>

6、包裹

A.wrap(B)，应用 B 将每一个 A 进行包裹（多个 B）

       <B><A></A></B>

       <B><A></A></B>


A.wrapAll(B)，应用 B 将所有 A 进行包裹（一个 B）

       <B>

              <A></A>

              <A></A>

       </B>

A.wrapInner(B) , 应用 B 将每一个 A 的标签体包裹。

       <A><B>。。。</B></A>

       <A><B>。。。</B></A>

A.unwrap()，将 A 的父元素删除，本人留着 

<body>
        <strong title="jQuery">jQuery</strong>
        <strong title="jQuery">jQuery</strong>
    </body>
    <script type="text/javascript">
        // 每一个包
//        $("strong").wrap("<div></div>");
        // 一个包
//        $("strong").wrapAll("<div></div>");
        // 标签体
        $("strong").wrapInner("<div></div>");
    
    </script>
退出移动版