【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
主要问题:
在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。
下面是我自己定义的Append()函数:
/** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param child,这里创建的实际上是一个JQuery对象 */ append: function (child) { var doms = typeof child === 'string' ? $(child) : $(child[0]), arr = Array.prototype.slice.call(doms); for (var i = 0; i < this.length; i++){ for (var j = 0; j < doms.length; j++){ // 注意这里的操作, 由于在每次添加一个新的元素之后, this的长度就会增加,因此这里在修改之前先把this.length修改一下 this[i].appendChild(doms[j]); } } },
测试的代码如下:
下面是按照原生的添加方法一步步添加一个DOM元素到指定节点的过程:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="parentNode"></div> <div class="box0">111</div> <div class="box1">222</div> <div class="box2">555</div> <div class="box3">444</div> <div class="box4">555</div> <div class="game">111</div> <div class="game">222</div> <div class="game">333</div> <div class="game">444</div> <div class="game">555</div> <div class="name">111</div> <div class="name">222</div> <div class="name">333</div> <div class="name">444</div> <div class="name">555</div> </body> </html> <script src="xframe006.js"></script> <script> var arr = [1, 2, 3] console.log(arr); var res = Array.prototype.slice.call(arr); console.log(res); //1. 创建一个DOM元素节点(这个DOM实际上是一个我自己封装的JQuery对象) var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); // DOM框架完整测试 $('#parentNode').append(dom); // append()测试: 主要问题, 如果一次向要给一个集合添加多个就不成功 /*var res = document.querySelectorAll('.box1'); for (var i = 0; i < 3; i++){ dom = document.createElement("p"); for (var j = 0; j < 3; j++){ res[j].appendChild(dom); } }*/ // 每一个DOMs里面存储的是一个HTMLCollection var doms = []; for (var i = 0; i < 5; i++) { doms.push( $.$class('box' + i) ); } // 第一种方式:开始遍历每一个元素 doms.forEach(function (element) { var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); element[0].appendChild(dom[0]); }); // 换一种方式:给一个类标签添加子节点, 里面存放的每一个元素都是一个HTMLcollection(完全OK) var res = $('.game'); Array.prototype.slice.call(res).each(function () { var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); this.appendChild(dom[0]); }); // 第三种方式的实现 var res = $('.name'); // 注意在使用append函数的时候,每次都需要重新创建一个DOM元素,因此这个DOM Node节点是不能放在外部的 error var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); Array.prototype.slice.call(res).each(function () { dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); this.appendChild(dom[0]); }); // 创建一个DOM节点,添加到根节点 $('.name').each(function () { // DOM的创建必须在这个函数内部创建,否则会使用错误!!! var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>'); this.append(dom[0]); }); // appendTo()测试 var dom = $.create('span', {name : '52tech'}, '<a href="www.52tech.tech"></a>'); dom.appendTo(document); </script>
最终发现,在添加的时候,如果只创建了一个DOM元素,那么到最后始终能添加成功的就是只有一个的,但是,如果每次在添加之前创建了和获取的class的DOM元素相同数量的节点,就会添加成功,这个好像和C++/Java里面的创建对象的方式还是有些区别的,一个创建的元素是不能共享的!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Python爬虫实战示例-51job和豆瓣电影
2018年7月16日笔记 1.conda常用命令 1.1 列出当前环境的所有库 命令:conda list 在cmd中运行命令如下图所示: 图片.png-36.6kB 1.2 管理环境 创建环境 命令:conda create -n {} python={}第一对大括号替换为环境的命名,第二对大括号替换为python的版本号 例如:conda create -n python27 python=2.7 这个命令就是创建一个python版本为2.7的环境,并命名为python27 列出所有环境 命令:conda info -e 进入环境 activate {},大括号替换为虚拟环境名 环境添加库 conda install {},大括号替换为要安装库的库名 环境删除库 conda remove {},大括号替换为要安装库的库名 删除环境 conda remove -n {} -all,大括号替换为要删除库的库名 2. 爬虫示例 爬取豆瓣钱排名前250条信息,即下图这个网页的信息。 图片.png-340.8kB 下面的sql语句用来创建数据库的表 drop database if exis...
- 下一篇
Java程序员如何做代码压力测试?【JWordPress前台项目实战】
代码 pom.xml文件引入包 <dependency> <groupId>com.taobao.stresstester</groupId> <artifactId>stresstester</artifactId> <version>1.0</version> </dependency> 编写测试代码 /** * @Title: PressTest * @Description: 压力测试,测试一下获取用户信息的方法的qps * @param 参数 * @return void 返回类型 * @throws */ @Test public void PressTest(){ int concurrencyLevel =100;//并发数 int totalRequest = 1000;//总请求数 StressResult result = StressTestUtils.test(concurrencyLevel, totalRequest, new StressTask() { @O...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7设置SWAP分区,小内存服务器的救世主
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题