jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
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>