jquery中為什么能用$操作
前言
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ì)象里寫一些方法,就達(dá)到j(luò)q的這樣效果了。
實(shí)際
之后看了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的代碼寫在一個(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")這種寫法也是正確的,而這種寫法的效果就是改變了select的值而沒(méi)有改變input的值。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery進(jìn)度條插件 Progress Bar小問(wèn)題解決
今天遇到一個(gè)進(jìn)度條的小問(wèn)題,搞的我小糾結(jié)了一會(huì),最后感謝同事分享文章,得以結(jié)局,呵呵,小經(jīng)驗(yàn)還是要保存的2011-07-07使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
在做web前端開(kāi)發(fā)的時(shí)候經(jīng)常遇到圖片滑動(dòng)切換特效,接下來(lái)通過(guò)本文給大家分享使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換特效,感興趣的朋友參考實(shí)現(xiàn)代碼2017-08-08使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果,需要的朋友可以參考下2017-08-08jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果,通過(guò)調(diào)用自定義函數(shù)實(shí)現(xiàn)頁(yè)面tab切換及字體樣式同步變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09用Juery網(wǎng)頁(yè)選項(xiàng)卡實(shí)現(xiàn)代碼
現(xiàn)在jquery比較流行,很多的選項(xiàng)卡效果可以通過(guò)jquery來(lái)實(shí)現(xiàn)。2011-06-06jquery得到font-size屬性值實(shí)現(xiàn)代碼
font-size屬性想必大家并不陌生吧,此屬性控制字體的大小,在本文將為大家介紹下如何使用jquery獲取font-size屬性值,感興趣的朋友可以參考下2013-09-09Raphael一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù)
Raphael是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù),它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ),你可以通過(guò) JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來(lái)詳細(xì)介紹,感興趣的朋友可以了解下哦2013-01-01jQuery noConflict() 方法用法實(shí)例分析
這篇文章主要介紹了jQuery noConflict() 方法用法,結(jié)合實(shí)例形式分析了jQuery noConflict() 方法基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)帶遮罩層效果的blockUI彈出層示例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶遮罩層效果的blockUI彈出層,可實(shí)現(xiàn)帶有彈出遮罩層效果的彈出對(duì)話框功能,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09