【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里面的创建对象的方式还是有些区别的，一个创建的元素是不能共享的！
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案的更多相关文章
- 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
- 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...
- 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
// 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...
- 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...
- 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...
- 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...
- 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...
随机推荐
- 数据库工具——Navicat Premium使用技巧
Navicat Premium 常用功能讲解 1.快捷键 1.1. F8 快速回到当前对象列表 1.2. Ctrl + q 打开查询界面 1.3. Ctrl + d 快速修改当前的表结构 1.4 ...
- CSDN日报20170416 ——《为什么程序猿话少钱多死得早？》
[程序人生]为什么程序猿话少钱多死得早? 作者:文奇 我在想,程序猿都是话少吗?不一定吧.像我和我的同学.都是话非常多啊. 可是经历过非常多事的如今.再想想,发现事实的确如此.程序猿确实话少. 我是一 ...
- UnrealEngine4之UObject（一）
Runtime最关键的实现是UObject,它是全部引擎层面.游戏层面对象的基类. UObject实现了动态创建.持久化.脚本化.内存管理.生存期控制. ----------------------- ...
- IOS算法(二)之选择排序
选择排序: 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,顺序放在已排好序的数列的最后.直到所有待排序的数据元素排完. 选择排序是不稳定的排序方法. 一. 算法描写叙述 选择排序:比方在一 ...
- 《Head First 设计模式》学习笔记——复合模式
模型-视图-控制器(MVC模式)是一种很经典的软件架构模式.在UI框架和UI设计思路中扮演着很重要的角色.从设计模式的角度来看,MVC模式是一种复合模式.它将多个设计模式在一种解决方式中结合起来,用来 ...
- mysql 10060远程不能访问
1.网络不通. 检查能不能ping通. 2.防火墙设置. 防火墙是否放过MySQL的进程,是否屏蔽了mysql的3306端口. 3.mysql的账户设置. mysql账户是否不允许远程连接.如果无法连 ...
- Intellij IDEA社区版打包Maven项目成war包，并部署到tomcat上
转自:https://blog.csdn.net/yums467/article/details/51660683 需求分析 我们利用 Intellij idea社区版IDE开发了一个maven的sp ...
- VisoStudio 允许局域网联机调试网站
第一步:修改配置文件 添加IP访问配置 找到vs访问网站的端口后,添加一行新的配置 第二步:使用CMD命令进行网络配置 netsh http / user=everyone 删除网络配置的命令(注意最 ...
- 小程序：前端防止用户重复提交&即时消息(IM)重复发送问题解决
背景: 最近参与开发的小程序,涉及到即时消息(IM)发送的功能: 聊天界面如下,通过键盘上的[发送]按钮,触发消息发送功能 问题发现: 功能开发完毕,进入测试流程:测试工程师反馈说: 在Android ...
- win10 + vs2017 + vcpkg —— VC++ 打包工具
vcpkg 是微软 C++ 团队开发的在 Windows 上运行的 C/C++ 项目包管理工具,可以帮助您在 Windows 平台上获取 C 和 C++ 库. vcpkg 自身也是使用 C++ 开发的 ...