zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    Python解释器
    js子节点children和childnodes的用法
    添加jar包需注意
    Class.forName("com.mysql.jdbc.driver");
    java集合类总结
    interface思考练习一
    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
    Struts2的配置文件中, <package>的作用,<action><result>重名?
    在Struts2的Action中获得request response session几种方法
    学习一直都是一个相见恨晚的过程,我希望我的相见恨晚不会太晚。
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9222918.html
Copyright © 2011-2022 走看看