经JS操作DOM节点可以是节点的单位,让我们连接节点,能够createElement,createTextNode,然后，appendChild定在一起,然后再用appendChild或insertBefor加入到DOM树中.但假设要往DOM树中动态加入大量的节点.就会非常麻烦.并且每次都会刷新DOM。造成性能上的缺陷。

解决方法是使用文档碎片这种方法创建文档碎片。

我个人认为应该把这个翻译成文档片段比較合适。

使用jQuery解决方式。

<span style="font-family:FangSong_GB2312;font-size:18px;"><html>

<head>

	<title></title>

</head>

<body>

<ul>

</ul>

<script type="text/javascript" 	src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

	var arr = ["baidu","sina","telcent","ali"];

	var fragment = document.createDocumentFragment();

	$.each(arr,function(i,item){

		var newItem = $("<li>"+item+"</li>")[0];

		fragment.appendChild(newItem);

	});

	$("ul")[0].appendChild(fragment);

</script>

</body>

</html></span>

也能够使用以下的方法来解决

<span style="font-family:FangSong_GB2312;font-size:18px;"><html>

<head>

	<title></title>

</head>

<body>

<ul>

</ul>

<script type="text/javascript" 	src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

	var arr = ["baidu","sina","telcent","ali"];

	var html = "";

	$.each(arr, function(index, val) {

		html += "<li>" + val + "</li>";

	});

	$('ul').html(html);

</script>

</body>

</html></span>

效果是同样的。

当然,你也能够建个新的节点,比方说div,先将oP加入到div上,然后再将div加入到body中.但这样要在body中多加入一个<div></div>.但文档碎片不会产生这样的节点.

注意:绑定碎片实际上是把碎片的内容附加到被绑定节点以下.并不会产生类似<fragment></fragement>的节点;

Best Wishes .

版权声明：本文博主原创文章，博客，未经同意不得转载。

jQuery 文件碎片的更多相关文章

  1. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  2. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  3. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  4. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  5. 赞！带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  6. 带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...

  7. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  8. MyEclipse10中导入的jquery文件报错（出现红叉叉，提示语法错误）

    为了做一个页面特效,导入了一个jQuery文件,怎想,myeclipse竟然报错说是语法错误,但是这个js文件我是从官网上下载的,不应该出错才对,百度谷歌之后终于找到了解决办法: 选中报错的js文件, ...

  9. MVC 中引入Jquery文件的几种方法

    方法1: <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/ ...

随机推荐

  1. HDU 1518 Square 搜索

    Problem Description Given a set of sticks of various lengths, is it possible to join them end-to-end ...

  2. struts详细解释拦截器

    1.拦截器:Struts2拦截器将一个Action要么Action的方法.之前或截取后场,和Struts2拦截器是可插拔,拦截器AOP一种实现． WebWork:拦截器是动态拦截Action调用的对象 ...

  3. Git--Submodule使用

    项目模板中通常由前端保持,所以每次更新模板.我也要跟着变化项目. 随着时间的推移,这不是一个方法来找到,老这么维护.大型项目,更多的模板,真的很容易管理和维护. 然后头让我用submodule前端资源 ...

  4. onethink和phpwind共享

    将onethink和phpwind数据库安装在一起.使用公用表前缀. 将onethink的member表点phpwind有user表 这是onethink在根文件夹的安装,phpwind安装在bbs的 ...

  5. Mozilla5.0的含义

    mod=viewthread&tid=757008">http://www.lightnovel.cn/forum.php?mod=viewthread&tid=757 ...

  6. AE 先进的视频画面 快速释放 慢动作

    视频画面细腻,或快速释放.慢速播放视频.其实很easy.在使用图层time中间Enable Time remapping能够.快捷键ctrl+alt+T债券,我无法使用,我没有深究. 在这一点上,在视 ...

  7. Robot Framework 使用1-环境配置及简单网站兼容性测试（转）

    0.Robot Framework 简介 Robot Framework 是一个通用的自动化测试框架,主要用于“验收测试”和“验收测试驱动开发(ATDD)” (会其它文章中会详细介绍ATDD).它使用 ...

  8. Nginx+Php-fpm+MySQL+Redis源码编译安装指南

    说明:本教程由三部分组成如下: 1.      源码编译安装Nginx 2.      源码编译安装php以及mysql.redis扩展模块 3.      配置虚拟主机 文中所涉及安装包程序均提供下 ...

  9. linux网络编程投票

    投票系统 1.说明: 写了一个投票系统.过程是先配置好server,在写一个网上投票功能.要实现网上投票功能. 事实上功能实现还是非常easy的,麻烦一点的在于过程比較繁杂,要做的东西还是挺多的. 2 ...

  10. BZOJ 1212 HNOI2004 L语言 AC自己主动机(Trie树)+动态规划

    标题效果:给定词的列表,并m串 每个字符串q个最长前缀,这个前缀可满足拆分成一些字符串 这些字符串中存在的词汇太 再也不怕错误的数据范围--有一个很明显Trie树能解决的问题竟然被我写的AC自己主动机 ...