可想實現一個自己的簡單jQuery庫？(八)

X_AirDu 發布于2019-08-21 10:48 / 2879人閱讀

摘要：兼容性簡直神器有木有所以我們寫一個這樣的方法吧實現操作然后只需要傳對應參數就好了如此簡單接著是方法在這我只做刪除自身節點就沒繼續拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實現一個自己的簡單庫七

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86233.html

可想實現一個自己的簡單jQuery庫？(八)

摘要：兼容性簡直神器有木有所以我們寫一個這樣的方法吧實現操作然后只需要傳對應參數就好了如此簡單接著是方法在這我只做刪除自身節點就沒繼續拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實現一個自己的簡單庫七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

cnsworder 2019-08-01 14:55 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(九)

摘要：事件機制在講事件機制之前呢我們有一個很重要的東西要先講那就是如何實現事件委托代理只有必須先明白了如何實現一個事件委托我們才能更好的去實現和在我看來和里最難實現的就是他的事件委托以上是我對整個委托的實現當然在這只做了非常簡單的實現沒有對很多 Lesson-8 事件機制在講事件機制之前呢,我們有一個很重要的東西要先講,那就是如何實現事件委托(代理). 只有必須先明白了如何實現一個事件委...

gnehc 2019-08-21 10:49 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(九)

摘要：事件機制在講事件機制之前呢我們有一個很重要的東西要先講那就是如何實現事件委托代理只有必須先明白了如何實現一個事件委托我們才能更好的去實現和在我看來和里最難實現的就是他的事件委托以上是我對整個委托的實現當然在這只做了非常簡單的實現沒有對很多 Lesson-8 事件機制在講事件機制之前呢,我們有一個很重要的東西要先講,那就是如何實現事件委托(代理). 只有必須先明白了如何實現一個事件委...

archieyang 2019-08-01 14:54 評論0 收藏0