慕课网

Wendy_22

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了例如： HTML部分 <div></div> JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆使用上就是这样简单，使用克隆的我们需要额外知道的细节： clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上 clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

查看全部

0 采集收起来源：DOM拷贝clone()

2018-03-22

Wendy_22

方法名参数事件及数据是否也被移除元素自身是否被移除 remove 支持选择器表达是是（无参数时），有参数时要根据参数所涉及的范围 detach 参数同remove 否情况同remove remove：移除节点无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据 detach：移除节点移除的处理与remove一致与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别

2018-03-22

Wendy_22

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理 detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。来看看jquery官方文档的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()

2018-03-22

Wendy_22

empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，删除指定合集中的元素

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别

2016-10-21

Wendy_22

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果：<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁 remove表达式参数： remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理对比右边的代码区域，我们可以通过类似于这样处理 $("p").filter(":contains('3')").remove()

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法

2018-03-22

Wendy_22

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML： <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中 //通过empty处理 $('.hello').empty() //结果：<p>慕课网</p>被移除 <div class="hello"></div>

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法

2018-03-22

Wendy_22

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理注意事项： insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入； insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()

2016-10-21

weibo_本宫li不矫情

结合编辑的带代码记忆 DOM创建节点及节点属性创建流程比较简单，大体如下： 1 创建节点(常见的：元素、属性和文本) 2 添加节点的一些属性 3加入到文档中流程中涉及的一点方法：创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild

查看全部

0 采集收起来源：DOM创建节点及节点属性

2016-10-23

weibo_本宫li不矫情

jQuery将复杂的DOM操作简单化，更加专注于业务逻辑的开发其中dom操作有：查找节点、删除节点、插入节点、替换节点、复制节点、包裹节点

查看全部

0 采集收起来源：jQuery基础(二)—DOM篇课程介绍

2016-10-21

白二的诗

DOM包裹wrapInner()方法如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法 .wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构听起来有点绕，可以用个简单的例子描述下，简单的看一段代码： <p>p元素</p> <p>p元素</p> 给所有p元素增加一个div包裹 $('p').wrapInner('<div></div>') 最后的结构，匹配的p元素的内部元素被div给包裹了 <p> <div>p元素</div> </p> <p> <div>p元素</div> </p> .wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容以上面案例为例， $('p').wrapInner(function() { return '<div><div/>'; }) 以上的写法的结果如下，等同于第一种处理了 <p> <div>p元素</div> </p> <p> <div>p元素</div> </p 注意：当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

查看全部

0 采集收起来源：DOM包裹wrapInner()方法

2018-03-22

白二的诗

DOM包裹wrapAll()方法简单的看一段代码： <p>p元素</p> <p>p元素</p> 给所有p元素增加一个div包裹 $('p').wrapAll('<div></div>') 最后的结构，2个P元素都增加了一个父div的结构 <div> <p>p元素</p> <p>p元素</p> </div> .wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象通过回调的方式可以单独处理每一个元素以上面案例为例， $('p').wrapAll(function(){ return '<div><div/>'; }) 以上的写法的结果如下，等同于warp的处理了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div>

查看全部

0 采集收起来源：DOM包裹wrapAll()方法

2018-03-22

白二的诗

DOM包裹unwrap()方法 jQuery提供了一个unwarp()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。看一段简单案例： <div> <p>p元素</p> </div> 我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法 $('div').remove(); 但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwarp方法很方便的处理了这个问题 $('p').unwarp(); 找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了结果： <p>p元素</p>

查看全部

0 采集收起来源：DOM包裹unwrap()方法

2018-03-22

白二的诗

DOM包裹wrap()方法简单的看一段代码： <p>p元素</p> 给p元素增加一个div包裹 $('p').wrap('<div></div>') 最后的结构，p元素增加了一个父div的结构 <div> <p>p元素</p> </div>

查看全部

0 采集收起来源：DOM包裹wrap()方法

2018-03-22

白二的诗

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合 .replaceAll( target ) ：用集合的匹配元素替换每个目标元素 .replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理功能一样，只不过是selector和content互换的，其实记住replaceWith就可以了 .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()

2016-10-21

白二的诗

DOM拷贝clone() .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上 clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

查看全部

0 采集收起来源：DOM拷贝clone()

2016-10-21