博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery学习笔记 - DOM操作
阅读量:5011 次
发布时间:2019-06-12

本文共 1375 字,大约阅读时间需要 4 分钟。

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

你可能感兴趣的文章
新博客牵至简书
查看>>
矩阵求逆
查看>>
在 Windows 8、Windows 10 桌面模式下的 .NET Framework 程序中,引用 Windows.Runtime 的 API。...
查看>>
2015 8月24号 工作计划与实行
查看>>
MVC AJAX
查看>>
Google Map API V3开发(6) 代码
查看>>
Kafka初入门简单配置与使用
查看>>
第三章Git使用入门
查看>>
Amd,Cmd, Commonjs, ES6 import/export的异同点
查看>>
cocos2dx-Lua与Java通讯机制
查看>>
上下文管理器之__enter__和__exit__
查看>>
android3.2以上切屏禁止onCreate()
查看>>
winform文件迁移工具
查看>>
delphi DCC32命令行方式编译delphi工程源码
查看>>
paip.输入法编程----删除双字词简拼
查看>>
or1200下raw-os学习(任务篇)
查看>>
ZOJ - 3939 The Lucky Week(日期循环节+思维)
查看>>
小花梨的取石子游戏(思维)
查看>>
Ubuntu 18.04安装arm-linux-gcc交叉编译器
查看>>
.net core i上 K8S(一)集群搭建
查看>>