從零玩轉jQuery-初識jQuery

課前須知: 學習jQuery前必須先掌握JavaScript
jQuery雖然屬於前端技術, 但是對於後端人員(諸如Java、PHP等,也需要掌握)

jQuery是什麼？

• jQuery是一款優秀的JavaScript庫，從命名可以看出jQuery最主要的用途是用來做查詢（jQuery=js+Query）.

• 在jQuery官方Logo下方還有一個副標題（write less, do more）, 體現了jQuery除了查詢以外,還能讓我們對HTML文件遍歷和操作、事件處理、動畫以及Ajax變得更加簡單

• 體驗jQuery

  • 原生JS設定背景（先不要求看懂程式碼，先看看誰更爽）

• 使用jQuery設定背景

為什麼要使用jQuery？

• 強大選擇器: 方便快速查詢DOM元素

  • 如上面例項所展示一樣，透過jQuery查詢DOM元素要比原生js快捷很多

  • jQuery允許開發者使用CSS1-CSS3幾乎所有的選擇器,以及jQuery獨創的選擇器

• 鏈式呼叫: 可以透過.不斷呼叫jQuery物件的方法

  • 如上面例項所展示一樣，jQuery可以透過.（點）.不斷呼叫jQuery物件的方法，而原生JavaScript則不一定

• 隱式遍歷(迭代): 一次操作多個元素

• 讀寫合一: 讀資料/寫資料使用是一個函式

• 事件處理

• DOM操作(C增U改D刪)

• 樣式操作

• 動畫

• 豐富的外掛支援

• 瀏覽器相容(前端開發者痛點)

  • 開發板: 所有程式碼沒有經過壓縮,體積更大(200-300KB)

  • 生產版:所有程式碼經過壓縮,提及更小(30-40KB)

  • 初學者為了更好的理解jQuery編碼時使用開發板,專案上線時為了提升訪問速度使用生產版

  • 檢視百度網頁原始碼使用1.x

  • 檢視騰訊網頁原始碼使用1.x

  • 檢視京東網頁原始碼使用1.x

  • 綜上所述學習1.x,選擇1.x

  • 

  • ：相容ie678，但相對其它版本檔案較大，官方只做BUG維護，功能不再新增，最終版本：1.12.4 (2016年5月20日).

  • ：不相容ie678，相對1.x檔案較小，官方只做BUG維護，功能不再新增，最終版本：2.2.4 (2016年5月20日)

  • ：不相容ie678，只支援最新的瀏覽器，很多老的jQuery外掛不支援這個版本，相對1.x檔案較小，提供不包含Ajax/動畫API版本。

  • 應該選擇幾點幾版本jQuery?

  • 應該使用開發板還是生產版?

• ... ...

如何使用jQuery？

• 下載jQuery庫

  • 下載地址:

• 引入下載的jQuery庫

• 編寫jQuery程式碼

作者：極客江南
連結：