jQuery 3教程(一)：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吧，誰知道用的三方庫裏面有沒有坑。