首頁(yè) 猿問(wèn) js 模仿jQuer實(shí)現(xiàn)添加類(lèi)名方法

js 模仿jQuer實(shí)現(xiàn)添加類(lèi)名方法

JavaScript

慕前端8664132 2017-05-05 23:31:58

如：var doc=document.getElementById("id");doc.addClass(className);直接可以像jQuery一樣可以打點(diǎn).調(diào)用的。

查看完整描述

1 回答

已采納

千秋此意

TA貢獻(xiàn)158條經(jīng)驗(yàn) 獲得超188個(gè)贊

//?順手寫(xiě)的demo肯定不完善,真要用自己寫(xiě)個(gè)addClass函數(shù)吧
HTMLElement.prototype.addClass?=?function(sClass)?{
????if?(new?RegExp(sClass).test(this.className))?return;
????this.className?+=?!this.className.length???sClass?:?'?'?+?sClass;
}

你要在原生的DOM對(duì)象上直接用 . 來(lái)調(diào)用，可以直接對(duì)HTMLElement的原型進(jìn)行擴(kuò)展。。當(dāng)然jQuery不是這么做的，你在使用 $('div').addClass('sClass');這些方法的時(shí)候操作的并不是原生的DOM對(duì)象，而是通過(guò)jQuery包裝過(guò)的對(duì)象，包裝后的jQuery對(duì)象上就帶有了各種各樣的jQuery方法，所以你都能直接在那些對(duì)象上用 . 來(lái)調(diào)用

———— 再補(bǔ)充個(gè)例子 ————

function?$(elem)?{
????return?new?baseObj(elem);
}

function?baseObj(elem)?{
????this.elem?=?elem;
}

baseObj.prototype?=?{
????addClass:?function(sClass)?{
????????this.elem.className?+=?'?'?+?sClass;
????}
}

jQuery的包裝過(guò)程大概類(lèi)似這樣用$選擇器拿到的對(duì)象是包裝后的jQuery對(duì)象，并不是原生的js對(duì)象

2 反對(duì) 回復(fù) 2017-05-06