为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
jQuery基础(二)—DOM篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • jQuery提供了一个unwarp()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
    查看全部
  • .wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构 wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法
    查看全部
  • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别 .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 .replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用 返回的jQuery对象引用的是被删除的节点,而不是通过replaceWith/replaceAll方法替换的节点
    查看全部
  • .clone()方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点 。clone方法比较简单的就是克隆节点,如果节点有事件或者数据之类的其他处理,我们需要通过clone(true)传递一个布尔值true用来指定,这样不仅仅是克隆单词的节点结构,还要把附带的事件与数据给一并克隆了 [ 查看全文 ]
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2016-04-21

  • 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据 detach:移除节点 移除的处理与remove一致 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
    查看全部
  • $('div').detach():仅仅是显示效果没有了,但是内存中还是存在的,当你append之后,又重新回到了文档流中,就又显示出来了。
    查看全部
  • empty()是清空节点内的内容而已,不清楚节点 remove()是把节点带节点内部内容一起删除。
    查看全部
  • remove()的有参用法和无参用法 remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。 例如一段节点,绑定点击事件 <div class="hello"><p>慕课网</p></div> $('.hello').on("click",fn) 如果不通过remove方法删除这个节点其实也很简单,但是同时需要把事件给销毁掉,这里是为了防止"内存泄漏",所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁 通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果:<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁 remove表达式参数: remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点 我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理 对比右边的代码区域,我们可以通过类似于这样处理 $("p").filter(":contains('3')").remove()
    查看全部
  • empty()的基本用法 要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML: <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中 //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div> 可以参考右边的代码区域: 通过empty移除了当前div元素下的所有p元素 但是本身id=test的div元素没有被删除
    查看全部
  • 外部插入insertAfter()与insertBefore()<br> insertBefore在目标元素前面插入集合中每个匹配的元素<br> insertAfter在目标元素后面插入集合中每个匹配的元素。<br> before()和.insertBefore()实现同样的功能,主要区别是语法——内容和目标的位置。对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()则刚好相反,内容在方法前面,它将被放在参数里元素的前面。<br> .after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。对于after()选择表达式在函数的前面,参数是将要插入的内容,对于.insertAfter(),刚刚相反,内容在方法的前面,它将被放在参数的后面。<br> before、after与insertBefore,insertAfter的除了目标与位置的不同外,后面的不支持多参处理。<br> 注意事项: insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入; insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
    查看全部
  • 内部插入prepend()与prependTo() prepend()方法将指定的元素插入到匹配的元素里面作为它的第一个子元素(如果要作为最后一个子元素插入用.append()) prepend()和prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同 对于.prepend()而言,选择器表达式卸载方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数 而.prependTo()正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建
    查看全部
  • 外部插入after()与before() before与after都是用来相对相中元素外部增加相邻的兄弟节点 2个方法都是可以接收HTML字符串,DOM元素,元素数组,或者JQUERY对象,用来插入到结合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2)
    查看全部
  • 内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存在内存中,最终我们要放到页面文档并呈现出来。 append(content)每个匹配的元素内部追加内容 appendTo(content) 把所有匹配的元素追加到另一个,指定的元素的集合当中。 append这个操作与对指定的元素执行原生的appendChild方法,将他们添加到文档中的情况类似。 appendTo实际上,使用这个方法时颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中 简单的总结就是:.append()和.appendTo两种方法功能相同,主要的不同就是语法——内容和目标的位置不同。
    查看全部
  • jquery节点创建与属性的处理 创建元素节点 $("<div></div>") 创建文本节点 与创建元素节点类似,可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 创建属性节点 与创建元素节点同样的方式 $("<div id='test' class='aaron'>我是文本节点</div>")
    查看全部
  • 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的语法 2、jQuery节点操作
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!