前言

10年的龍南網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整龍南建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“龍南網(wǎng)站設(shè)計”,“龍南網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

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

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

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

猜想

在沒看源碼之前，我的猜想是這樣的

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")

$()是一個function，這個function會返回一個new Dom的對象，這個new Dom的對象里寫一些方法，就達到j(luò)q的這樣效果了。

實際

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

(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的代碼寫在一個匿名函數(shù)里，這樣避免了重復(fù)命名對變量的影響，通過window.$ = jQuery;把$掛在windo下，實現(xiàn)域外使用$的操作。

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。