進度條

jQuery是什麼,它跟JavaScript有什麼關係?它又有什麼能耐呢?

如果開發網頁的話一定聽過JavaScript,可是常常網路上的範例都會出現$的符號,那是什麼意思呢。

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. jQuery介紹 (所屬課程)

02. jQuery的選擇器 (所屬課程)


以下正式開始文章


 $ 字符在現在的網頁開發常常出現,尤其是新手剛學JavaScript時在網路上找範例常常看到"$"字號,然後就跳過。

為什麼跳過? 因為他們知道每次都不會動,是壞掉的程式碼。

 

不過,真的壞掉了嗎?

 

現在的程式設計師在新手時期通常會Javascript與jQuery一起學,然後就搞不清楚相依的關係,混雜在一起使用而且程式碼甚至不會動,相當困擾。

 

這裡提供我們的解說,希望能幫助大家澄清一些觀念。

 

 

1. jQuery是什麼?

jQuery是一個以Javascript來編寫的函式庫,簡單來說就是先幫你實作了很多Javascript的函數功能,用途是讓開發者可以更輕鬆方便的製作網站功能,最重要的是它是免費的。

 

 

2. 開發網頁一定要會jQuery嗎?

如果這個問題發生在幾年前,答案應該會是否定的。不過現在jQuery幾乎已經是網頁前端開發必備技能。現在很少面試會特別問你會不會jQuery,通常預期會JavaScript就是會jQuery。

 

而你在使用進階的其他三方資料庫時會發現很多都依賴jQuery,例如Bootstrap

  圖中箭頭所指文字即為"所有插件都依賴jQuery",取自Bootstrap 3(Bootstrap 4 一樣相依jQuery)

 

 

3. 我很討厭使用第三方的函式庫,有可能使用Javascript做出和jQuery一樣的功能嗎?

當然可以,jQuery是用Javascript寫成的,本質上還是Javascript。所以他寫的出來你也一定寫得出來(只是看花多少時間而已)。

 

 

4. jQuery那麼多版,我要用哪一版?

一般來說其實jQuery 1.x 就很穩定了,2.x之後的版本不支援IE 6, 7, 8 ,也就是Windows XP所附帶的版本。不過已經很少人在使用Windows XP所以不是問題。主要是看如果有使用其他的函式庫有沒有指定版本。如果沒有以上疑慮,用最新的即可,目前是v3.3.1。

 

如果你直接使用CDN,也就是放在公開的網路空間讓任何人連的網路空間的版本。你會看到他除了版號不同外,還有uncompressed、minified、slim 與 slim minified四種版本。

 

uncompressed 代表為壓縮一般版,直接用編輯器可以看到他是怎麼寫的。

minified 代表壓縮版,除去了換行與空白字元,讓檔案比較小,讀取比較快。

 

新的3.x版多了slim, slim minified版,主要看起來是閹割掉了一些關於animate動畫與ajax功能。(消息來源)

 

如果你看不懂我在說什麼的話,用minified版就對了,因為你也不會需要改變它的核心程式碼。

 

 

 

 

5. 為什麼網路上的範例都不能動?

要使用jQuery你必須要先加載jQuery。例如:  


(取自 jQeury CDN, 版本3.2.1, min 為最小化版)

 

 

注意這段程式碼必須要在你的寫的jQuery程式碼的前面,例如將這段程式碼放在<head>裡面就是個好主意。

 

特別注意的是如果你用WordPress,他預設就有使用jQuery,而且將他放在<body>的最下面。這是一種技巧,讓一般HTML與文字先顯示出來,再讓Javascript或 jQuery 執行。避免因為JavaScript檔案過大而導致網站要等很久才會顯示。不過現在4G網路都很快,加上有cache,很難說這是有必要的做法 。

 

也有人在<script>裡面加上async,但是如果你直接寫jQuery在 .html 或是用任何inline的方式去寫的話(inline指的就是直接寫在檔案裡,例如寫在rails的.erb檔裡,PHP的.php檔之類的,反正就不是拉出來寫在.js檔裡),你都有可能回得到$ is undefined的結果。這是因為在執行該語法的時候,jQuery檔案還沒下載完成。所以寫法上面必須要注意一下。

 

 

 

6. 除了必要的其他的函式庫必要的使用外,jQuery到底有什麼好處,什麼時候需要使用它?

使用jQuery最大的好處就是選擇器(selector)。

除了一些新潮的架構設計與套件完全使用Javascript來長出網頁內容外,大部分使用時機是改變HTML元件的顏色、文字、狀態。也就是改變HTML元件的CSS、HTML本身的屬性(Attributes)或是HTML容器的內容。

 

例子:

  1. 改變CSS: display: none, 讓元件消失或顯示。
  2. 改變Attribute: < button> 的 disabled、<iframe>的src做出影片播放器。
  3. 改變HTML內容 : <table>底下多長出個<tr>、做出像Excel的功能。

     

這時候如果用Javascript選擇器,你必須寫醜醜的 document.getElementById() 或是 document.getElementsByClassName()。

 

不過這邊要注意JavaScript 語法中的 getElementById("id")傳回來的是單個元件"Element",  getElementsByClassName("className")傳回來的會是複數元件陣列Array。這是因為一個id只能被一個元件所擁有,而Class可以被複數個元件所使用。

 

但如果你使用的是jQuery的話,語法:  $("#id"),短短的一句話就可以用id抓到物件,用Class的話可以用$(".className") 去找,跟CSS的寫法是一模一樣的!! 而且回傳值的一定是Array。不過如果你是用ID抓的話,回傳的就算是Array,裡面還是只有一個值。但是這樣有一個好處就是你不需要去寫if-else判斷回來的是哪種型態,都可以直接用for或是foreach迴圈去跑。

 

除此之外,jQuery如果依據DOM的概念,要找到上一層的父元件(Parent)或是下一層子元件(children)都是很容易的事。通常都是寫一句語法就可以了找到了。

 

 

7. 除了比較方便的Selector外,還有什麼其他常用的功能嗎?

有,jQuery在網頁元件動作上也是滿方便的,他沒有辦法做出很像影片動畫的那種"動畫"(或是很麻煩),但是它可以讓你的元件動作不會很機械有斷點,變得很流暢。

 

jQuery的animate()函數,用途就是拿來做動畫的。

 

 

 

 

但要更直接的範例的話,可以看他的姐妹套件jQuery UI,這就有很多的範例可以使用。只是jQuery UI 在幾年前還算是很"時尚",但現在已經顯得滿"復古"了。不過它的動作還是很流暢,所以使用上只需要在元件的外觀花些心思修飾一下看起來也可以很現代。

 

 

 

 

總而言之,就筆者而言,如果有寫到需要JavaScript的網站的話,一定會使用jQuery,因為方便。使用的是第幾版倒是覺得沒太大差別,因為最基本的selector功能在很前面的版本就穩定的了。

 

如果對於jQuery 與 JavaScript 想要有更進階的瞭解的話,可以參考我們的相當完整的前端初級課程

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊