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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • unwrap()方法:作用与wrap()方法是相反的,将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。 如:<div><p>p元素</p></div>使用$('div').unwarp();结果为<p>p元素</p>
    查看全部
  • DOM包裹wrap()方法 .wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构 如:<p>p元素</p> $('p').wrap('<div></div>') 结果:<div><p>p元素</p></div> .wrap(function):一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象 如:$('p').wrap(function() { //结果与第一种类似,只是写法不一样 return '<div></div>'; }) 注意事项: .wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
    查看全部
  • DOM替换replaceWith()和replaceAll() .replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合; .replaceAll( target ) :用集合的匹配元素替换每个目标元素 用法: 目标对象.replaceWith(替换内容); 替换内容.replaceAll(目标对象); 总结: 1、.replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别 2、.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 3、.replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用 4、.replaceWith()方法返回的jQuery对象引用的是替换前的节点,而不是通过replaceWith/replaceAll方法替换后的节点
    查看全部
  • .clone()方法:复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点,如果节点有事件或者数据之类的其他处理,需要使用clone(ture)不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆 注意事项: 1、clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色; 2、通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上; 3、clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据; 4、元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享;
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2016-10-08

  • detach()和remove()区别: remove:移除节点 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据 detach:移除节点 移除的处理与remove一致 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
    查看全部
  • 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部
  • detach()方法:让一个web元素托管,即从当前页面中移除该元素,但会保留这个元素的数据和事件等,通过append()可将该元素重新添加。 由于detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据。
    查看全部
  • empty和remove区别: empty方法: 1、严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点 2、empty不能删除自己本身这个节点 remove方法: 1、该节点与该节点所包含的所有后代节点将同时被删除 2、提供传递一个筛选的表达式,删除指定合集中的元素
    查看全部
  • remove会将元素自身以及元素内部的一切,包括绑定的事件、相关的jQuery数据都移除。 remove表达式参数: remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点。
    查看全部
  • empty()方法:移除指定元素中的所有子节点,及其子节点的后代元素包括文本。 如:<div class="hello"><p>慕课网</p></div> //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div>
    查看全部
  • 最终总结: 内部插入,添加父子关系: 解释: append()和appendTo():追加内容,添加的内容总是在目标元素内的后面 prepend()和prependTo():前置内容,添加的内容总是在目标元素内的前面 使用: append()和prepend():目标对象.append或prepend(插入内容) appendTo()和prependTo():插入内容.appendTo或prependTo(目标对象) 外部插入,添加兄弟关系: 解释: before()和insertBefore():添加内容,在目标对象前添加相邻元素 after()和insertAfter():添加内容,在目标对象后添加相邻元素 使用: before()和after():目标对象.before或after(插入内容) insertBefore()和insertAfter():插入内容.insertBefore或insertAfter(目标对象)
    查看全部
  • 外部插入: insertBefore()和insertAfter()不支持多参数处理 注意事项: 1、insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入; 2、insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入; before()和after()目标对象在前,插入内容在后 insertBefore()和insertAfter()插入内容在前,目标对象在后
    查看全部
  • 内部插入: prepend():向元素内部前置内容; prependTo():把内容前置到指定的元素内部。 prepend()与prependTo()的使用及区别: 1、.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()); 2、.prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同; 3、对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数; 4、而.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。 内部操作四个方法的区别: 1、append()向每个匹配的元素内部追加内容 2、prepend()向每个匹配的元素内部前置内容 3、appendTo()把所有匹配的元素追加到另一个指定元素的集合中 4、prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • 外部插入: after(content):在元素后面插入参数所指定的内容,作为其兄弟节点; before(content):在元素的前面插入内容,作为其兄弟节点。 1、before与after都是用来对选中元素外部增加相邻的兄弟节点; 2、2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面; 3、2个方法都支持多个参数传递after(div1,div2,....)。 注意点: 1、after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入; 2、before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入。
    查看全部
  • 内部插入: .append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同 append()前面是被插入的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是被插入的对象
    查看全部

举报

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

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