`

jquery中的append的效率问题应用

阅读更多
  在jquery中的append中,如果一次性要往某个元素append很多东西的话,
比如这样:
   var start = new Date().getTime();
for(var cnt=0; cnt < 200; cnt++){
         $('.container').append('test
');
}
var timeElapsed = new Date().getTime() - start;
$('#timetaken').html('Time taken: ' + timeElapsed + ' milliseconds');

  这样的效率很低,因为重复调用append了,更快的方法是:
var start = new Date().getTime();
var str = '';
for(var cnt=0; cnt < 200; cnt++){
     str += 'Lorem ipsum dolor sit amet
';
}
$('.container').append(str);
var timeElapsed = new Date().getTime() - start;
$('#timetaken').html('Time taken: ' + timeElapsed+ ' milliseconds');

  就是说,先一次性循环把要增加的字符串整理后,最后再一次append
1
0
分享到:
评论

相关推荐

    关于jquery append() html时的小问题的解决方法

    在这个文档中,作者主要探讨了在使用jQuery的append()函数向HTML内容动态添加元素时出现的一个小问题以及相应的解决方案。append()函数在jQuery中被广泛用于向选定的元素内部追加内容,这是一个非常方便的操作,可以...

    解决jQuery使用append添加的元素事件无效的问题

    在jQuery中,动态添加元素并为其绑定事件是一个常见的需求,特别是在构建交互丰富的Web应用时。然而,使用传统的`.click()`或`.bind()`方法为通过`.append()`等方法新增的元素添加事件处理程序可能会遇到问题,因为...

    jQuery1.12.4+jQuery中文手册.rar

    - 结合实际项目练习,将jQuery的知识应用到网页交互、动态效果和Ajax通信中,提升开发效率。 以上是对jQuery 1.12.4及其相关资源的基本介绍,掌握这些内容,将有助于你在实际开发中熟练运用jQuery,提升前端开发...

    jQuery中append、insertBefore、after与insertAfter方法注意事项

    在使用jQuery进行DOM操作时,append、prepend、before和after方法是经常使用的,它们可以帮助开发者以不同的方式动态地修改页面内容。同时,appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...

    jQuery中文文档1.8和1.4的chm文档

    《jQuery中文文档1.8和...了解和熟练掌握jQuery中文文档中的内容,将有助于开发者快速构建动态、交互性强的网页应用,并且提高开发效率。无论你是初学者还是有经验的开发者,这些文档都是学习和查阅jQuery的宝贵资源。

    jquery中文参考

    1. **live()方法**: 在jQuery 1.2中,`live()`方法首次出现,它允许动态添加到DOM的元素也能响应事件,解决了事件绑定的问题。 2. **$.param()**: 这个方法用于序列化表单数据,常用于构建URL查询字符串,与Ajax...

    Jquery中文帮助文档

    在jQuery 1.7版本中,API(应用程序接口)进行了多项改进和修复,使得开发者在使用过程中更为顺畅。文档中详细列出了每个方法的用途、参数、返回值以及示例代码,便于理解和实践。 1. **选择器(Selectors)**:...

    jQuery中文API

    **jQuery中文API**是JavaScript库jQuery的中文文档,它为开发者提供了一个全面、直观的参考指南,便于在JavaScript编程中...通过熟练运用jQuery,可以大大提高前端开发的效率,创建出更加丰富、互动性强的网页应用。

    jQuery中append()方法用法实例

    在进行Web开发的过程中,特别是在前端JavaScript编程中,使用jQuery库可以帮助我们更加简便地操作DOM元素,提高开发效率。其中,`append()`方法是jQuery中一个常用的方法,用于在匹配的元素集合中每个元素的末尾插入...

    jquery应用实例

    本篇文章将深入探讨jQuery在实际应用中的多种实例,帮助读者掌握并熟练运用jQuery,提升网页动态效果和交互体验。 一、jQuery选择器 jQuery的选择器是其魅力之一,它极大地简化了DOM元素的选择。例如,`$("#id")`...

    jquery 中文文档

    从`changelog.txt`文件中,我们可以了解jQuery的版本变更历史,了解每次更新引入的新特性、优化和已知问题修复,以便及时更新到最新版本,充分利用新功能并避免已知问题。 九、文档资源 `index.html`是jQuery中文...

    JQuery中文帮助文档

    这份"JQuery中文帮助文档"是开发者学习和查阅jQuery功能的宝贵资源,对于提高开发效率、理解和运用jQuery有着极其重要的作用。 1. **jQuery基础** - **选择器**: jQuery的选择器是基于CSS选择器扩展的,如`$("#id...

    jquery-1.9中文API

    《jQuery 1.9中文API详解》 jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件...配合良好的学习资源,开发者能够快速掌握并应用到实际项目中,从而提高开发效率和项目质量。

    jQuery添加新内容的四个常用方法分析【append,prepend,after,before】

    在实际应用中,这四个方法常常结合使用,以实现复杂的DOM操作。例如,创建新的元素并动态插入到文档中,或者根据用户交互动态更新页面内容。对于开发者来说,理解并熟练掌握这些方法对于编写高效、灵活的jQuery代码...

    jQueryAPI中文手册3.1.rar

    《jQuery API 中文手册 3.1》是一...掌握jQuery API对于任何JavaScript开发者来说都是极其有益的,它能够提高开发效率,使Web应用更加生动活泼。通过这份中文手册,你可以快速查找所需的信息,更好地利用jQuery的力量。

    精通jquery(中文第二版)_扫描版_以及源代码

    8. **实战项目**:通过实际项目案例,展示jQuery在网页开发中的应用,如导航菜单、轮播图、表单验证等,帮助读者巩固所学知识并提升实战能力。 9. **源代码分析**:书中附带的源代码提供了丰富的示例,读者可以下载...

    Learning jquery中文版

    书中会介绍如何利用jQuery的方法,如`append()`、`prepend()`、`html()`等,来实现对DOM结构的动态修改。此外,还将讲解如何使用`clone()`、`remove()`和`empty()`等方法处理元素的复制与移除。 事件处理在jQuery中...

    jquery中文手册android端

    jQuery是一个广泛应用于Web开发中的JavaScript库,其核心理念是“Write Less, Do More”,即通过简洁的代码实现复杂的页面交互和动画效果。以下是对jQuery 1.8.3版本及其相关知识点的详细阐述。 1. **jQuery选择器*...

    Jquery API 1.4(中文)+ Jquery 1.42

    本指南将深入探讨《jQuery API 1.4(中文)》及jQuery 1.4.2版本中的关键知识点,帮助开发者更好地理解和运用这一版本的特性。 一、jQuery库的基本概念与应用 jQuery库是John Resig在2006年创建的一个JavaScript库...

    JQuery前端应用

    3. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`append()`、`prepend()`用于插入元素,`remove()`用于删除元素,`attr()`和`removeAttr()`用于设置或移除属性。 4. **事件处理**:jQuery的事件处理方法如`...

Global site tag (gtag.js) - Google Analytics