jQuery是一個JavaScript函數庫。
jQuery極大地簡化了 JavaScript 程式設計。
jQuery庫包含以下功能：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 周遊和修改
- AJAX
- Utilities
jQuery庫是一個 JavaScript 檔案，您可以使用 HTML 的 <script> 标簽引用它：
jQuery 文法
jQuery 文法是通過選取 HTML 元素，并對選取的元素執行某些操作。
基礎文法：$(selector).action()
- 美元符号定義 jQuery
- 選擇符（selector）"查詢"和"查找" HTML 元素
- jQuery 的 action() 執行對元素的操作
執行個體:
- $(this).hide() - 隐藏目前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 是為事件處理特别設計的。
什麼是事件？
頁面對不同通路者的響應叫做事件。
事件處理程式指的是當 HTML中發生某些事件時所調用的方法。
執行個體：
- 在元素上移動滑鼠。
- 選取單選按鈕
- 點選元素
在事件中經常使用術語"觸發"（或"激發"）例如："當您按下按鍵時觸發 keypress 事件"。
jQuery 選擇器
jQuery選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML元素。它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery中所有選擇器都以美元符号開頭：$()。
元素選擇器
jQuery元素選擇器基于元素名選取元素。
在頁面中選取所有 <p> 元素:
$("p")
執行個體
使用者點選按鈕後，所有 <p> 元素都隐藏：
執行個體
$(document).ready(function(){$("button").click(function(){ $("p").hide(); }); });
#id 選擇器
jQuery#id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，是以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素文法如下：
$("#test")
執行個體
當使用者點選按鈕後，有 id="test" 屬性的元素将被隐藏：
執行個體
$(document).ready(function(){$("button").click(function(){ $("#test").hide(); }); });
.class 選擇器
jQuery類選擇器可以通過指定的 class 查找元素。
文法如下：
$(".test")
執行個體
使用者點選按鈕後所有帶有屬性的元素都隐藏：
執行個體
$(document).ready(function(){$("button").click(function(){ $(".test").hide(); }); });
什麼是事件？
頁面對不同通路者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。
執行個體：
- 在元素上移動滑鼠。
- 選取單選按鈕
- 點選元素
jQuery 事件方法文法
在 jQuery 中，大多數 DOM 事件都有一個等效的jQuery 方法。
頁面中指定一個點選事件：
$("p").click();
下一步是定義什麼時間觸發事件。您可以通過一個事件函數實作：
$("p").click(function(){// 動作觸發後執行的代碼!! });
jQuery - AJAX 簡介
jQuery提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法，您能夠使用HTTP Get 和 HTTP Post 從遠端伺服器上請求文本、HTML、XML或JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。
jQuery - AJAX load() 方法
jQueryload() 方法是簡單但強大的 AJAX 方法。
load()方法從伺服器加載資料，并把傳回的資料放入被選元素中。
文法:
$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字元串鍵/值對集合。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
這是示例檔案（"demo_test.txt"）的内容：
<h2>jQueryAJAX 是個非常棒的功能！</h2> <p id="p1">這是段落的一些文本。</p>
下面的例子會把檔案 "demo_test.txt" 的内容加載到指定的<div> 元素中：
執行個體
$("#div1").load("demo_test.txt");
也可以把 jQuery 選擇器添加到 URL 參數。
下面的例子把 "demo_test.txt" 檔案中id="p1" 的元素的内容，加載到指定的 <div> 元素中：
執行個體
$("#div1").load("demo_test.txt#p1");
可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數。回調函數可以設定不同的參數：
- responseTxt - 包含調用成功時的結果内容
- statusTXT - 包含調用的狀态
- xhr - 包含 XMLHttpRequest 對象
下面的例子會在 load() 方法完成後顯示一個提示框。如果load() 方法已成功，則顯示"外部内容加載成功！"，而如果失敗，則顯示錯誤消息：
執行個體
$("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success") alert("外部内容加載成功!");if(statusTxt=="error") alert("Error: "+xhr.status+":"+xhr.statusText); }); });
jQuery - AJAX get() 和 post() 方法
jQueryget() 和 post() 方法用于通過 HTTP GET 或 POST 請求從伺服器請求資料。
HTTP 請求：GETvs. POST
兩種在用戶端和伺服器端進行請求-響應的常用方法是：GET 和 POST。
- GET - 從指定的資源請求資料
- POST - 向指定的資源送出要處理的資料
GET基本上用于從伺服器獲得（取回）資料。注釋：GET 方法可能傳回緩存資料。
POST也可用于從伺服器擷取資料。不過，POST 方法不會緩存資料，并且常用于連同請求一起發送資料。
jQuery $.get() 方法
$.get()方法通過 HTTP GET 請求從伺服器上請求資料。
文法：
$.get(URL,callback);
必需的URL參數規定您希望請求的 URL。
可選的callback參數是請求成功後所執行的函數名。
下面的例子使用 $.get() 方法從伺服器上的一個檔案中取回資料：
執行個體
$("button").click(function(){$.get("demo_test.php",function(data,status){ alert("資料:" + data + "\n狀态: " + status); }); });
$.get()的第一個參數是我們希望請求的 URL（"demo_test.php"）。
第二個參數是回調函數。第一個回調參數存有被請求頁面的内容，第二個回調參數存有請求的狀态。
提示：這個PHP 檔案 ("demo_test.php") 類似這樣：
demo_test.php 檔案代碼:
<?phpecho '這是個從PHP檔案中讀取的資料。'; ?>
jQuery $.post() 方法
$.post()方法通過 HTTP POST 請求向伺服器送出資料。
文法:
$.post(URL,data,callback);
必需的URL參數規定您希望請求的 URL。
可選的data參數規定連同請求發送的資料。
可選的callback參數是請求成功後所執行的函數名。
下面的例子使用 $.post() 連同請求一起發送資料：
執行個體
$("button").click(function(){$.post("/try/ajax/demo_test_post.php", { name:"菜鳥教程",url:"http://www.runoob.com" }, function(data,status){ alert("資料:\n" + data + "\n狀态: " + status); }); });
$.post()的第一個參數是我們希望請求的 URL ("demo_test_post.php")。
然後我們連同請求（name 和 url）一起發送資料。
"demo_test_post.php"中的PHP 腳本讀取這些參數，對它們進行處理，然後傳回結果。
第三個參數是回調函數。第一個回調參數存有被請求頁面的内容，而第二個參數存有請求的狀态。
提示：這個PHP 檔案 ("demo_test_post.php") 類似這樣：
demo_test_post.php 檔案代碼:
<?php$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url =isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網站名:' . $name; echo "\n"; echo 'URL 位址: ' .$url; ?>