JQuery 工作原理

jquery最重要的作用就是查詢dom節點，比瀏覽器原生的查詢方式更加優雅，比如html中的一張：

兩種查詢方式比較：

//原生介面
var image = document.getelementbyid('img');
//jquery 方法
var jqimgae = $('#img');

在jquery原始碼中，jquery()的實現方式：

jquery = function
( selector, context )

可以看到內部返回了乙個jquery.fn.init物件，用這種方式建立dom物件的好處是隱藏了new的過程，使用jquery(『#id』)建立物件更加簡潔，而不是new jquery(『#id』)。

jquery.fn.init()函式實際是封裝了查詢dom節點的原生介面，下面是init()的簡潔版實現，jquery中的實現複雜的多，還要考慮瀏覽器相容性問題。

jquery.fn = jquery.prototype = 
return this;
}，each:function()
...}

可以看到init()函式中將dom節點賦值給了自己this[i] = nodelist[i]，因此返回的init物件是乙個類陣列，包含了dom節點列表，還包括一些其他的方法。

其中jquery.fn = jquery.prototype則可以隱藏prototype屬性，在後面為jquery新增新方法時可以使用

jquery.fn.each = function()
jquery.fn.map = function()

但是new jquery.fn.init()中返回this，即init物件，此時init物件上並沒有新增任何方法，於是：

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

這樣init物件繼承了jquery.fn中的所有方法，就可以愉快地使用了。

jquery中還使用了大量extend()

jquery.extend = jquery.fn.extend = function
()

該函式主要目的是簡化新增擴充套件函式的過程：

例如：

jquery.fn.each = function()
jquery.fn.map = function()
jquery.fn.css = function()

可以簡化為

jquery.fn.extend(,
map:function(),
css:function(),
})

而jquery.extend和jquery.fn.extend區別像是乙個靜態函式，乙個例項函式，前者使用方法為：

jquery.extend(
})jquery.iswindow(window) //true

而後者

jquery.fn.extend(
})jquery('#img').addclass('small')

jQuery選擇的工作原理和優化

至於有那些選擇器，在幫助手冊中都有，自己去看，這篇主要是分析他的工作原理，而優化我們寫的選擇器，尤其在頁面內容很多的情況下，更應該需要優化。下邊就言歸正傳。當我們使用選擇器的時候 selector,content 就會執行init selectot,content 我們看看inti中是怎樣執行的 i...

JQuery 工作原理

jQuery選擇的工作原理和優化

jQuery選擇的工作原理和優化

jQuery選擇的工作原理和優化

相關推薦