jquery中為什么能用$操作
前言
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的對象里寫一些方法,就達(dá)到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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用jQuery實現(xiàn)鼠標(biāo)點擊左右按鈕滑動切換
在做web前端開發(fā)的時候經(jīng)常遇到圖片滑動切換特效,接下來通過本文給大家分享使用jQuery實現(xiàn)鼠標(biāo)點擊左右按鈕滑動切換特效,感興趣的朋友參考實現(xiàn)代碼2017-08-08jquery實現(xiàn)標(biāo)題字體變換的滑動門菜單效果
這篇文章主要介紹了jquery實現(xiàn)標(biāo)題字體變換的滑動門菜單效果,通過調(diào)用自定義函數(shù)實現(xiàn)頁面tab切換及字體樣式同步變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jquery得到font-size屬性值實現(xiàn)代碼
font-size屬性想必大家并不陌生吧,此屬性控制字體的大小,在本文將為大家介紹下如何使用jquery獲取font-size屬性值,感興趣的朋友可以參考下2013-09-09Raphael一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
Raphael是一個用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ),你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細(xì)介紹,感興趣的朋友可以了解下哦2013-01-01jQuery實現(xiàn)帶遮罩層效果的blockUI彈出層示例【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)帶遮罩層效果的blockUI彈出層,可實現(xiàn)帶有彈出遮罩層效果的彈出對話框功能,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09