什么是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)
);
});
}
});
}