讀jq之一(jq物件的組成)

2021-08-30 09:15:01 字數 1797 閱讀 8645

以下是jquery 1.3.2 **片段

...

jquery = window.jquery = window.$ = function( selector, context ) ;

jquery.fn=jquery.prototype=,

...}jquery.fn.init.prototype = jquery.fn;

...

初看上去像是在用原型方式 定義乙個類jquery($),但實際我們使用時是函式呼叫$("#id"),卻不是new $("#id")。

function jquery中new了乙個function init的例項,然後返回。見具名函式的呼叫方式(3) 。jquery寫的實在詭異,它把init又掛在了function jquery的prototype上,閱讀起來有些繞人。

jquery.fn.init.prototype = jquery.fn;是關鍵的一句。該句把function jquery的原型賦值給了function init的原型。當呼叫$("#id")時返回的物件組成包括兩個部分。

1,由function init中this帶的(如length,context);

2,由function jquery的prototype帶的(如size,each,attr等方法);

模仿jquery來寫乙個

function $(selector)

$.prototype=else

this.length=1;

}, attr:function(name,value),

hide:function(),3000);

return this;//鏈式呼叫 }}

$.prototype.init.prototype=$.prototype;

簡單起見,這裡$只傳html element或元素id,this上掛了length屬性,賦值為1。當我們如下呼叫時

var obj = $();

console.dir(obj);

這行**實際沒有什麼意義,只是為了測試呼叫後obj的組成。firebug控制台輸出如下:

length:0;

init:function

attr:function

hide:function

即obj物件是由function init中this及function $.prototype組成的。

測試下$.prototype上的方法(假設頁面body新增了id=content):

$("content").attr("bgcolor","red").hide();
先呼叫attr新增了id=content屬性,稍候就隱藏了。

總結下:

jquery物件指的是jquery.prototype.init的例項,簡單的說就是new jquery.prototype.init。

這裡jquery.prototype.init的型別是function,可以看成是乙個類。原始碼中如下:

jquery = window.jquery = window.$ = function( selector, context ) ,
jquery物件由以下部分組成:

1,掛在jquery.prototype.init中的this上的屬性或方法。

2,掛在jquery.prototype.init.prototype上的屬性或方法。

3,因為把jquery.prototype賦值給了jquery.prototype.init.prototype,所以掛在jquery.prototype上的屬性和方法也jquery物件的一部分。

jq遍歷的基礎語法之一

1 contents 和 children 方法類似,不同的是前者在結果 jquery 物件中包含了文字節點以及 html 元素。2 each 3 end 方法結束當前鏈條中的最近的篩選操作,並將匹配元素集還原為之前的狀態。4 eq 方法將匹配元素集縮減值指定 index 上的乙個。如果index為...

讀jquery之一(jquery物件的組成)

以下是jquery 1.3.2 片段 js jquery window.jquery window.function selector,context jquery.fn jquery.prototype jquery.fn.init.prototype jquery.fn jquery windo...

Dom物件和jq物件的轉換

dom物件轉jquery物件 使用 函式進行轉化 dom物件 直接獲取jquery物件的方式 idvalue dom物件轉jquery物件 var btn document.getelementbyid btn dom物件 var btn btn 將dom物件btn轉換為jquery物件 btn j...