zoukankan      html  css  js  c++  java

  • js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点

    一、总结

    一句话总结：

    1、jquery插入节点8个方法？

    内部之前，内部之后，之前，之后；各两个

    • append()和appendTo()
      • append() 方法在被选元素的结尾插入指定内容。

        语法1：$(selector).append(content)

        语法2：$(selector).append(function(index,html))

      • appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。

        语法：$(content).appendTo(selector)

        append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

    • prepend()和prependTo()
      • prepend(),prependTo() 方法在被选元素的开头（内部）插入指定内容。
      • 使用方法和appendTo()，append()类似
    • before()和insertBefore()
      • before(content|fn):在每个匹配的元素之前插入内容。
      • insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
    • after()和insertAfter()
      • after(content|fn):在每个匹配的元素之后插入内容。
      • insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

    2、jquery创建节点方法？

    $(html) 如：$("< li >< /li >")

    36                 //var $li=$('<li></li>')
37                 //var $li=document.createElement('li')

    3、append() 和 appendTo()的区别和联系？

    append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

    二、jquery创建和插入节点

    1、相关知识

    DOM操作

    DOM操作是jQuery核心内容之一，在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

    我们之前学习了html(),text()方法为文档添加新的内容，但是更多时候我们需要在现有内容之上增加或修改某些内容，这就要用到我们接下来要讲的节点操作。

    1. 创建节点：$(html) 如：$("< li >< /li >")
    2. 插入节点
      • append()和appendTo()
        • append() 方法在被选元素的结尾插入指定内容。

          语法1：$(selector).append(content)

          语法2：$(selector).append(function(index,html))

        • appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。

          语法：$(content).appendTo(selector)

          append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

      • prepend()和prependTo()
        • prepend(),prependTo() 方法在被选元素的开头（内部）插入指定内容。
        • 使用方法和appendTo()，append()类似
      • before()和insertBefore()
        • before(content|fn):在每个匹配的元素之前插入内容。
        • insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
      • after()和insertAfter()
        • after(content|fn):在每个匹配的元素之后插入内容。
        • insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    3. 删除节点
      1. remove():删除匹配的元素集合中所有的子节点。

        绑定的事件，附加的数据等都会被移除。

      2. detach():从DOM中删除所有匹配的元素。

        与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

      3. empty():删除匹配的元素集合中所有的子节点。

        remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。

    4. 复制节点

      语法：$(selector).clone(includeEvents)includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。

    5. 包裹节点:
      • wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
      • wrapAll():将所有匹配的元素用单个元素包裹起来
      • unwrap():移出元素的父元素。
      • wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
    6. 替换节点
      • replaceWith():用指定的 HTML 内容或元素替换被选元素。
      • replaceAll():用指定的 HTML 内容或元素替换被选元素。

        replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

    7. 遍历节点:each()

      在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。

      语法：$(selector).each(function(index))

    2、代码

    代码9-9

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             background: #ccc;margin-top: 5px;width: 150px;
12         }
13         .orange{background: orange}
14         div{
15             background: green;
16             width: 20px;height: 20px;
17             display: inline-block;
18         }
19     </style>
20 </style>
21 </head>
22 <body>
23 <div id="div1"></div>
24     <ol>
25         <li>列表项</li>    
26         <li>列表项</li>
27         <li>列表项</li>
28     </ol>
29     <input id="btn1" type="button" value="节点插入1">
30     <input id="btn2" type="button" value="节点插入2">
31     <input id="btn3" type="button" value="节点插入3">
32     <script type="text/javascript">
33         $(function(){
34             $('#btn1').click(function(){
35                 //创建节点 '$()方法'创建节点
36                 //var $li=$('<li></li>')
37                 //var $li=document.createElement('li')
38                 var $li=$('<li class="orange"></li>')
39                 $('ol').append($li)
40             })
41 
42             $('#btn2').click(function(){
43                 $('li').append(function(index,html){
44                     return '<div>'+index+'</div>'+html
45                 })
46             })
47 
48             $('#btn3').click(function(){
49                 $('li').append($('#div1'))
50             })
51         })
52     </script>
53 </body>
54 </html>

    代码9-10

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             background: #ccc;margin-top: 5px;width: 150px;
12         }
13         .orange{background: orange}
14         div{
15             background: green;
16             width: 20px;height: 20px;
17             display: inline-block;
18         }
19     </style>
20 </style>
21 </head>
22 <body>
23 <div id="div1"></div>
24     <ol>
25         <li>列表项</li>    
26         <li>列表项</li>
27         <li>列表项</li>
28     </ol>
29     <input id="btn1" type="button" value="节点插入1">
30     <input id="btn2" type="button" value="节点插入2">
31     <input id="btn3" type="button" value="节点插入3">
32     <script type="text/javascript">
33         $(function(){
34             $('#btn1').click(function(){
35                 var $li=$('<li class="orange"></li>')
36                 //$('ol').append($li)
37                 //$($li).appendTo('ol')
38                 //$('ol').prepend($li)
39                 $($li).prependTo('ol')
40             })
41 
42             $('#btn2').click(function(){
43                 // $('li').append(function(index,html){
44                 //     return '<div>'+index+'</div>'+html
45                 // })
46                 $('li').prepend(function(index,html){
47                     return '<div>'+index+'</div>'
48                 })
49             })
50 
51             $('#btn3').click(function(){
52                 //$('li').append($('#div1'))
53                 //$($('#div1')).appendTo($('li'))
54 
55                 //$('li').prepend($('#div1'))
56                 $($('#div1')).prependTo($('li'))
57             })
58         })
59     </script>
60 </body>
61 </html>

    代码9-11

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             background: #ccc;margin-top: 25px;width: 150px;
12         }
13         .orange{background: orange}
14     </style>
15 </style>
16 </head>
17 <body>
18 <div id="div1"></div>
19     <ol>
20         <li>列表项</li>    
21         <li>列表项</li>
22         <li>列表项</li>
23         <li>列表项</li>
24     </ol>
25     <input id="btn1" type="button" value="after">
26     <input id="btn2" type="button" value="before">
27     <script type="text/javascript">
28         $(function(){
29             $('#btn1').click(function(){
30                 var $li=$('<li class="orange">我是新添加的</li>')
31                 //$('li').append($li)
32                 //$('li:nth-child(2)').append($li)
33                 //$('li:nth-child(2)').after($li)
34                 // $('li:nth-child(2)').after(function(){
35                 //     return '<li class="orange">我是新添加的</li>'
36                 // })
37                 $($li).insertAfter('li:nth-child(2)')
38             })
39             $('#btn2').click(function(){
40                 var $li=$('<li class="orange">我是新添加的</li>')
41                 //$('li:nth-child(2)').before($li)
42                 //     $('li:nth-child(2)').before(function(){
43                 //     return '<li class="orange">我是新添加的</li>'
44                 // })
45                 $($li).insertBefore('li:nth-child(2)')
46         
47             })
48         })
49     </script>
50 </body>
51 </html>
     
     
  • 相关阅读:
    Java 设计模式——状态模式
    Java 设计模式——外观模式
    Java高级之虚拟机加载机制
    17.1.1.6 Creating a Data Snapshot Using Raw Data Files 创建一个数据快照使用 Raw Data Files
    17.1.1.5 Creating a Data Snapshot Using mysqldump
    17.1.1.4 Obtaining the Replication Master Binary Log Coordinates 得到复制master binary log 位置:
    17.1.1.3 Creating a User for Replication 创建一个用于用于复制:
    17.1.1.2 Setting the Replication Slave Configuration
    17.1.1.1 Setting the Replication Master Configuration 设置复制的master 配置:
    17.1.1 How to Set Up Replication 设置复制:
  • 原文地址：https://www.cnblogs.com/Renyi-Fan/p/9211605.html
Copyright © 2011-2022 走看看