摘要:兼容性簡(jiǎn)直神器有木有所以我們寫(xiě)一個(gè)這樣的方法吧實(shí)現(xiàn)操作然后只需要傳對(duì)應(yīng)參數(shù)就好了如此簡(jiǎn)單接著是方法在這我只做刪除自身節(jié)點(diǎn)就沒(méi)繼續(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 來(lái)讓我們?nèi)タ聪翸DN是怎么解釋的
概述語(yǔ)法insertAdjacentHTML() 將指定的文本解析為 HTML 或 XML,然后將結(jié)果節(jié)點(diǎn)插入到 DOM 樹(shù)中的指定位置處。該方法不會(huì)重新解析調(diào)用該方法的元素,因此不會(huì)影響到元素內(nèi)已存在的元素節(jié)點(diǎn)。從而可以避免額外的解析操作,比直接使用 innerHTML 方法要快。
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 樹(shù)中。
Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|
1.0 | 8.0 | 4.0 | 7.0 | 4.0 |
簡(jiǎn)直神器有木有?!
所以我們寫(xiě)一個(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),就沒(méi)繼續(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://specialneedsforspecialkids.com/yun/49652.html
摘要:兼容性簡(jiǎn)直神器有木有所以我們寫(xiě)一個(gè)這樣的方法吧實(shí)現(xiàn)操作然后只需要傳對(duì)應(yīng)參數(shù)就好了如此簡(jiǎn)單接著是方法在這我只做刪除自身節(jié)點(diǎn)就沒(méi)繼續(xù)拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單庫(kù)七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...
摘要:事件機(jī)制在講事件機(jī)制之前呢我們有一個(gè)很重要的東西要先講那就是如何實(shí)現(xiàn)事件委托代理只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托我們才能更好的去實(shí)現(xiàn)和在我看來(lái)和里最難實(shí)現(xiàn)的就是他的事件委托以上是我對(duì)整個(gè)委托的實(shí)現(xiàn)當(dāng)然在這只做了非常簡(jiǎn)單的實(shí)現(xiàn)沒(méi)有對(duì)很多 Lesson-8 事件機(jī)制 在講事件機(jī)制之前呢,我們有一個(gè)很重要的東西要先講,那就是如何實(shí)現(xiàn)事件委托(代理). 只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委...
摘要:事件機(jī)制在講事件機(jī)制之前呢我們有一個(gè)很重要的東西要先講那就是如何實(shí)現(xiàn)事件委托代理只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托我們才能更好的去實(shí)現(xiàn)和在我看來(lái)和里最難實(shí)現(xiàn)的就是他的事件委托以上是我對(duì)整個(gè)委托的實(shí)現(xiàn)當(dāng)然在這只做了非常簡(jiǎn)單的實(shí)現(xiàn)沒(méi)有對(duì)很多 Lesson-8 事件機(jī)制 在講事件機(jī)制之前呢,我們有一個(gè)很重要的東西要先講,那就是如何實(shí)現(xiàn)事件委托(代理). 只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委...
閱讀 837·2021-11-18 10:07
閱讀 2355·2021-10-14 09:42
閱讀 5316·2021-09-22 15:45
閱讀 585·2021-09-03 10:29
閱讀 3462·2021-08-31 14:28
閱讀 1873·2019-08-30 15:56
閱讀 3038·2019-08-30 15:54
閱讀 994·2019-08-29 11:32