簡單模擬JQuery框架

2022-02-05 07:22:59 字數 1395 閱讀 2007

1.首先模擬乙個jquery物件,在這裡起名叫xjs,如下**:

var xjs = function(selector) 

alert(xjs("d1").innerhtml);

但是現在通過xjs返回的是乙個dom物件,這跟jquery返回的是乙個jquery物件不同。為了讓xjs返回本身自己,需要擴充套件xjs。

var xjs = function(selector)
xjs.fn = xjs.prototype = 

}}

以上**不對selector合法性檢查,就認為其實乙個合法的id。像上面**擴充套件xjs物件,通過xjs.fn.init返回其本身,這樣我通過xjs("")獲取的物件就是乙個xjs自己了。

2.給xjs起個簡單的別名如$

window.$ = window.xjs = xjs;
這樣就能直接用$("")的形式來使用了。

3.防止命名衝突

(function() 

xjs.fn = xjs.prototype = }}

window.$ = window.xjs = xjs;

})();

4.實現xjs.html()

因為通過$或xjs返回的物件已經是自己本身了,所以要使用innerhtml這類的js屬性或方法就必須要把xjs物件轉換成dom物件。所以可以跟jquery一樣來實現自己的方法。

(function() 

},html: function()

else

},version: "8.8.8"

}

如果不傳引數則獲取物件的html內容,如果傳入引數,則設定物件的html內為傳入的值。

為了使xjs例項物件繼承xjs原型初始的裡的方法和屬性,通過把xjs原型賦給xjs物件

xjs.fn.init.prototype = xjs.fn;
這樣,在使用的時候就能通過下面的形式來獲取version屬性
alert(t.version);
到此為止,乙個簡單模擬的xjs就完成了,完整**如下
(function() 

xjs.fn = xjs.prototype =

},html: function()

else

},version: "8.8.8"

}xjs.fn.init.prototype = xjs.fn;

window.$ = window.xjs = xjs;

})();

在頁面中引入上面這個js檔案後,就能像下面一樣使用了
var t = $("d1");

t.html("hello");

alert(t.html());

alert(t.version);

上面的d1為乙個html元素的id。

jquery 框架簡單分析

jquery外部用乙個匿名函式自執行 然後傳入引數 function w,undefined window jquery 在外面用了乙個匿名函式自執行 包裹 把變數 方法 函式 包裹在裡面 然後在對外提供介面 undefined既不是關鍵字 也不是保留字 所以要把undefined傳入進來 防止被惡...

簡單的原生js 模擬jquery方法

倉促的模擬敲一下就上傳來儲存了。object.prototype.fadein function speed speed return that 原生模擬jq中 fadeout 方法 object.prototype.fadeout function speed speed return that ...

jquery框架 jQuery工具

1.in arra y 2.inarray 2.inarr ay 2.merge 3.un ique 4.unique 4.uniqu e 4.parsejson 5.is arra y 6.isarray 6.isarr ay 6.isfunction 7.is empt yobj ect 8.i...