溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
jq對dom節點的操作相信大家都很熟悉，
$("input").val("value");
直接用$來獲取dom節點的方式也非常便捷方便，那么他是怎么實現的呢？
猜想
在沒看源碼之前，我的猜想是這樣的
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的對象里寫一些方法，就達到jq的這樣效果了。
實際
之后看了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的代碼寫在一個匿名函數里，這樣避免了重復命名對變量的影響，通過window.$ = jQuery;把$掛在windo下，實現域外使用$的操作。
其次，調用jQuery這個方法，return 一個jQuery.fn.init()的對象，jQuery.fn.init()本質上是一個構造函數，這樣$("input")的時候其實相當于已經new了一個對象。
但是怎么使用.val()方法呢，現在new出來的對象只有一個dom屬性（當然在我這個例子里是這樣的）。
所以，最后jQuery.fn.init.prototype = jQuery.fn;這句話格外關鍵，這句讓jQuery.fn.init也能使用val()這個方法，當然也能使用init方法了，
所以$("input").init("select").val("value")這種寫法也是正確的，而這種寫法的效果就是改變了select的值而沒有改變input的值。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
