开发者社区> 向善的灯> 正文

【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81087543 主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81087543

主要问题:

在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个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里面的创建对象的方式还是有些区别的,一个创建的元素是不能共享的!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java总结 - List实现类Vector&Stack
由于之前 对ArrayList和LinkedList的分析,所以在看Vector和Stack的源码实现就会非常简单 观察上图,我们可以看到本文要说的Stack和Vector是父子关系,我们依旧从源码入手,期望能够对你有帮助,如果本文有理解不对的地方,请及时指正,谢谢您 Vector 我们知道...
1557 0
PHPpraffa也有了,一个PHP版本的阿里云函数计算与API网关的开发框架
发布了Python版本的函数计算与API网关的开发框架后,一直觉得对不起PHP,因为公司一直是用PHP的,我这弄了个Python,实在不该,对了,(Python版本说明点这里。 PHPpraffa是什么? PHPpraffa 是praffa的PHP版本。
1213 0
JavaScript 中对变量和函数声明提前的示例
如题所示,看下面的示例(可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter可以中途代码换行)var name = "xiaoming"; (function(){ var name = name || "小张"; console.
592 0
第8周-任务1-方案1-复数类中运算符重载(成员函数实现)
【题目】实现复数类中的运算符重载:定义一个复数类重载运算符+、-、*、/,使之能用于复数的加减乘除。 方案一:请用类的成员函数完成运算符的重载;class Complex { public: Complex(){real=0;imag=0;} Complex(double r,double i){real=r;imag=i;} Complex operator+(Compl
1025 0
《JavaScript开发框架权威指南》——2.7 小结
本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章,第2.7节,作者:【美】Tim Ambler , Nicholas Cloud著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1446 0
第8周-任务1-方案2-复数类中运算符重载(非成员函数实现)
接:第8周-任务1-方案1-复数类中运算符重载(成员函数实现) 本文用方案二求解:用类的友元函数,而不是成员函数,完成上面提及的运算符的重载; 【讲解视频】 【参考解答】 #include &lt;iostream&gt; using namespace std; class Complex { public: Complex(){real=0;imag=0;}
959 0
+关注
53
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载