可想实现一个自己的jQuery库?(八)
发布在一步一步实现jQuery2015年11月10日view:3797前端开发BrettBatjQuery
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

第八章


新增 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 元素的位置,并且只能是以下的字符串之一:

beforebeginelement 元素的前面。 afterbeginelement 元素的第一个子节点前面。 beforeendelement 元素的最后一个子节点后面。 afterendelement 元素的后面。 text 是字符串,会被解析成 HTMLXML,并插入到 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

评论
发表评论
暂无评论
WRITTEN BY
二哲
我什么都不缺,但好像缺少了点什么。
TA的新浪微博
PUBLISHED IN
一步一步实现jQuery

前言

1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。

2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery

3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery,也想自己实现一个jQuery的。

4.本系列就是以一些不同的方法手段,简单的代码,实现了一套与jQuery一样的API

5.最后在每篇文章的最后会留下github源码地址,希望能得到大家star的认可与支持,谢谢。

友情链接 大搜车前端团队博客
我的收藏