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>