jQuery 3教程(一)：jQuery介紹

aqv發表於2016-03-10
jQuery

原文地址：jQuery 3教程(一)：jQuery介紹

Introduction

本系列文章不是介紹基礎jQuery語法。關於jQuery基礎教程，可以參考W3School的jQuery教程。
目前大部分程式設計師對於jQuery的使用還停留在1.x版本上，本系列文章將介紹目前最新的jQuery3.x。

jQuery是什麼？

提到jQuery，就不得不提JavaScript，JavaScript曾經和VBScript一樣，作為瀏覽器指令碼語言使用，在那個標準匱乏的年代，一度瀕臨死亡。不過好在Ajax的出現，大大改善了網頁的使用者體驗，同時也拯救了JavaScript。
而今天JavaScript不僅打敗了同時期的VBScript，成為前端指令碼語言的霸主，甚至出現了Node.js這種用JavaScript實現的後端伺服器，效能完爆Apache, 甚至不輸給Nginx，前幾年甚至成為了github上的最熱門的專案之一。
言歸正傳，jQuery是什麼呢？簡單來說，就是一個JavaScript的三方庫，用於簡化瀏覽器端的指令碼程式設計。
jQuery能做的事實際上不僅僅是簡化指令碼程式設計，使用jQuery可以縮小HTML檔案的體積，可以讓Ajax互動更簡單，甚至可以避免因瀏覽器相容性導致的問題（IE瀏覽器在這個問題上簡直是大坑）。
記住jQuery的哲學：Write less, do more.（寫的更少，做的更多）

一個jQuery的Demo

在沒有jQuery以前，為了知道哪一個選擇框被選中，你的程式碼可能是這麼寫的：

var value;
var radioGroup = document.getElementsByTagName(`radioGroup`);
for (var i = 0; i < radioGroup.length; i++) {
  if (radioGroup[i].type === `radio` && radioGroup[i].name === `jQuery` && radioGroup[i].checked) {
    value = radioGroup[i].value;
    break;
  }
}

而有了jQuery，你只需要：

var value = jQuery(`input:radioGroup[name="jQuery"]:checked`).val();

是不是簡潔了很多？

jQuery版本

jQuery可以在jQuery CDN下載，下面給出不同瀏覽器對jQuery版本的支援程度：

瀏覽器 jQuery 1 jQuery 2 jQuery 3 jQuery Compat 3
IE 6+ 9+ 9+ 8+
Chrome 支援 支援 支援 支援
Firefox 支援 支援 支援 支援
Safari 5.1+ 5.1+ 7.0+ 7.0+
Opera 支援 支援 支援 支援
iOS 6.1+ 6.1+ 7.0+ 7.0+
Android 2.x 2.3 2.3 2.3 2.3
Android 4.x 4.0+ 4.0+ 4.0+ 4.0+

IE挺坑的，對吧？下面來介紹下jQuery的版本：

  1. jQuery 1
    這個版本是相容性最強的，但是由於出生在戰火紛飛的年代，體積和效能並不太好，尤其是參與了瀏覽器相容性大戰，導致很多的trick。

  2. jQuery 2
    誕生於2013年4月，和平年代的產物，開始側重現代瀏覽器的優化，但是由於犧牲了IE的相容性，大部分程式設計師不會使用。

  3. jQuery 3
    誕生於2014年12月，jQuery Foundation一看，大家怎麼還在用jQuery 1啊？那麼就拆除兩個版本吧，jQuery 3，適用於現代瀏覽器，jQuery Compat 3，適用於歷史瀏覽器（其實就是老IE）。

當然，jQuery 3優於jQuery 2，jQuery Compat 3優於jQuery 1。
經過jQuery Foundation這麼一折騰，其實程式設計師更迷惑了，那到底用哪個版本啊？
其實可以根據你的應用場景來選擇：

  1. 企業內部：必須jQuery 3啊，為了證明我們是前衛的程式設計師。什麼？瀏覽器不相容？IT去看看，幫他裝個瀏覽器。

  2. 企業外部：必須jQuery 1啊，吸引客戶，誰知道客戶用的是什麼作業系統，什麼瀏覽器。

  3. 非IE使用者：jQuery 3吧，對於用IE的使用者，給他掛個banner：請不要使用IE瀏覽器。

  4. 手機客戶端：可以jQuery 3了，用iOS的誰不換新的？

  5. 歷史網站維護：jQuery 1吧，誰知道用的三方庫裡面有沒有坑。

相關文章