JQuery学习笔记 - DOM操作

Posted kevin--lee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于JQuery学习笔记 - DOM操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery学习笔记DOM操作之替换节点方法

jQuery学习笔记--jQuery对象与DOM对象相互转换

jQuery学习笔记:入门

jQuery学习笔记:入门

如鹏网学习笔记JQuery

jQuery学习笔记