Jquery学习笔记 - DOM操作

jQuery的DOM操作方法均由原生方法appendChild和insertBefore拓展而来

　　1.jQuery.fn.append <---> this.appendChild(ele)

　　2.jQuery.fn.prepend <---> this.insertBefore(ele, this.firstChild)

　　3.jQuery.fn.before <---> this.parentNode.insertBefore(ele, this)

　　4.jQuery.fn.after <---> this.parentNode.insertBefore(ele, this.nextSibling)

　　5.jQuery.fn.replaceWith <---> this.parentNode.insertBefore(ele, this.nextSibling)

 

特殊情况下，略~；正常情况下，向函数传入了节点，需要jQuery构建文档碎片，其中<script>节点需要在加载完后执行，步骤如下

　　1.构建文档碎片，fragment=jQuery.buildFragment......，并分离出其中的script节点

　　2.将文档碎片插入页面，执行script

 

还有其他的辅助操作

　　1.test：测试传入内容的有无并创建相应的节点

　　2.html：优先使用innerHtml插入节点，备用方法append

　　3.wrapAll：将指定节点包裹起来，用前后插入法产生包裹节点

　　4.wrapInner：包裹匹配元素子节点，原理类似，但是先用jQuery(this).contents()，获得子节点

　　5.wrap：针对多个匹配节点分别使用wrapAll

　　6.unwrap：显然~

　　7.remove：同时会移去与元素相关的data()数据和事件处理器等，先调用cleadData()再removeChild()

　　8.detach：简单版本的remove，只会移除节点，不移除数据

　　9.empty：清除节点内数据，cleanData()，removeChild(ele.firstChild)

　　10.clone：克隆节点，重要功能

 

重要的clone操作：当一个产生的节点被多次使用时，其位置只会在最后一次移动的位置，所以需要节点克隆，克隆返回一个元素副本的集合，并可以选择是否克隆附加数据和绑定事件！

　　jQuery.fn.clone：function(withDataAndEvents, deepDataAndEvents)

　　方法优先调用ele.cloneNode(true)；els先获取元素的outerHTML再取其firstChild；

　　之后克隆数据，针对IE有特别优化，详情再参考里~，后面有点看不懂了

 

 

参考：http://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-DOM-Manip.html

　　　http://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-DOM-Manip2.html

转载于:https://www.cnblogs.com/KEVIN--LEE/p/8260154.html