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移除带事件



1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         div{
11             height:250px;
12             background: #ccc;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <p>000000000001</p>
19     <p>000000000002</p>
20     <p>000000000003</p>
21     <p>000000000004</p>
22     <p>000000000005</p>
23 </body>
24 <script>
25 $('p').click(function(){
26     obj=$(this).detach();
27     $('body').append(obj);
28 });
29 
30 </script>
31 </html>


clone和cloneTrue对象克隆



1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         div{
11             background: #ccc;
12         }
13     </style>
14     <script src="jquery.js"></script>
15 </head>
16 <body>
17     <div>
18         <img src="a.png" alt="">
19     </div>
20 </body>
21 <script>
22 $('img').click(function(){
23     // $(this).after($(this).clone());
24     $(this).after($(this).clone(true));
25 });
26 </script>
27 </html>


prepend和prependTo前缀加



1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         div{
11             height:250px;
12             background: #ccc;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <div class="div1">
19         <h1>00000001</h1>
20         <h1>00000002</h1>
21         <h1>00000003</h1>
22         <h1>00000004</h1>
23     </div>    
24     <hr>
25     <div class="div2">
26         
27     </div>
28 </body>
29 <script>
30 $('.div1 h1').click(function(){
31     // $('.div2').prepend($(this));
32     $(this).prependTo('.div2');
33 });
34 </script>
35 </html>