jQuery是什麼 ?

jQuery是一個快速，簡潔的JavaScript庫，由John Resig建立於2006年，有一個很好的座右銘：少寫，多做。

jQuery 簡化了 HTML 文件遍歷，事件處理，動畫和Ajax互動快速Web開發的。

jQuery是一個JavaScript工具包，旨在簡化各種任務，通過編寫更少的程式碼。這裡是重要的支援jQuery的核心功能列表：

DOM操作: jQuery 很容易地選擇DOM元素，遍歷和修改其內容，通過使用跨瀏覽器的開源選擇器引擎稱為Sizzle(嘶嘶聲)。
事件處理: jQuery提供了一個優雅的方式來捕捉各種各樣的事件，比如使用者點選一個連結，而無需雜亂的HTML程式碼本身與事件處理程式.
AJAX 支援: jQuery 幫助採用AJAX技術，開發一個具有響應性的和功能豐富的網站.
動畫: jQuery提供了大量的內建動畫效果，可以在網站中使用。
輕量級: jQuery是非常輕量級的庫 - 大小約19KB（精縮和gzip壓縮）。
跨瀏覽器支援: jQuery有跨瀏覽器的支援，以及在IE6.0+，FF2.0+，Safari 3.0以上版本，Chrome和Opera9.0+
最新技術: jQuery的支援CSS3選擇器，基本的XPath語法。

如何安裝jQuery？

這是很簡單的事情需要設定使用jQuery庫。必須進行兩個簡單的步驟：

轉到下載頁面下載最新版本。
現在把 jquery1.8.min.js 下載檔案在網站的目錄，例如/jquery。

下載的檔案名 jquery1.8.min.js 版本可能會有所不同。

jQuery沒有要求任何特殊的安裝非常類似於JavaScript，我們並不需要任何編譯或建立階段使用jQuery。

如何使用jQuery庫？

現在，可以在HTML檔案內容如下：包括jQuery庫

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.8.min.js"></script>
   <script type="text/javascript">
      // you can add our javascript code here 
   </script>   
</head>
<body>
........
</body>
</html>

如何呼叫jQuery庫功能？

由於幾乎所有的東西，我們做的時候使用jQuery讀取或操縱的文件物件模型（DOM），我們需要確保我們開始新增事件等，只要DOM準備好。

如果您想要一個事件工作網頁上，應該呼叫它裡面的$(document).ready() 函式。它裡面的一切都將載入盡快DOM載入之前載入頁面內容。

要做到這一點，我們需要註冊一個ready事件的檔案如下：

$(document).ready(function() {
   // do stuff when DOM is ready
 });

呼叫任何jQuery庫函式，使用HTML指令碼標籤，如下圖所示：

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   // <![CDATA[
   $(document).ready(function() {
      $("div").click(function() {
        alert("Hello world!");
      });
   });
   // ]]>
   </script>

</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

如何使用自定義指令碼？

這是更好地在自定義的JavaScript檔案：custom.js寫我們的自定義程式碼，具體如下：

/* Filename: custom.js */
$(document).ready(function() {
  $("div").click(function() {
	alert("Hello world!");
  });
});

現在，我們可以在HTML檔案如下包括custom.js檔案：

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.8.2.min.js"></script>
   <script type="text/javascript" 
   src="/jquery/custom.js"></script>
</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

使用多個庫：

可以使用多個庫都在一起，要彼此沒有衝突。例如，可以用 jQuery 和 MooTool javascript庫在一起。

可以檢視jQuery noConflict方法的更多細節。

下一步是什麼？

不要擔心太多，如果不明白上面的例子。他們很快在隨後的章節學習和熟悉。

下一章將試圖掩蓋一些基本的概念都來自傳統的JavaScript。