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

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

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è)贊

//?順手寫的demo肯定不完善,真要用自己寫個(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ì)象上直接用 . 來調(diào)用，可以直接對(duì)HTMLElement的原型進(jìn)行擴(kuò)展。。當(dāng)然jQuery不是這么做的，你在使用 $('div').addClass('sClass');這些方法的時(shí)候操作的并不是原生的DOM對(duì)象，而是通過jQuery包裝過的對(duì)象，包裝后的jQuery對(duì)象上就帶有了各種各樣的jQuery方法，所以你都能直接在那些對(duì)象上用 . 來調(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的包裝過程大概類似這樣用$選擇器拿到的對(duì)象是包裝后的jQuery對(duì)象，并不是原生的js對(duì)象

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