成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cnsworder / 1512人閱讀

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

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()方法我就用了這種很愚蠢的方法實現(xiàn)了!比起之前的data,attr,css什么的簡單多了,大家可以自己繼續(xù)完善.

接著是我們的重頭戲,3個文檔插入.我找到了一個原生js叼叼的方法

insertAdjacentHTML 來讓我們?nèi)タ聪翸DN是怎么解釋的

概述 
insertAdjacentHTML() 將指定的文本解析為 HTML 或 XML，然后將結(jié)果節(jié)點插入到 DOM 樹中的指定位置處。該方法不會重新解析調(diào)用該方法的元素，因此不會影響到元素內(nèi)已存在的元素節(jié)點。從而可以避免額外的解析操作，比直接使用 innerHTML 方法要快。
語法

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

beforebegin
在 element 元素的前面。
afterbegin
在 element 元素的第一個子節(jié)點前面。
beforeend
在 element 元素的最后一個子節(jié)點后面。
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) {  //實現(xiàn)append、after、before操作
    elm.insertAdjacentHTML(type, str);
}

然后只需要傳對應(yīng)參數(shù)就好了!如此簡單

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方法,在這我只做刪除自身節(jié)點,就沒繼續(xù)拓展了.大家可以自行完善

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
可想實現(xiàn)一個自己的簡單jQuery庫？(七)：http://segmentfault.com/a/1190000004018813

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49652.html

相關(guān)文章

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

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

    X_AirDu 評論0 收藏0

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(九)

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

    gnehc 評論0 收藏0

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(九)

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

    archieyang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<