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

資訊專欄INFORMATION COLUMN

可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(八)

X_AirDu / 2887人閱讀

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

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

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

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

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

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

beforebegin
在 element 元素的前面。
afterbegin
在 element 元素的第一個(gè)子節(jié)點(diǎn)前面。
beforeend
在 element 元素的最后一個(gè)子節(jié)點(diǎn)后面。
afterend
在 element 元素的后面。
text 是字符串，會(huì)被解析成 HTML 或 XML，并插入到 DOM 樹中。

兼容性
Chrome Firefox IE Opera Safari
1.0 8.0 4.0 7.0 4.0

簡(jiǎn)直神器有木有?!

所以我們寫一個(gè)這樣的方法吧!

function domAppend(elm, type, str) {  //實(shí)現(xiàn)append、after、before操作
    elm.insertAdjacentHTML(type, str);
}

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

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é)點(diǎn),就沒繼續(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
可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(七)：http://segmentfault.com/a/1190000004018813

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

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

相關(guān)文章

  • 可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(八)

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

    cnsworder 評(píng)論0 收藏0

  • 可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(九)

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

    gnehc 評(píng)論0 收藏0

  • 可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(九)

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

    archieyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<