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

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             background: #ccc;margin-top: 5px;width: 150px;

         }

         .orange{background: orange}

         div{

             background: green;

             width: 20px;height: 20px;

             display: inline-block;

         }

     </style>

 </style>

 </head>

 <body>

 <div id="div1"></div>

     <ol>

         <li>列表项</li>

         <li>列表项</li>

         <li>列表项</li>

     </ol>

     <input id="btn1" type="button" value="节点插入1">

     <input id="btn2" type="button" value="节点插入2">

     <input id="btn3" type="button" value="节点插入3">

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 //创建节点 '$()方法'创建节点

                 //var $li=$('<li></li>')

                 //var $li=document.createElement('li')

                 var $li=$('<li class="orange"></li>')

                 $('ol').append($li)

             })

             $('#btn2').click(function(){

                 $('li').append(function(index,html){

                     return '<div>'+index+'</div>'+html

                 })

             })

             $('#btn3').click(function(){

                 $('li').append($('#div1'))

             })

         })

     </script>

 </body>

 </html>

代码9-10

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             background: #ccc;margin-top: 5px;width: 150px;

         }

         .orange{background: orange}

         div{

             background: green;

             width: 20px;height: 20px;

             display: inline-block;

         }

     </style>

 </style>

 </head>

 <body>

 <div id="div1"></div>

     <ol>

         <li>列表项</li>

         <li>列表项</li>

         <li>列表项</li>

     </ol>

     <input id="btn1" type="button" value="节点插入1">

     <input id="btn2" type="button" value="节点插入2">

     <input id="btn3" type="button" value="节点插入3">

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 var $li=$('<li class="orange"></li>')

                 //$('ol').append($li)

                 //$($li).appendTo('ol')

                 //$('ol').prepend($li)

                 $($li).prependTo('ol')

             })

             $('#btn2').click(function(){

                 // $('li').append(function(index,html){

                 //     return '<div>'+index+'</div>'+html

                 // })

                 $('li').prepend(function(index,html){

                     return '<div>'+index+'</div>'

                 })

             })

             $('#btn3').click(function(){

                 //$('li').append($('#div1'))

                 //$($('#div1')).appendTo($('li'))

                 //$('li').prepend($('#div1'))

                 $($('#div1')).prependTo($('li'))

             })

         })

     </script>

 </body>

 </html>

代码9-11

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             background: #ccc;margin-top: 25px;width: 150px;

         }

         .orange{background: orange}

     </style>

 </style>

 </head>

 <body>

 <div id="div1"></div>

     <ol>

         <li>列表项</li>

         <li>列表项</li>

         <li>列表项</li>

         <li>列表项</li>

     </ol>

     <input id="btn1" type="button" value="after">

     <input id="btn2" type="button" value="before">

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 var $li=$('<li class="orange">我是新添加的</li>')

                 //$('li').append($li)

                 //$('li:nth-child(2)').append($li)

                 //$('li:nth-child(2)').after($li)

                 // $('li:nth-child(2)').after(function(){

                 //     return '<li class="orange">我是新添加的</li>'

                 // })

                 $($li).insertAfter('li:nth-child(2)')

             })

             $('#btn2').click(function(){

                 var $li=$('<li class="orange">我是新添加的</li>')

                 //$('li:nth-child(2)').before($li)

                 //     $('li:nth-child(2)').before(function(){

                 //     return '<li class="orange">我是新添加的</li>'

                 // })

                 $($li).insertBefore('li:nth-child(2)')

             })

         })

     </script>

 </body>

 </html>
 
 

js进阶 11-9/10/11 jquery创建和插入节点的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  3. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  4. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  5. js进阶 12-5 jquery中表单事件如何使用

    js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...

  6. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  7. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  8. iOS冰与火之歌(番外篇) - 基于PEGASUS（Trident三叉戟）的OS X 10.11.6本地提权

    iOS冰与火之歌(番外篇) 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权 蒸米@阿里移动安全 0x00 序 这段时间最火的漏洞当属阿联酋的人权活动人士被apt攻击所使用 ...

  9. 战神Z7 D2安装黑苹果OS X El Capitan 10.11.2

    安装之初状态:两块硬盘,都是MBR格式分区,一块是机械硬盘,安装了WIN7 32位和Linux,一块是SSD,安装的是WIN7 64位与WIN10 64位以前玩过Mavericks,安装的就是在硬盘的 ...

随机推荐

  1. 一句SQL按照某个字段数值拆分出对应的数据条数，借助数据库常量表【master..spt_values】实现

    简介:master..spt_values,数据行拆分简单小技巧 SELECT ProjGUID , CostGUID , SUM(FtAmount) AS FtAmount , BeginMonth ...

  2. 轻松学习Linux之Shell预定义变量

    本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  3. 通俗理解vuex原理---通过vue例子类比

    本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...

  4. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  5. eclipse中导入zico Maven项目

    zico源代码地址:https://github.com/jitlogic/zico 简单的说,git上同步的源代码需要先进行maven编译,然后导入eclipse. 如果没有配置好maven,请参考 ...

  6. .condarc（conda 配置文件）

    Configuration - Conda documentation .condarc以点开头,一般表示 conda 应用程序的配置文件,在用户的家目录(windows:C:\\users\\use ...

  7. 28. Spring Boot配置方式

    转自:https://blog.csdn.net/webzhuce/article/details/54564019

  8. Sql Server服务 远程过程调用失败

    问题: 今天SQL数据库登录不上了,然后想启动Sql实例,却发现如下问题(配置环境:win7旗舰版x64,SqlServer2008R2,同时安装VS2012): 以前出现过这个问题,那时候是因为把实 ...

  9. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  10. CodeVs——T 4919 线段树练习4

    http://codevs.cn/problem/4919/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...