jquery-7 jquery中的文档处理方法有哪些（方法的参数表示功能增强）

一、总结

一句话总结：多看参考文档，多看主干目录。一般的功能分两个方法来实现，一个对应标签，一个对应标签和事情，比如克隆，一个是只克隆标签，一个不仅克隆标签还克隆方法。

1、jquery中功能如何实现（从标签和事件两部分回答）？

一般的功能分两个方法来实现，一个对应标签，一个对应标签和事情，比如克隆，一个是只克隆标签，一个不仅克隆标签还克隆方法。

比如empty和detach方法，比如clone和clone(true)

23     // $(this).after($(this).clone());
24     $(this).after($(this).clone(true));

2、jquery中的文档处理分为哪六类？

内部追加（前后），外部追加（前后），包围（内外全），替换，删除（文本，标签，标签+事件），复制（标签，对象）

3、jquery中的文档处理中的内部追加函数有哪四个（分前后）？

append();
appendTo()
prepend();
prependTo();

31     // $('.div2').prepend($(this));
32     $(this).prependTo('.div2');

4、jquery中的文档处理中的外部插入函数有哪些？

after();
before();
insertAfter();
insertBefore();

5、jquery中的文档处理中的包围函数有哪些？

wrap();
wrapInner();
wrapAll();

6、jquery中的文档处理中的替换函数有哪些？

replaceWith();
replaceAll();

7、jquery中的文档处理中的删除函数有哪些？

empty();
remove();
detach();

25 $('p').click(function(){
26     obj=$(this).detach();
27     $('body').append(obj);
28 });

8、jquery中的文档处理中的复制函数有哪些？

clone();
clone(true);

22 $('img').click(function(){
23     // $(this).after($(this).clone());
24     $(this).after($(this).clone(true));
25 });

二、jquery中的文档处理方法有哪些

1、相关知识

文档处理:
1.内部缀加
append();
appendTo()
prepend();
prependTo();

2.外部插入
after();
before();
insertAfter();
insertBefore();

3.包围
wrap();
wrapInner();
wrapAll();

4.替换
replaceWith();
replaceAll();

5.删除
empty();
remove();
detach();

6.复制
clone();
clone(true);

2、代码

detach移除带事件

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         div{
             height:250px;
             background: #ccc;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <p>000000000001</p>
     <p>000000000002</p>
     <p>000000000003</p>
     <p>000000000004</p>
     <p>000000000005</p>
 </body>
 <script>
 $('p').click(function(){
     obj=$(this).detach();
     $('body').append(obj);
 });
 
 </script>
 </html>

clone和cloneTrue对象克隆

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         div{
             background: #ccc;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div>
         <img src="a.png" alt="">
     </div>
 </body>
 <script>
 $('img').click(function(){
     // $(this).after($(this).clone());
     $(this).after($(this).clone(true));
 });
 </script>
 </html>

prepend和prependTo前缀加

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         div{
             height:250px;
             background: #ccc;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div class="div1">
         <h1>00000001</h1>
         <h1>00000002</h1>
         <h1>00000003</h1>
         <h1>00000004</h1>
     </div>
     <hr>
     <div class="div2">
 
     </div>
 </body>
 <script>
 $('.div1 h1').click(function(){
     // $('.div2').prepend($(this));
     $(this).prependTo('.div2');
 });
 </script>
 </html>