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>