1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jquery核心buildFragment

作者:用户 来源:互联网 时间:2016-08-03 12:25:08

文档类型节点碎片处理buildfragmentcreateDocumentFragment文档碎片

jquery核心buildFragment - 摘要: 本文讲的是jquery核心buildFragment, 核心buildFragment DOM原生的接口是即简单又单一,参数类型确定,也不会重载,每次只会处理一个元素。在看jQuery完全反其道而行之参数复杂多

核心buildFragment

DOM原生的接口是即简单又单一,参数类型确定,也不会重载,每次只会处理一个元素。在看jQuery完全反其道而行之参数复杂多样,接口重载厉害。如果一次传递N多的节点元素那么在处理上要优化就必须引入文档碎片了。 我们知道用文档碎片无非就是先创建: fragment = context.createDocumentFragment() 然后把所有需要处理的dom节点给appendChild进去: buildFragment对于文档碎片的创建,可以看到被切分了2个部分: 先看第一部分代码,收集节点元素:

  1. var $newdiv1 = $('<div id="object1"/>'), 
  2.     newdiv2 = document.createElement('div'), 
  3.     existingdiv1 = document.getElementById('foo'); 
  4. $('body').append($newdiv1, [newdiv2, existingdiv1,'<td>爱思资源网</td>','文本','<script>alert(1)']) 
这段代码包含了六种不同的类型的参数,基本覆盖了所有了buildFragment的处理其实很简单,我们只需要把不同类型的参数分解后,压入到文档碎片就可以了,当然因为类型的不同处理的方式也有不同。
  比如常见的几个问题: IE对字符串进行trimLeft操作,其余是用户输入处理, 很多标签不能单独作为DIV的子元素, td、th、tr、tfoot、tbody等等,需要加头尾: <td>爱思资源网</td> jQuery通过wrapMap转化成,否则有些会当成普通文本来解释: "<table><tbody><tr><td>爱思资源网</td></tr></tbody></table>"
  我们参考右边的代码,整个流程如下:  分解类型,jQuery对象,节点对象,文本,字符串,脚本  引入nodes收集各种分解的类型数据  针对html节点,兼容IE的处理,先过滤空白,然后补全tr,td等  创建文档碎片的div包含节点,把html结构给innerHTML进去  取出创建的节点,jQuery.merge(nodes, tmp.childNodes),因为靠div包装过

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索文档 , 类型 , 节点 , 碎片 , 处理 , buildfragment , createDocumentFragment 文档碎片 jquery buildfragment、buildfragment、jquery fragment、jquery weui build、jquery slim build,以便于您获取更多的相关知识。

手机-使用bootstrap后jQuery弹出框问题

问题描述 使用bootstrap后jQuery弹出框问题 原来使用的是jQuery的$message.confirm弹出框没有问题,引入bootstrap后,手机端的弹出框会出现一块阴影部分,是怎么回事!如图左上角阴影图片说明 ...

jQuery3.0中的buildFragment私有函数详解_jquery

...支持,一款来自俄罗斯的浏览器。 下面看下jQuery3.0中的buildFragment。 在 jQuery3.0中,buildFragment 是一个私有函数,用来构建一个包含子节点 fragment 对象。这个 fragment 在 DOM1 中就已经有了,所有浏览器都支持。当频繁操作(添加、插...

jquery学习笔记1

jQuery设计理念 ajax链式操作 var jqxhr = $.ajax( "example.php" ).done(function() { alert("success"); }).fail(function() { alert("error"); }).always(function() { alert("complete"); }); 页面元素操作 $("p").removeClass("myClass noClass").addClass("yourClass");$("ul li:last").addClass(funct...

由浅入深学习ajax跨域(JSONP)问题

什么是跨域。说直白点就是获取别人网站上的内容。但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子。 来看看跨域的例子,jquery+ajax是不能跨域请求的,因为受到浏览器的同源策...

JQuery源码分析-转载

...作核心 - domManip jQuery源码分析系列(24) : DOM操作核心 – buildFragment jQuery源码分析系列(25) : DOM操作方法(一) jQuery源码分析系列(26) : DOM操作方法(二)html,text,val jQuery源码分析系列(27) : 样式操作 – CSS jQuery源码分析系列(28) : ...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备