JavaScript（14）jQuery（JavaScript 庫）

JavaScript 架構（庫）
JavaScript 進階程式設計（特別是對瀏覽器差異的複雜處理），通常很困難也很耗時。為了應對這些調整，許多的 JavaScript (helper) 庫應運而生。
這些 JavaScript 庫常被稱為 JavaScript 架構。

jQuery
jQuery 是目前最受歡迎的 JavaScript 架構。它使用 CSS 選取器來訪問和操作網頁上的 HTML 元素（DOM 對象）。jQuery 同時提供 companion UI（使用者介面）和外掛程式。
jQuery 極大地簡化了 JavaScript 編程，很容易學習。

jQuery 庫 - 特性
jQuery 是一個 JavaScript 函數庫。jQuery 庫包含以下特性：

• HTML 元素選取
• HTML 元素操作
• CSS 操作
• HTML 事件函數
• JavaScript 特效和動畫
• HTML DOM 遍曆和修改
• AJAX
• Utilities
  如何使用呢？以前沒用過，感覺很茫然啊。。。慢慢摸索著弄弄看。。。
  
  一、下載
  到jQuery官網http://jquery.com/，進行下載，我選擇了“下載未壓縮的，發展的jQuery 1.11.1”。
  簡單介紹下：
  未壓縮的檔案，最好在開發或調試過程中使用；壓縮檔，可以節省頻寬，提高生產效能，用於實際的網站中。
  jQuery的2.x與jQuery的1.x具有相同的API，但不支援Internet Explorer 6，7，8。
  
  下載下來的東西是：jquery-1.11.1.js（jQuery 庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函數。）
  如果不願意在自己的電腦上存放 jQuery 庫，那麼可以從 Google 或 Microsoft 等地方，載入 CDN jQuery 核心檔案。
  
  二、使用
  比如現在呢，我想實現一個隱藏的效果，比如我點擊一段文字，這段文字就會消失。那如何利用jQuery來實現呢？
  
  首先，我要查閱一下jQuery參考手冊。網址：http://www.w3school.com.cn/jquery/jquery_reference.asp
  這裡面呢，有個“效果”選項，“效果”裡面呢，有個 hide() 函數，函數說明是：隱藏被選的元素。
  看來用 hide() 函數可以實現我想實現的功能，點擊“ hide() ”可以看看如何使用該函數。
  
  然後，看一下如何引用“jquery-1.11.1.js”。
  把“jquery-1.11.1.js”放在代碼的同級目錄下，通過以下代碼來引用“jquery-1.11.1.js”：
  

  <script src="jquery-1.11.1.js"></script>

  
  如果不希望下載並存放 jQuery，那麼也可以通過 CDN（內容分髮網絡） 引用它。
  Google和微軟的伺服器都存有 jQuery 。從 Google 或 Microsoft 載入 CDN jQuery 核心檔案：
  

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js"></script>

  使用Google或微軟的 jQuery，有一個很大的優勢：
  許多使用者在訪問其他網站時，已經從Google或微軟載入過 jQuery。所以結果是，當他們訪問你的網站時，會從緩衝中載入 jQuery，這樣可以減少載入時間。同時，大多數 CDN 都可以確保當使用者向其請求檔案時，會從離使用者最近的伺服器上返迴響應，這樣也可以提高載入速度。
  對於 Google ，如果想訪問新版本（假設不知道新版本的具體版本號碼），那麼可以把“1.11.1”改為“1.11”或“1”，Google會返回相應系列中最新的可用版本。
  
  接下來，學習一下jQuery 文法。
  jQuery 文法是為 HTML 元素的選取編製的，可以對元素執行某些操作。
  
  基礎文法是：$(selector).action()
  貨幣符號$定義 jQuery
  選擇符（selector）“查詢”和“尋找” HTML 元素
  jQuery 的 action() 執行對元素的操作
  
  樣本：
  $(this).hide() - 隱藏當前元素
  $("p").hide() - 隱藏所有段落
  $(".test").hide() - 隱藏所有 class="test" 的所有元素
  $("#test").hide() - 隱藏所有 id="test" 的元素
  提示：jQuery 使用的文法是 XPath 與 CSS 選取器文法的組合。
  
  注意：
  jQuery 函數應該位於一個 document ready 函數（文檔就緒函數）中：
  

  $(document).ready(function(){--- jQuery functions go here ----});

  這是為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼。如果在文檔沒有完全載入之前就運行函數，操作可能失敗。
  
  接下來就是代碼啦：
  

  <script src="jquery-1.11.1.js"></script>  //引用jquery<script>$(document).ready(function(){ //文檔就緒函數 $("p").click(function(){ //要消失的元素，如何操作該元素會觸發效果   $(this).hide(); //觸發怎樣的效果  });});</script>
  如果您點擊我，我會消失。
  點擊我，我會消失。
  也要點擊我哦。

  
  嗯，實踐了一下，感覺不錯。我在我的網站上運用了一下，點擊開啟連結。