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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。