什麼是jQuery？jQuery有什麼用？
• jQuery 是 javascript 的一個框架集合 ，並不是什麼新的技術
• jQuery 極大地簡化了JavaScript編程
• 能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
• 不用再在html裏面通過`<script>`標籤插入一大堆js來調用命令了
介紹jQuery中常用的函數
$("#emps_table tbody").empty();刪除匹配的元素集合中所有的子節點$("#check_all_page").attr("checked", false);設置或返回被選元素的屬性值$.each(emps, function (index, emp) {});循環遍歷emps，index是當前元素的位置，emp是遍歷值$("<td></td>").append(emp.empId);向每個匹配的元素內部追加內容$("<td></td>").appendTo("#emps_table tbody");把所有匹配的元素追加到另一個指定的元素元素集合中$("<ul></ul>").addClass("pagination");爲每個匹配的元素添加指定的類名$("#myModal form")[0].reset();重置初始化表單數據$("#myModal form").find("*");搜索所有與指定表達式匹配的元素$("#myModal form").removeClass("has-error has-success");從所有匹配的元素中刪除全部或者指定的類$('p').text();返回p元素的文本內容$("p").text("Hello world!");設置所有 p 元素的文本內容$("#emp_add_form").serialize();序列表表格內容爲字符串$("#tips").popover('hide');設置提示信息的顯示與隱藏$("#myModal").modal('hide');設置模態框的顯示與隱藏$("#emp_save_button").mouseleave(function () {});當鼠標指針離開元素時，會發生 mouseleave 事件$("#empName_form_input").change(function () {});當元素的值發生改變時，會發生 change 事件$("#empName_form_input").keyup(function () {});當鍵帽被鬆開時，發生 keyup 事件$(".check_item:checked").length;Query 對象中元素的個數$("#check_all_page").prop("checked",flag);
$("#check_all_page").click(function () {
//$(obj).prop("checked")：獲取checked屬性
//$(".check_item").prop("checked", true)：設置checked屬性
//根據 check_all_page 的是否被選中,來設置表單中的check_item的選中狀態（$(this).prop("checked")返回true/false）
$(".check_item").prop("checked", $(this).prop("checked"));
});
$(".check_item:checked").length
$("#emp_delete_selected_btn").click(function () {
//判斷class爲check_item的選擇框被選擇的個數
if ($(".check_item:checked").length < 1) {
alert("請先選擇要刪除的人員");
return false;
}
$(this).parents("tr").find("td:eq(1)").text()
//循環遍歷每個被選擇的checkBox的值
var select_name = "", select_id = "";
$.each($(".check_item:checked"),function () {
//$(this).parents("tr")：用於獲取被選中的checkBox的父元素（也就是所在行）
//find("td:eq(2)")：找到所在tr(行)的第二td(列)
//text()：獲取所在行列交集單元格的數據
select_name += $(this).parents("tr").find("td:eq(2)").text() + " , ";
select_id += $(this).parents("tr").find("td:eq(1)").text() + "-";
});
什麼是AJAX？AJAX有什麼用？
• AJAX = 異步 JavaScript 和 XML
• AJAX 是一種用於創建快速動態網頁的技術
• 通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新
• 這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新
• 傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面
jQuery中的ajax方法簡介
- url：要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址
- type：要求爲String類型的參數，請求方式（post或get）默認爲get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持
- async：要求爲Boolean類型的參數，默認設置爲true，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成纔可以執行
- data：要求爲Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換爲字符串格式，get請求中將附加在url後
- dataType： 要求爲String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作爲回調函數參數傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個“?”爲正確的函數名，以執行回調函數。
text：返回純文本字符串。 - success：要求爲function類型的參數，請求成功後調用的回調函數
- error：要求爲function類型的參數，請求失敗時被調用的函數
案例代碼：
function getDeptsOfQuery(ele) {
$.ajax({
url : APP_PATH + "/depts",
dataType: "json",
async : false,
type : 'GET',
success : function (depts) {
$(ele).empty();
$(ele).append($("<option value=\"0\">不選擇</option>"));
$.each(depts , function (index, dept) {
$(ele).append(
$("<option></option>").append(dept.deptName).attr("value",dept.deptId)
);
});
}
});
}