在这里用若干这个词只是装个逼,主要问题只有俩个。第一:获取不到加载的dom;第二:动态操作dom时减少dom操作。
很多前端开发的初级工程师总会时不时被要求帮忙写个ajax请求啊、处理一下数据呗 。。。 ╮(╯_╰)╭
面对各位大佬们地欺压,我选择沉默。
不过想来也好,多练练也没什么不对。本人作为刚毕业的只有一年实习经验的小白来说,这个问题我遇到过俩次,第一次在我百般努力下,没有成功最终项目组长告诉了我方法,让我这个从后端转来的人感到十足的挫败感;第二次在遇到的时候,嘿嘿 。。。 我能放过她嘛?
首先遇到这个问题的时候,先不要慌。我本着既然是问题那我一定要追本溯源把她连根拔下才解气,所以咱们还是先明白为什么会出现这个问题。
浏览器的加载过程是什么?这个问题你必须先搞清楚!根据网上众多大牛的分析来看,我总结了一下:首先你在本地打开html页面时,你得让浏览器(主要是其内核webkit、Gecko)先解析你得html让他的内核知道你要做个什么样的东西比如说它的骨架是什么(html标签,其实是dom -。-),它的外观是什么样(css),它需要摆什么pose(position、js中修改dom位置)等,也就是解析html - 加载外部样式表和脚本 - 脚本在文档内解析并执行;通过上面的准备浏览器接受了你得大部分代码,他将html dom完全构造起来;最后一步是加载图片与其他外部内容;最后网页完成加载。
顺序是:解析html - 加载外部样式表和脚本 - 脚本在文档内解析并执行 - dom完全被构造成型(渲染与布局完成) - 加载图片和外部内容 - 网页完成加载。
在获得后台(php/java+mysql)返回数据后如果你们的后台未对数据进行处理(json),那你得先打出返回的数据,自己将其转化为json后方便处理。在保证返回的数据后,我相信很多同学都会,for/for-in/foreach,我还是建议你用foreach效率问题网上数据一大推,主要还是js是异步的,用foreach会避免一些莫名其妙的问题。利用foreach将json数据解析,然后拼接:
var givenData = JSON.parse(data); var eval_msg = eval(data); eval_msg.forEach(function(item){ rowStr='<tr><td><span>'+item.create_date+'</span></td><td>'+item.recharge_num+'</td></tr>'; $('#htRecordChargeTable'+dataID).append(rowStr);
});
然后,循环添加dom。这样子有问题么?当然是没有,但是不完美。dom操作太频繁会影响网页layout(也就是我上面所说的布局),循环操作dom,循环影响布局,循环影响网页加载。╮(╯_╰)╭,这不是我们想要的,所以我们要尽量做到一次性操作dom,代码如下:
eval_msg.forEach(function(item){ rowStr+='<tr><td><span>'+item.create_date+'</span></td><td>'+item.recharge_num+'</td></tr>'; }); $('#htRecordChargeTable'+dataID).append(rowStr);
所以我们循环操作被添加的dom字符串,如上的rowStr,全部拼接后一次性apped进去。(这是问题2,我得个人经验)
这里选取,知乎上一位网友的问题描述(其实我有点手懒 - -。):
这里的问题也是我想说的,你在这里绑定click都叫 .my 到底点哪一个!?其实顺着这位同学的思路往下走正确的打开方式应该是拿到所有的 .my 然后利用each函数添加click事件,但是这又得循环了,并不是我们想要的。然后呢,我们可以问后台将id放到返回的数据中,然后我们可以在添加dom时,把id拼进去,直接添加onclik函数利用this.id把id传进去,这样我们就能知道到底点哪一个。上代码:
for(var i = 1; i <= obj.allNum; i++){ var dataID=obj.all+'_'+i'; str+='<li><a href="javascript:void(0)" class="page_num" id='+dataID+' onclick="enumPage(this.id)">'+i+'</a></li>'; } $('#prev_page').after(str);
然后在外部,写一个enumPage函数即可:
function enumPage(enumPageId){ var dataId = enumPageId; var id=dataId.split('_')[1]; ... }
以上均个人总结,还希望与大家一起交流。
相关推荐
5. **添加数据行**:假设你有一个数据数组,你可以遍历这个数组,为每一项创建一行`<tr>`,并在其中添加数据单元格`<td>`和操作按钮`<button>`。 ```javascript data.forEach(item => { const row = document....
本文将深入探讨如何利用Vue.js构建一个支持超长数据表格的动态加载机制,解决web端表格在面对大数据量时的卡顿问题。 一、Vue.js的响应式原理 Vue.js的核心在于它的响应式系统,它通过数据观察和依赖收集来实现视图...
本文将基于"JavaScript动态网站开发若干案例"的主题,详细解析这些章节内容,以帮助初学者和进阶者深入理解JavaScript的基础实例。 首先,让我们从`readme.txt`开始。这个文件通常包含对整个压缩包的介绍或目录,...
动态分页是将整个数据集分割成若干个部分(页),每次只加载用户当前查看的那一部分数据,而不是一次性加载所有数据。这减少了前端页面的负担,加快了页面加载速度,同时也降低了服务器的压力。 在 jQuery 中,实现...
3. **DOM方法**:手册中提到的“XMLDOM对象方法手册”可能包含了如`appendChild()`(添加子节点)、`removeChild()`(移除子节点)、`getElementsByTagName()`(根据标签名获取元素集合)、`innerHTML`(获取或设置...
这篇博客"使用Fusion Charts制作报表(dom4j生成XML)"主要介绍了如何利用Fusion Charts结合DOM4J库来生成XML数据,从而创建动态报表。 首先,我们需要理解Fusion Charts的核心概念。Fusion Charts提供了一系列预定...
这个"XMLDOM对象方法手册"很可能包含了关于如何使用XMLDOM对象来操作XML文档的各种方法和属性的详细说明。 在XMLDOM中,有若干关键对象,如Document对象、Node对象、Element对象等,它们构成了一个层次结构,代表了...
本教程将深入探讨如何使用jQuery实现动态更改table表格数据,让你的网页表格具有实时编辑功能,提升用户体验。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始,包含若干个`<tr>`(行)...
在JavaScript中,动态地删除HTML表格(TABLE)中的多行数据是一种常见的DOM操作。DOM(文档对象模型)是HTML和XML文档的编程接口,它允许我们通过脚本编程的方式动态地修改文档结构、样式和内容。 首先,需要了解...
在JavaScript编程中,动态添加`td`(表格数据单元格)和`tr`(表格行)是常见的需求,尤其在创建交互式网页时。本文将深入探讨如何利用JavaScript实现这一功能,以及它在实际开发中的应用。 首先,我们需要了解HTML...
4. **事件处理**:JavaScript能够响应用户操作,如点击按钮、页面加载等,通过添加事件监听器来实现动态交互。 5. **DOM操作**:文档对象模型(DOM)是JavaScript操作HTML和CSS的主要方式。学习如何选择元素、修改...
在网页开发中,JavaScript 是一种常用的脚本语言,用于实现客户端的交互效果。本文将详细介绍如何使用 ...了解如何使用 JavaScript 操作 DOM 并动态生成 `option` 选项,可以帮助开发者创建更高效、更灵活的前端界面。
2. 动态加载:按需渲染和加载表格的部分区域,利用滚动事件来动态加载可视区域内的表格数据,其余未滚动到的部分暂不加载,这样可以有效减少一次性渲染的DOM节点数量。 3. 固定行列:利用滚动事件控制固定列和固定头...
在大数据量场景下,可以采用动态加载或懒加载技术,即只在用户滚动到可视区域时才加载下一部分数据,这样可以显著减少初次加载的时间。 9. 兼容性和性能: 编写JavaScript分页代码时要考虑浏览器兼容性,尤其是对于...
"js分页+列表排序+属性显示"这一技术组合,旨在提供一种无需页面刷新就能实现数据动态加载、排序以及特定属性显示的功能,提升用户体验。以下是关于这些知识点的详细说明: 1. **分页(Pagination)**: 分页是一...
分屏加载的核心思想是将页面拆分成若干个部分(如头部、主体、底部等),然后用IFRAME分别加载这些部分。这样,用户可以先看到页面的基本结构,而其他部分则在后台异步加载,提升了页面的响应速度。 ### 3. ...
纯前端分页是一种在网页上实现数据展示时的常见技术,尤其在大数据量的情况下,它能够有效地提升用户体验,避免一次性加载过多数据导致页面卡顿。本文将深入探讨纯前端分页的实现原理、相关技术以及如何运用到实际...
这可能包括一个`<img>`元素展示图片,以及若干`<div>`或`<p>`元素用于动态显示文字。 2. **CSS样式**:为元素添加必要的样式,如定位(positioning)、尺寸(dimensions)和透明度(opacity)。使用CSS3动画或过渡...
动态加载文本内容是指在网页已经加载完成后,通过Ajax请求从服务器获取数据,并将这些数据动态地加载到网页的指定位置。例如,在一个页面的特定区域显示从服务器上获取的文本内容。这样做可以使得页面初始加载时体积...
通过使用`.click()`、`.after()`、`$("selector")`等jQuery方法,我们可以轻松地扩展表格数据,实现更加动态的网页交互功能。jQuery作为一种强大的前端开发工具,极大地简化了JavaScript操作,使得网页开发更加高效...