码迷,mamicode.com
首页 > Web开发 > 详细

JQuery学习笔记 - DOM操作

时间:2018-01-10 20:21:34      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:script   app   clone   jquery学习   ...   www.   节点   子节点   pen   

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操作

标签:script   app   clone   jquery学习   ...   www.   节点   子节点   pen   

原文地址:https://www.cnblogs.com/KEVIN--LEE/p/8260154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!