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