经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. Mongodb 之insert瞬时完成，测试数据---飞天博客

    这几天看mongdb官方网站,然后将执行数据.突然,我发现,该数据确实很强大,在这里说话数据.我用普通的pc机,amd双核 2.7GHz,4G内存,当然,当系统不只是在测试作为数据库server的.同 ...

  2. Cygwin编译自己定义OpenCV库报错：opencv_contrib: LOCAL_SRC_FILES points to a missing file

    今天受命帮师弟调个OpenCV4Android 识别银行卡的程序,版本号为OpenCV4Android2.4.9,使用方式为前文介绍的第一种方式,即通过jni调用opencv.如杂家前文所述,配套的N ...

  3. 【SSH进阶之路】一步步重构容器实现Spring框架——彻底封装，实现简单灵活的Spring框架(十一)

    文件夹      [SSH进阶之路]一步步重构容器实现Spring框架--从一个简单的容器開始(八)      [SSH进阶之路]一步步重构容器实现Spring框架--解决容器对组件的"侵入 ...

  4. 4安德鲁斯.2.2在系统，具有系统权限的应用程序无法读取或写入SD卡

    有两个解决方案: 1.通过改动android系统的源代码,开放SD卡的读写权限,具体的改动方法和说明.能够參考网上资料http://www.ifeegoo.com/android-debug-stat ...

  5. Cordova探险系列（一个）

    最早接触PhoneGap平台是在1年多之前,可以使用HTML.CSS和JavaScript跨平台来编写Android或者IOS设备程序.而且应用的核心代码不须要多少改动就行移植.确实让我感觉的到它应该 ...

  6. JAVA设计模式--辛格尔顿

    Singleton模式可以作为一种编程技术,让我们先从理论上说代码 单例模式三个关键点: 1).某个类仅仅能有一个实例 2).该类必须自行创建这个实例 3).该类必须自行向整个系统提供这个实例 应用场 ...

  7. PowerMockito使用详解（转）

    一.为什么要使用Mock工具 在做单元测试的时候,我们会发现我们要测试的方法会引用很多外部依赖的对象,比如:(发送邮件,网络通讯,远程服务, 文件系统等等). 而我们没法控制这些外部依赖的对象,为了解 ...

  8. POJ 2531-Network Saboteur（DFS）

    Network Saboteur Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9435   Accepted: 4458 ...

  9. passenger nginx

    sudo dd if=/dev/zero of=/swap bs=1M count=1024 sudo mkswap /swap sudo swapon /swap Nginx with Passen ...

  10. css小技巧，如何制作一个箭头符号

    首先上图: 第一种方法大家可能想到了,就是用背景图片制作箭头符号,但是下面介绍的不是这种方法. 在介绍通过border制作箭头符号之前,先看下下面的css代码: <!DOCTYPE html&g ...