共计 3179 个字符，预计需要花费 8 分钟才能阅读完成。
1 jQuery 概述
jQuery 是一个疾速、简洁的 JavaScript 框架。jQuery 设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件。它封装 JavaScript 罕用的性能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
jQuery 的外围个性能够总结为：具备独特的链式语法和短小清晰的多功能接口；具备高效灵便的 css 选择器，并且可对 CSS 选择器进行扩大；领有便捷的插件扩大机制和丰盛的插件。jQuery 兼容各种支流浏览器，如 IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+ 等。
1.1 劣势
(1) 能够极大的简化 JS 代码
JavaScript 形式：
var ele = document.getElementsByTagName("p"); // 标签
var ele = document.getElementsByClassName("info"); // 款式
var ele = document.getElementById("name"); //id 属性jQuery 选择器的三种形式：
var ele = $("p"); // 拜访标签
var ele = $(".info"); // 拜访 css 的 class 款式
var ele = $("#name"); // 拜访 id 属性(2) 能够像 CSS 选择器一样获取 html 元素
css 中获取所有的 div, 给 div 增加款式:
div{css 属性。。。}jQuery 中获取所有 div, 给 div 增加边框款式:
$("div").css("border", "2px solid red");(3) 能够通过批改 css 属性管制页面的成果
(4) 能够兼容罕用的浏览器
比方: JS 中的 innerText 属性、removeNode()函数、replaceNode()函数 这些函数 在某些浏览器中是无奈应用的。
jQuery 中提供了相应的函数（text 函数、remove 函数、replaceWith 函数）
罕用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器~~~~
1.2 html 引入 jQuery
<script type="text/javascript" src="jquery.min.js"></script>请留神，<script> 标签应该位于页面的 <head> 局部。
2 事件
Query 提供的文档就绪事件函数（简写模式）：
<script>
$(function(){// 在浏览器加载残缺个 html 网页后立刻执行});
</script>其残缺写法为：
<script>
$(document).ready(function(){// 在浏览器加载残缺个 html 网页后立刻执行});
</script>按钮的点击事件被触发时：
$("button").click(function() {..some code...} )
3 选择器
3.1 根本选择器
(1)元素名选择器
$("div") -- 选中所有的 div 元素
$("span") -- 选中所有的 span 元素
(2)class/ 类选择器
$(".s1") -- 选中所有 class 值为 s1 的元素(class 值为 s1 的元素可能是任何元素)
$("span.s1") -- 选中所有 class 值为 s1 的 span 元素
(3)id 选择器
$("#one") -- 选中 id 为 one 的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的 div 元素, 以及所有的 span 元素, 以及所 有 class 值为 s1 的元素, 以及 id 为 one 的元素3.2 层级选择器
$("div span") -- 选中所有 div 外部的所有 span 元素
$("#one span") -- 选中 id 为 one 的元素外部的所有 span 元素 $("#two+span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素 $("#two").next("span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素
$("#two").prev("span") -- 选中 id 为 two 的元素后面紧邻的 span 兄弟元素
$("#two~span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素 $("#two").nextAll("span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素
$("#two").prevAll("span") -- 选中 id 为 two 的元素后面所有的 span 兄弟元素
$("#two").siblings("span") -- 选中 id 为 two 的元素前、后所有的 span 兄弟元 素3.3 根本过滤选择器
(1) 选中第一个 div 元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最初一个 div 元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第 n + 1 个 div 元素(n 从零开始)
$("div:eq(n)")
$("div").eq(n)4 AJAX
AJAX 概述：
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的状况下，AJAX 通过后盾加载数据，并在网页上进行显示，实现部分刷新。
应用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
jQuery 与 AJAX：
jQuery 提供多个与 AJAX 无关的办法。
通过 jQuery AJAX 办法，您可能应用 HTTP Get 和 HTTP Post 从近程服务器上申请文本、HTML、XML 或 JSON – 同时您可能把这些内部数据间接载入网页的被选元素中。
部分刷新：
4.1 jQuery-AJAX 交互
jQuery load() 办法：
$(selector).load(URL,data,callback);必须的 URL 参数规定您心愿加载的 URL。
可选的 data 参数规定与申请一起发送的查问字符串键 / 值对汇合。
可选的 callback 参数是 load() 办法实现后所执行的函数名称。
jQuery $.get() 办法：
$.get() 办法通过 HTTP GET 申请从服务器上申请数据。
$.get(URL,callback);必须的 URL 参数规定您心愿申请的 URL。
可选的 callback 参数是申请胜利后所执行的函数名。
jQuery $.post() 办法：
$.post() 办法通过 HTTP POST 申请从服务器上申请数据。
$.post(_URL_,_data_,_callback_);必须的 URL 参数规定您心愿申请的 URL。
可选的 data 参数规定连同申请发送的数据。
可选的 callback 参数是申请胜利后所执行的函数名。
经典案例：
<script>
$(document).ready(function() {
$.ajax({
type: "POST",
url: "https://p.3.cn/prices/mgets",
contentType: "application/json;charset=utf-8",
data: { // 拼接的参数
"skuIds": "J_100003717483"
},
dataType: "jsonp",
success: function(data) { // 返回的后果
$('#rtnData').text("返回数据：" + JSON.stringify(data));
$('#itemId').text("商品编号：" + data[0].id);
$('#itemPrice').html("商品价格：<span style='color:red'>" + data[0].p +"</span>");
},
error: function(data) {alert("提交失败" + JSON.stringify(data));
}
});
});
</script>
