经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. mac平台adb、tcpdump捕手android移动网络数据包

    在移动电话的发展app当我们希望自己的下才能看到app网络发出请求,这个时候我们需要tcpdump工具包捕获.实现tcpdump空灵,以下步骤需要: 在这里,在android 华为手机 P6对于样本 ...

  2. Atitit. 拉开拉链zip文件 最佳实践实施 java c# .net php

    Atitit. 拉开拉链zip文件 的实现最佳实践 java c# .net php 1. Jdk zip 跟apache ant zip 1 2. Apache Ant包进行ZIP文件压缩,upzi ...

  3. NYOJ 14 场地安排

    /* 中国标题的含义: 中国的翻译: 标题效果:寻求预定场地的最大数量,只有一个活动可以安排时间 解决问题的思路:然后使用结构数.之后再构建一个排序,排序结束时间活动.然后基于开始时间为大于一个事件的 ...

  4. SQLServer 2008 技术内幕——T-SQL 查询 笔记

    原文:SQLServer 2008 技术内幕--T-SQL 查询 笔记 1.SQL编程有许多独特之处,如:面向集合的思维方式.查询元素的逻辑处理顺序.三值逻辑.如果不掌握这些知识就开始用SQL编程,得 ...

  5. HDU2647(拓扑排序+反向建图)

    题意不说了,说下思路. 给出的关系是a要求的工资要比b的工资多,因为尽可能的让老板少付钱,那么a的工资就是b的工资+1.能够确定关系为a>b,依据拓扑排序建边的原则是把"小于" ...

  6. MVC简单的认识

    学习一个新知识,首先要了解的就是以下几个问题,它是什么?它能干什么?使用它有什么优点?这篇文章就环绕这几个问题来展开讨论. mvc不是一种编程语言,严格来说.它都不算是一门技术.它是开发软件时使用的一 ...

  7. 答读者问(5):关于数学程序猿的作用、r \\ u0026研发工作的实践要求和问题,如求职的影响

    最近,有通过微博很多读者.微信沟通,我.我觉得我们学习.对于技术,我们很热情.我也学到了很多东西. 我提取了几个大家比較关心的问题予以答复.请有相同疑问的朋友參考一下. ,欢迎关注.) 版权声明:本文 ...

  8. ural 1932 The Secret of Identifier (容斥原理)

    标题效果: 计算到n字符串. 精确到只是有一个不同的字符,两个不同的字符.三个不同的字符,四对不同的字符. IDEAS: 枚举状态. dp[i] [j] ...当前串取出 i 状态下的全部字符转化成十 ...

  9. spring整合JMS - 基于ActiveMQ实现

    一. 开篇语 继上一篇apache ActiveMQ之初体验后, 由于近期一直在复习spring的东西, 所以本文就使用spring整合下JMS. 二. 环境准备 1. ActiveMQ5.2.0 ( ...

  10. Testin一日游实验室发布的行级APP质量报告:在那里拍携程双赢

    Testin实验室公布国庆出行旅途类APP质量报告:携程力压去哪儿夺冠 2014/09/28 · Testin · 实验室报告 一年一度的十一黄金周即将临近,旅游软件成为每外出行人手机必装软件.为此全 ...