向您的頁面添加 jQuery 庫
jQuery 庫位於一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。
可以通過下面的標記把 jQuery 添加到網頁中：
<head> <script type="text/javascript" src="jquery.js"></script> </head>
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
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 函數中：
一個小例子
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
jQuery AJAX 實例
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $('#test').load('/example/jquery/demo_test.txt'); }) }) </script> </head> <body> <h3 id="test">請點擊下面的按鈕，通過 jQuery AJAX 改變這段文本。</h3> <button id="btn1" type="button">獲得外部的內容</button> </body> </html>
jQuery $.get() 方法
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.get("/example/jquery/demo_test.asp",function(data,status){ alert("數據：" + data + "\n狀態：" + status); }); }); }); </script> </head> <body> <button>向頁面發送 HTTP GET 請求，然后獲得返回的結果</button> </body> </html>
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/example/jquery/demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("數據：" + data + "\n狀態：" + status); }); }); }); </script> </head> <body> <button>向頁面發送 HTTP POST 請求，並獲得返回的結果</button> </body> </html>
JQuery post方法
$.post() 方法通過 HTTP POST 請求從服務器上請求數據。
語法：
$.post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的數據。
可選的 callback 參數是請求成功后所執行的函數名。
下面的例子使用 $.post() 連同請求一起發送數據：
實例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
傳遞和接收的數據都是json格式，的所以，還有必要在學下json
$.post() 的第一個參數是我們希望請求的 URL ("demo_test_post.asp")。
然后我們連同請求（name 和 city）一起發送數據。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數，對它們進行處理，然后返回結果。
第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。
添加新的 HTML 內容
我們將學習用於添加新內容的四個 jQuery 方法：
append() - 在被選元素的結尾插入內容
步驟大約是：
1. 寫一個監聽函數，等待被觸發
2. 監聽函數如果有參數的話，可以根據參數做相應的操作
3. 定位到要添加組件上（一般是parent級別，比如對於li,可能是ul)
4. $(要添加組件).append(要添加的東西)
demo
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加文本</button> <button id="btn2">追加列表項</button> </body> </html>
JSON 教程
JSON：JavaScript 對象表示法（JavaScript Object Notation）。
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
{ "employees": [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName":"Carter" } ] }
這個 employee 對象是包含 3 個員工記錄（對象）的數組。
JSON - 轉換為 JavaScript 對象
JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。
由於這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。
JSON 使用 JavaScript 語法
因為 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。
通過 JavaScript，您可以創建一個對象數組，並像這樣進行賦值：
employees[1].firstName="Jobs";
通過parse函數來處理數據
<html> <body> <h2>通過 JSON 字符串來創建對象</h3> <p> First Name: <span id="fname"></span><br /> Last Name: <span id="lname"></span><br /> </p> <script type="text/javascript"> var txt = '{"employees":[' + '{"firstName":"Bill","lastName":"Gates" },' + '{"firstName":"George","lastName":"Bush" },' + '{"firstName":"Thomas","lastName":"Carter" }]}'; obj = JSON.parse(txt); //var obj = eval ("(" + txt + ")");//更好的方案
document.getElementById("fname").innerHTML=obj.employees[1].firstName document.getElementById("lname").innerHTML=obj.employees[1].lastName </script> </body> </html>
我更需要的是獲取數組長度的函數
var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}]; alert(eval(data).length);