可想实现一个自己的简单jQuery库？(八)

cnsworder 发布于2019-08-01 14:55 / 1487人阅读

摘要：兼容性简直神器有木有所以我们写一个这样的方法吧实现操作然后只需要传对应参数就好了如此简单接着是方法在这我只做删除自身节点就没继续拓展了大家可以自行完善只能删除自身您给予的就是给代码赋予灵魂地址可想实现一个自己的简单库七

Lesson-7

新增 html,append,before,after,remove

html: function (value) {
    if (value === undefined) {
        return this[0].innerHTML;
    } else {
        for (var i = 0; i < this.length; i++) {
            this[i].innerHTML = value;
        }
    }
    return this;
}

html()方法我就用了这种很愚蠢的方法实现了!比起之前的data,attr,css什么的简单多了,大家可以自己继续完善.

接着是我们的重头戏,3个文档插入.我找到了一个原生js叼叼的方法

insertAdjacentHTML 来让我们去看下MDN是怎么解释的

概述

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML，然后将结果节点插入到 DOM 树中的指定位置处。该方法不会重新解析调用该方法的元素，因此不会影响到元素内已存在的元素节点。从而可以避免额外的解析操作，比直接使用 innerHTML 方法要快。

语法

element.insertAdjacentHTML(position, text);
position 是相对于 element 元素的位置，并且只能是以下的字符串之一：

beforebegin
在 element 元素的前面。
afterbegin
在 element 元素的第一个子节点前面。
beforeend
在 element 元素的最后一个子节点后面。
afterend
在 element 元素的后面。
text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

兼容性

Chrome	Firefox	IE	Opera	Safari
1.0	8.0	4.0	7.0	4.0

简直神器有木有?!

所以我们写一个这样的方法吧!

function domAppend(elm, type, str) {  //实现append、after、before操作
    elm.insertAdjacentHTML(type, str);
}

然后只需要传对应参数就好了!如此简单

append: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], "beforeend", str);
    }
    return this;
},
before: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], "beforeBegin", str);
    }
    return this;
},
after: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], "afterEnd", str);
    }
    return this;
}

接着是remove方法,在这我只做删除自身节点,就没继续拓展了.大家可以自行完善

remove: function () { //只能删除自身
    for (var i = 0; i < this.length; i++) {
        this[i].parentNode.removeChild(this[i]);
    }
    return this;
}

您给予的star,就是给代码赋予灵魂.

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-7
可想实现一个自己的简单jQuery库？(七)：http://segmentfault.com/a/1190000004018813

GPU云服务器云服务器 js实现的简单特效怎么搭建一个自己的视频网站如何搭建一个自己的服务器用c实现简单的shell

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49652.html

可想实现一个自己的简单jQuery库？(八)

摘要：兼容性简直神器有木有所以我们写一个这样的方法吧实现操作然后只需要传对应参数就好了如此简单接着是方法在这我只做删除自身节点就没继续拓展了大家可以自行完善只能删除自身您给予的就是给代码赋予灵魂地址可想实现一个自己的简单库七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

X_AirDu 2019-08-21 10:48 评论0 收藏0
可想实现一个自己的简单jQuery库？(九)

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多 Lesson-8 事件机制在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理). 只有必须先明白了如何实现一个事件委...

gnehc 2019-08-21 10:49 评论0 收藏0
可想实现一个自己的简单jQuery库？(九)

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多 Lesson-8 事件机制在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理). 只有必须先明白了如何实现一个事件委...

archieyang 2019-08-01 14:54 评论0 收藏0