前言

jq對(duì)dom節(jié)點(diǎn)的操作相信大家都很熟悉，

$("input").val("value");

直接用$來(lái)獲取dom節(jié)點(diǎn)的方式也非常便捷方便，那么他是怎么實(shí)現(xiàn)的呢？

猜想

在沒(méi)看源碼之前，我的猜想是這樣的

function Dom(selector){this.dom = document.querySelector(selector);this.val = function (content) {if(content){this.dom.value = content}else{return this.dom.value;}}}function $(selector) {return new Dom(selector);}$("input").val("value")

$()是一個(gè)function，這個(gè)function會(huì)返回一個(gè)new Dom的對(duì)象，這個(gè)new Dom的對(duì)象里寫(xiě)一些方法，就達(dá)到j(luò)q的這樣效果了。

實(shí)際

之后看了jq源碼的寫(xiě)法，果然不同凡響……

(function(window, undefined) {jQuery = function(selector, context) {return new jQuery.fn.init(selector, context);}jQuery.fn = jQuery.prototype = {init: function(selector, context) {this.dom = document.querySelector(selector)},val: function(content) {if(content) {this.dom.value = content} else {return this.dom.value;}}}jQuery.fn.init.prototype = jQuery.fn;window.$ = jQuery;})(window);$("input").val("value")

首先，將jq的代碼寫(xiě)在一個(gè)匿名函數(shù)里，這樣避免了重復(fù)命名對(duì)變量的影響，通過(guò)window.$ = jQuery;把$掛在windo下，實(shí)現(xiàn)域外使用$的操作。

其次，調(diào)用jQuery這個(gè)方法，return 一個(gè)jQuery.fn.init()的對(duì)象，jQuery.fn.init()本質(zhì)上是一個(gè)構(gòu)造函數(shù)，這樣$("input")的時(shí)候其實(shí)相當(dāng)于已經(jīng)new了一個(gè)對(duì)象。

但是怎么使用.val()方法呢，現(xiàn)在new出來(lái)的對(duì)象只有一個(gè)dom屬性（當(dāng)然在我這個(gè)例子里是這樣的）。

所以，最后jQuery.fn.init.prototype = jQuery.fn;這句話格外關(guān)鍵，這句讓jQuery.fn.init也能使用val()這個(gè)方法，當(dāng)然也能使用init方法了，

所以$("input").init("select").val("value")這種寫(xiě)法也是正確的，而這種寫(xiě)法的效果就是改變了select的值而沒(méi)有改變input的值。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。