Pages

系列文章

2014/12/16

【JQuery】【番外篇】$符號到底代表什麼?



相信大家在使用JQuery的時候都會有一個疑問
那就是JQuery中的「$」符號到底是什麼?是否一定要用這個符號?
這個疑問就算是自修JQuery那麼久的我
也常常會在夜深人靜時 想起這個讓人魂牽夢縈的問題
今天就由小弟water帶領大家一起來探討這個問題~!
為了完成這個任務小弟上網拜了一下GOOGLE大神
結果發現關於「$」眾說紛紜阿~稍微整理之後就有出現了比較可靠的方法了
在開始說明「$」符號的定義之前我們要先了解「JQuery」到底是什麼?
來看看網路上對JQuery的定義
「jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作。」
看完上面這一段話大家有沒有發現什麼?(想了解更多請洽:維基百科)
是的相信很多初學人都把JQuery當成是一個新的語言
或是覺得JQuery(以下簡稱JQ)是Javascript(以下簡稱JS)衍生出來的新語言(就像C++跟JAVA的關係一樣)
但是維基百科的這一段話已經明白的告訴我們JS跟JQuerQ之間的關係了
那就是「JQ只是JS衍生出來的函式庫」
所以我們可以將JQ看程式JS中的一個類別,這個類別的目的在於
簡化HTML與JS之間的操作以及縮短程式碼,有這個概念以後再了解「$」符號上衣該會比較有幫助

首先我們可以先來看到網路上比較常有對於$號的定義
那就是"「$」是jquery的選擇器",這段話可以理解成下面這段程式碼
$("#test") = getElementById("test")

這樣子的說法其實我個人並不是很認同
因為「$」並不是一個真正的選擇器,所以用選擇器來定義他並不合適
那麼「$」的定義到底是什麼呢? 我們打開JQuery.js(請下載Source檔查看)
可以再開頭看到一段程式碼
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;

.........
這段程式碼基本上已經告訴我們「$」符號實際上是一個JQuery的別名
這樣說大家一定也只是有一個模糊的概念
以物件導向的概念來說,其實JQuery就是一個類別
當我們要使用這個類別的時候要先將這個類別實體化,也就是說原本要呼叫JQuery的話要這樣寫
jQuery("#first").click(function(){
  alert("123");
});
而在JAVA或C#中實體化一個類別則是會用一個變數去代表它
而在JS中「$」符號就代表這個變數,可以參考下面範例
下述範例與上面的範例呈現出的效果是一樣的
$("#first").click(function(){
  alert("123");
});
到此為止我們可以明確的知道其實「$」只是JQuery這個類別的一個別名
用來讓我們少打幾個字而已,實際上它代表的就是JQuery這個類別(函式庫)
有人一定會問說為什麼要用「$」符號,這個問題我也不知道
其實用「$」符號代表有時候也會出現問題,像是早期有再用JQuery跟AJAX的就知道
這兩個套件事會因為「$」造成衝突而無法正常使用的
不過既然官方都是用「$」那我們就只好跟進囉~!
大家如果不喜歡用「$」符號也可以用下面介紹的方式
將「$」替換成自己喜歡的變數
var jq = $;
jq("#first").click(function(){
  alert("1234");
});

要記得在一開始就要宣告不然會有BUG唷~!
今天的講解就到這邊結束~謝謝大家的觀賞

沒有留言:

張貼留言