吐槽
摘要：相对论极大地改变了人类对宇宙和自然的常识性观念，提出了同时的相对性四维时空弯曲时空等全新的概念。狭义相对性原理是相对论的两个基本假定，在目前实验的观测下，物体的运动与相对论是吻合很好的，所以目前普遍认为相对论是正确的理论。
7. jQuery 里的事件机制
javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。jQuery不仅提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。7.1 加载 DOM
前面章节我们已经对比了window.onload()和$(document).ready()两种方法的区别。两种都是入口函数，只不过前者是js中的而后者是jQ中的。并且领着之间还是有区别的：
1、执行时机：
window.onload()方法是等到页面中所有元素加载完毕之后，才执行，即javascript此时才可以访问网页中的任何元素。而jQuery使用$(document).ready()方法，可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。也就是说在jQ中，不需要等待所有图片加载完再执行。
但是就会有个问题，当获取图片宽高的时候，可能获取不到。不过jQ中多带带提出了一个页面加载的方法——load()方法，如果这个处理函数绑定给window对象则会在所有内容加载完毕之后触发。
$(window).load(function(){
// 执行代码
});
上面的代码，等同于js中的：
window.onload = function(){
// 执行代码
}
2、多次使用：
在javascript中入口函数只能写一次，如果写多个，下面会将上面的覆盖掉：
window.onload = function(){
alert(123);
}
window.onload = function(){
alert(456); // 页面只会弹出 456
}
在jQuery中，入口函数可以写多次，不会出现覆盖的情况：
$(document).ready(function(){
alert(123); // 123
});
$(document).ready(function(){
alert(456); // 456
});
3、简写方式：
javascript中没有简写方式，但是在jQ中有简写方式：
// 1-原始版写法
$(document).ready(function(){
// 执行代码
});
// 2-简化写法，document可以省略
$().ready(function(){
// 执行代码
});
// 3-简化写法
$(function(){
// 执行代码
});
7.2 事件绑定
1、什么是事件绑定
在文档装载完成之后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法，bind()方法的调用格式为：
bind(type [, data] ,fn);
bind()方法有三个参数：
type：事件类型，类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等。
[,data]：可选参数，作为event.data属性值传递给事件对象的额外数据对象。
fn：用来绑定的处理函数。
示例代码： [ 38-jq事件机制-事件绑定.html ]
什么是相对论？
相对论是关于时空和引力的基本理论，主要由阿尔伯特·爱因斯坦创立，依据研究的对象不同分为狭义相对论和广义相对论。相对论的基本假设是相对性原理，即物理定律与参照系的选择无关。
狭义相对论和广义相对的区别是，前者讨论的是匀速直线运动的参照系（惯性参照系）之间的物理定律，后者则推广到具有加速度的参照系中（非惯性系），并在等效原理的假设下，广泛应用于引力场中。相对论极大地改变了人类对宇宙和自然的“常识性”观念，提出了“同时的相对性”、“四维时空”、“弯曲时空”等全新的概念。它发展了牛顿力学，推动物理学发展到一个新的高度。
狭义相对性原理是相对论的两个基本假定，在目前实验的观测下，物体的运动与相对论是吻合很好的，所以目前普遍认为相对论是正确的理论。
效果图：
注意：
is()方法，可以用来判断一个元素是否包含某一属性。
当一个选择器多次出现的时候，可以用一个变量将它缓存起来。
2、简写绑定事件
jQuery提供了一套简写的方法，简写的方法和bind()的使用方法类似，实现效果也相同，但是可以减少代码量：
$(function(){
$("h2").click(function(){
// 执行代码
});
});
7.3 合成事件
jQuery 有两个合成事件：hover()方法和toggle()方法(这里的toggle跟另一个方法toggle不是一个方法，这里的toggle方法因为重名的原因，已经在jQ1.8版本以后弃用了)。
1、hover()方法：
hover(enter,leaver); // enter 和 leaver 是两个函数
hover()方法用于模拟光标悬停事件。当光标移动到元素上的时候会触发第一个函数(enter)，当光标离开元素的时候会触发第二个函数(leaver)。
示例代码： [ 39-jq事件机制-合成事件hover.html ]
$(function() {
// hover 方法
$("h2").hover(enter, leaver);
var $content = $("h2").next();
// 鼠标进入的时候触发的函数
function enter() {
$content.show();
}
// 鼠标离开时触发的函数
function leaver() {
$content.hide();
}
});
2、toggle()方法：此方法自1.8版本以后，已弃用
toggle(fn1,fn2,...fnN);
toggle()方法，模拟的是鼠标单击事件，当点击第一次的时候，触发对应的第一个函数(fn1)，当点击第二次的时候，触发对应的第二个函数(fn2)，一直到最后一个函数的时候，再点击就会循环到第一个函数，就这样一直循环切换。
另外一个 toggle() 方法，是切换元素的可见状态，如果元素是可见的，事件触发之后，就会切换成不可见。
$("h2").click(function(){
$(this).next().toggle(); // 如果元素一开始是隐藏的，点击之后就会切换成显示。
});
7.4 事件冒泡
在前面特效篇里面，我们已经介绍了什么是事件冒泡，这里不再累赘，简单来说，就是一个元素包含另一个元素，两个元素同时绑定了点击事件，当我点击里面元素的时候，会同时触发两个事件函数，这就是事件冒泡。
具体产生的原理，和解决办法请点击这个链接，这里会有处理兼容性的详细步骤。
示例代码： [ 40-jq事件机制-事件冒泡.html ]
提示信息
提示信息
提示信息
效果图：
我们可以看到，明明点击的是最里面的盒子，但是三个点击事件都同时触发了。
1、事件对象：
由于在IE-DOM和标准DOM实现事件对象的方法各不相同，所以需要处理兼容性。在jQuery中，已经将我们封装好了。 直接在触发事件函数里面传一个参数：
$("element").bind("click",function(event){
// 执行代码
});
2、阻止事件冒泡：
阻止事件的方法存也在兼容性，同样的jQ中已经封装好，直接使用stopPropagation()方法来阻止事件冒泡。
示例代码： [ 41-jq事件机制-阻止事件冒泡.html ]
$(function() {
$(".box").click(function(e) { // 事件对象
$(this).children("p").text(".box被触发了");
e.stopPropagation(); // 阻止事件冒泡
});
$(".box1").click(function(e) {
$(this).children("p").text(".box1被触发了");
e.stopPropagation();
});
$(".box2").click(function(e) {
$(this).children("p").text(".box2被触发了");
e.stopPropagation();
});
});
效果图：
3、阻止默认行为：
网页中有很多元素都有默认行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交，有时候我们需要阻止元素的默认行为。
在jQ中提供了一个方法来阻止元素的默认行为：preventDefault
不加阻止默认行为时的效果：
示例代码： [ 42-jq事件机制-阻止默认行为.html ]
效果图：
4、return false：
如果想要同时对事件停止冒泡和阻止默认行为，可以有一种默认的简写方式：return false。
5、事件捕获：
在jQ中不支持事件捕获，如果想要事件捕获的话，请参考原生的js。7.5 事件对象的属性
1、event.type：
该方法可以获取到事件的类型。
$("a").click(function(event){
console.log(event.type); // 打印a标签点击之后的事件类型 打印 ==> click
return false; // 阻止a标签默认跳转事件
});
2、event.stopPropagation()方法：
上面已经提过了，该方法是阻止事件冒泡。
3、event.preventDefault()方法：
上面已经提过了，该方法是阻止事件默认行为。
4、event.target：
该方法的作用是获取到触发事件的元素。
$("a").click(function(event){
console.log(event.target); // 打印 ==> a
return false; // 阻止a标签默认跳转事件
});
5、event.pageX 和 event.pageY：
该方法的作用，是分别获取到光标相对于页面的x坐标和y坐标，如果页面上有滚动条的话，还要加上滚动条的宽度和高度。
6、event.which
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。
比如获取鼠标的按键：
$("a").mousedown(function(event){
console.log(event.which); // 鼠标左键==> 1 鼠标中键==> 2 鼠标右键==> 3
return false; // 阻止a标签默认跳转事件
});
比如获取键盘的按键：
$("input[text]").keyup(function(event){
console.log(event.which); // 对应按下的键盘码
});
7、event.metaKey：
该方法是针对不同浏览器，获取到7.6 移除事件按键。
当我们想要移除一个事件的时候，可以使用unbind()方法。
unbind([type].[data]);
第一个参数是事件类型，第二个参数是将要移除的函数：
如果没有参数，直接删除所有的绑定的事件；
如果提供了事件类型作为参数，那只删除该类型的绑定事件；
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
示例代码： [ 43-jq事件机制-移除事件.html ]
效果图：
7.7 模拟操作什么是模拟操作呢？我们可以看到前面的单击事件，都需要手动去触发，模拟操作就是可以自动触发click，而不需要用户主动点击。
一进入页面就会自动弹出“呵呵”，其中 $("#btn").click();，也可以达到同样的效果。
trigger()方法触发事件后，会执行浏览器默认操作：
$("input").trigger("focus");
上面的代码不仅会触发元素绑定的focus事件，也会使input元素本身得到焦点(这就是浏览器的默认操作)。
triggerHandler()方法：
如果你只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用triggerHandler()方法。
$("input").triggerHandler("focus");
7.8 事件委托
事件委托，首先按字面的意思就能看出来，是将事件交由别人来执行，再联想到事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。
举个例子：
假如想要给多个li都注册点击事件，只需要给li循环遍历，再添加点击事件，这种方法固然简单，但是假如有100个、1000个li的时候，这里的DOM操无形之中就繁琐了。并且当我们动态添加li元素的时候，这些li是没有点击事件的。但是这些只要讲点击事件交给父元素来执行，就能实现了。
1、on + 注册事件：
除了bind方法绑定事件之外，在jQuery1.7版本之后，新添了一种方法：on()方法用来绑定事件，off()方法用来解除绑定事件。on()方法既可以注册事件，还可以注册委托事件。
$(element).on(type,[selector],fn);
参数详解：
type：字符串，事件类型，如：click、mouseover...；
selector：可选，字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件；
fn：事件被触发执行的函数。
示例代码：
111111
111111
111111
111111
123456
效果图：
第二个参数其实就相当于一个过滤器的作用，给div里面的p注册委托事件。在执行顺序上，会先执行元素自己的事件，再去执行绑定的事件，最后执行父元素的事件。
当第二个参数传进去的时候，就想当于给过滤的元素注册委托事件。
2、delegate 注册委托事件：
delegate只能注册委托事件。
$(fatheElement).delegate(selector,type,fn);
参数详解：
fatheElement：父元素；
selector：可选，字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件；
type：事件类型；
fn：事件被触发执行的函数。
7.9 其他用法1、绑定多个事件类型：
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over"); // 当鼠标进入的时候，该元素的class属性切换为over 鼠标离开时class切换为先前的值
});
2、添加事件的命名空间：
$("div").bind("click.plugin",function(){
alert(123);
});
$("div").bind("mouseover.plugin",function(){
alert(456);
});
$("div").bind("dbclick",function(){
alert(666);
});
$("button").click(function(){
$("div").unbind(".plugin");
});
其中.plugin就是命名空间，当点击button按钮的时候，就删除了事件的命名空间.plugin，此时对应的事件也会被移除。
相同的事件，不同的命名空间：
$("div").bind("click.plugin",function(){
alert(456);
});
$("div").bind("click",function(){
alert(666);
});
$("button").click(function(){
$("div").trigger("click!"); // 注意后面的感叹号
});
当点击div的时候，会同时触发click.plugin和click事件，如果点击button只会触发click事件，而不会触发click.plugin事件。trigger("click!")，后面感叹号表示的是匹配所有不在命名空间中的click方法。
8. jQuery 动画相对于原生js，jQuery中的动画更加的方便，更加的强大。8.1 show()方法 和 hide()方法
当一个元素调用show()方法的时候，会将该元素的display设置为block，当调用hide()方法的时候，会将该元素的display设置为none。
$("h2").bind("mouseover",function(){
$(this).next().show(); // 鼠标进入的时候 h2 下一个兄弟元素显示
}).bind("mouseout",function(){
$(this).next().hide(); // 鼠标离开的时候 h2 下一个兄弟元素隐藏
})
此时还没有动画的效果，下面给他们加上动画效果
下面的代码表示的是，元素在600ms内显示出来：
$("element").show(600);
下面的代码表示的是，元素在300ms内隐藏起来：
$("element").hide(300);
示例代码： [ 45-jq动画-show&hide.html ]
鼠标经过&离开
相对论是关于时空和引力的基本理论，主要由阿尔伯特·爱因斯坦创立，依据研究的对象不同分为狭义相对论和广义相对论。相对论的基本假设是相对性原理，即物理定律与参照系的选择无关。
效果图：
我们可以看到，不管是show还是hide的时候，元素的宽、高和不透明度都是在慢慢增加或者减小的。
8.2 fadeIn()方法 和 fadeOut()方法与show、hide方法不同的是，fadeIn和fadeOut方法只改变元素的不透明度，不会去改变宽高。
下面的代码表示的是元素淡入的效果，其中也可以传时间：
$("element").fadeIn();
下面的代码表示的是元素淡出的效果：
$("element").fadeOut();
示例代码： [ 46-jq动画-fadeIn&fadeOut.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().fadeIn();
}).bind("mouseout", function() {
$(this).next().fadeOut();
});
});
效果图：
8.3 slideUp()方法 和 slideDown()方法slideUp()方法和slideDown()方法只会改变元素的高度，如果一个元素的display属性值为“none”，调用slideDown()方法的时候元素由上至下延伸显示。slideUp()正好相反，元素将由下到上缩短隐藏。
示例代码： [ 47-jq动画-slideDown&slideUp.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().slideDown();
}).bind("mouseout", function() {
$(this).next().slideUp();
});
});
效果图：
8.4 自定义动画方法 animate()前面几种类型动画，比较单一，很多时候不能满足于用户的需求，但是在jQ中还有一个自定义动画animate，非常强大。
animate(params,speed,easing,callback);
参数说明如下：
params：一个包含样式和值的对象，比如{p1:"val1",p2:"val2",...}；
speed：动画执行速度(可选)，默认400；
easing：表示过度使用哪种缓动函数(默认swing，jQ内部还支持一个linear)
callback：在动画执行完之后，执行的函数(可选)。
1、简单的动画：
效果图：
2、累加、累减动画：
通过累加一个值让元素从当前位置，累加到900的位置
$("#box2").animate({
left: "+=900" // 在当前位置累加到 900
}, 1000);
3、多重动画：
同时执行多个动画
$("#box3").click(function() {
$(this).animate({
left: "300",
height: "200px",
width: "200px",
top: "200px"
}, 2000);
});
效果图：
我们可以看到所有的变化都是同时进行的。
按顺序执行多个动画
$("#box4").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000).animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果图：
4、延迟动画：
在动画执行中如果想要对某一段动画进行延迟操作，可以使用delay()方法。
$("#box5").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000)
.delay(1000)
.animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果图：
5、动画队列：
一组元素上的效果：
当在一个animate()方法中应用多个属性时，动画是同时发生的；
当以链式的写法应用到动画方法时，动画是按照顺序发生的。
多组元素上的动画：
默认情况下，几组动画是同时发生的；
当以回调形式应用动画方式时，动画按照回调顺序发生的。
6、停止动画：
如果需要在某处停止动画需要使用stop()方法。
stop([clearQueue],[gotoEnd]);
两个参数都是可选的，都为布尔值，clearQueue表示是否要清空未执行完的动画队列。gotoEnd表示的是直接将正在执行的动画跳转到末状态。直接使用stop()方法，则会立即停止当前正在执行的动画。
不明白的小伙伴，参考8.6小节，第二个案例 《动画下拉菜单栏》
8.5 其他动画方法1、toggle()方法：
toggle()方法可以切换元素的可见状态，如果元素是可见的，则切换为隐藏。如果元素是隐藏的，则切换为可见。
$("#btn1").click(function() {
$(this).next().toggle();
});
效果图：
只要循环点击h4，它的下一个兄弟元素就会循环切换。
2、slideToggle()方法：
通过高度变化来切换匹配元素的可见性。
$("#btn2").click(function() {
$(this).next().slideToggle();
});
效果图：
3、fadeTo()方法：
fadeTo()方法可以将不透明度设置到指定的值。
$("#btn3").click(function() {
$(this).next().fadeTo(600, 0.5); // 600表示的是执行时间 0.5 表示目标值
});
效果图：
4、fadeToggle()方法：
fadeToggle()方法可以切换不透明度。
$("#btn4").click(function() {
$(this).next().fadeToggle();
});
效果图：
8.6 jQuery 动画案例下面通过几个简单的例子，巩固一下jQuery动画的知识。
1、呼吸灯版轮播图：
在实现原理上，与前面特效篇的是不同的，这里改变的是图片的不透明度opacity，并且不需要让所有li左浮动，ul也不需要设置一个很宽的宽度。在jQ中操作更加的简单。
样式上：
大盒子相对定位，图片的li绝对定位，让所有的图片叠加在一起；
给所有的图片li设置隐藏属性，第一张图片需要显示；
js上：
定义一个index用来记录当前点击的张数；
当点击右箭头的时候，让对应的图片li，fadeIn，其余的兄弟元素fadeOut，同时让对应的小圆点添加current类，其余的兄弟元素移除这个类；
点击左箭头只需将index--，再进行判断一下，其他的与点击右箭头原理是一样的。
示例代码： [ 50-jq动画-案例-呼吸灯版轮播图.html ]
效果图：
2、动画下拉菜单栏：
动画下拉菜单栏，主要实现原理还是运用jQ里面的两个动画slideDown和slideUp，并且配合stop方法。
先看一下，如果不加stop()方法，会是一个什么效果：
我们可以看到一个效果，当光标移到第一个“一级菜单”的时候，触发动画效果，但是动画效果还没结束，我就将光标移进了第二个菜单，触发第二个菜单下拉效果。所以导致了动画效果与光标不一致，此时只需要在光标移入、移出之前加上stop()方法，就能解决这个问题。
stop()方法会结束当前正在进行的动画效果，并立即执行队列中的下一个动画。
示例代码： [ 51-jq动画-案例-动画下拉菜单.html ]
效果图：
3、手风琴：
实现原理：
给外部大盒子设置一个与图片大小一致的宽高，并且设置相对定位
还是采用ul，li结构，li设置宽高，与图片大小一致，设置绝对定
动态的给li添加背景图片，因为li绝对定位的原因，此时所有的li都叠在一起
动态的给每个li设置left值(left*i)，这时候li就会依次排开
大盒子还要设置一个overflow-hidden属性，将多余的隐藏掉
给每个li注册鼠标鼠标经过事件，然后根据下面推算出的规律(当前鼠标经过的索引index，他之前包括他自己的left值都是，设定的最小值乘以对应的索引。而他后面的会将设定的最小值乘以对应的索引后再加上450，这里的450不是一个固定值，根据规律找出来的)进行判断，设置各自的left值；
鼠标离开的时候再让所有的盒子恢复到一开始的位置，每个li显示等分的宽度
大盒子没有overflow-hidden的时候：
画个图，理解一下：
找规律：
结合上面的图片，我们可以找到一个规律
当鼠标在第1个li上的时候，li下标index为0：
index：0 left：0
index：1 left：500px
index：2 left：550px
index：3 left：600px
index：4 left：650px
当鼠标在第2个li上的时候，li下标index为1：
index：0 left：0
index：1 left：50px
index：2 left：550px
index：3 left：600px
index：4 left：650px
当鼠标在第3个li上的时候，li下标index为2：
index：0 left：0
index：1 left：50px
index：2 left：100px
index：3 left：600px
index：4 left：650px
看出规律了吗？
当对应li的下标<=鼠标悬停的的下标上的时候left值 是50*i
当对应li的下标>鼠标悬停的的下标上的时候left值 是50*i + ,450(450不是固定的值，是经过计算出来的)
示例代码： [ 52-jq动画-案例-手风琴.html ]
效果图：
4、弹幕效果：
获取输入框的的 value 值；并生成 span 标签
将 span 标签添加到 页面中，随机颜色 随机高度 span动画从右向左
到达最左边的时候删除 span 标签(不删除会随着输入的内容越来越多影响性能)
示例代码： [ 53-jq动画-案例-弹幕效果.html ]
吐槽
效果图：
9. jQuery 里的 Ajax 操作Ajax全称“Asynchronous JavaScript and XML”（异步的JavaScript和XML）。它的出现揭开了无刷新更新页面的新时代。具体的实现方式以及Ajax的优缺点，在前面的一篇文章[《js 进阶知识-Ajax篇》]()已经讲得很详细了，不明白的小伙伴，可以先去学习下原生js是如何实现Ajax的。
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层就是$.getScript()和$.getJSON()方法。
9.1 load()方法1、载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。它的结构为：
load(url[,data][,callback]);
参数详解：
| 参数名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求HTML页面的URL地址 |
| data（可选） | Object | 发送至服务器的key/value数据 |
| callback（可选） | Function | 请求完成时的回调函数，无论请求成功还是失败 |
示例代码：
首先新建一个data.html的文件，里面模拟的是请求的数据：
李四：
顶楼上
王五：
66666
再创建一个主页面，index.html：
已有评论：
效果图：
上面的例子可以看出来，开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件URL作为参数传递给load()方法即可。我们可以发现原本的data页面是没有为类comment设置样式的，但是主页面加载后同样的样式名会立即应用到新加载的内容上。
2、筛选载入的HTML文档
上面的案例我们可以看到，点击之后data.html里面的整个内容都被加载进来了。如果需要加载data.html页面里的某些元素的时候该怎么办呢？我们可以使用load()方法的URL参数来达到目的。只需要指定选择符就ok了。
示例代码：
// 选择加载data.html页面中class为“para”的内容，注意中间有一个空格
$(".resText").load("data.html .para");
效果图：
我们可以看到，只有类名是“para”的被加载了。
3、传递方式：
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之则会自动转换为POST方式：
// 1- 无data参数传递的时候，则是GET方式
$(".resText").load("data.php",function(){});
// 2- 有data参数传递的时候，则是POST方式
$(".resText").load("data.php",{name:"Levi",age:"18"},function(){});
4、回调函数：
回调函数是在页面加载完成之后执行的操作，该函数有三个参数，分别是请求返回的内容、请求状态、XMLHttpRequest对象：
$(".resText").load("data.php",function(responseText,textStatus,XMLHttpRequest){
// responseText ： 请求返回的内容
// textStatus：请求状态：success、error、notmodified、timeout 4种
// XMLHttpRequest ：XMLHttpRequest对象
});
在load()方法中，无论Ajax请求是否成功，只要当请求完成之后，回调函数都会执行。
9.2 $.get()方法和$.post()方法load()方法通常是用来从WEB服务器上获取静态的数据的，如果需要向服务器传递参数的话，可以使用$.get()方法和$.post()方法还有后面的$.ajax方法。
1、$.get()方法
$.get()方法使用GET方式来进行异步请求：
$.get(url [,data] [,callback] [,type]);
参数详解：
| 参数名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求HTML页面的URL地址 |
| data（可选） | Object | 发送至服务器的key/value数据，会作为字符串凭接在url的后面 |
| callback（可选） | Function | 请求完成时的回调函数(只有当Response的返回状态是success的时候，才调用该函数) |
| type （可选） | String | 服务器返回内容的格式，包括xml、html、script、json、text、_default |
回调函数：
$.get()方法的回调函数只有两个参数：
$.get("get.php",{useraname: "Levi",age:18},function(data,textStatus){
// data 返回的内容，可以是XML文档、JSON文件、HTML片段等的
// textStatus 请求状态：success、error、notmodified、timeout 4种。
})
data参数代表请求返回的内容，textStatus参数代表请求回来的状态，注意：只有当数据成功返回success后才被调用。
2、$.post()方法
它与$.get()方法的结构和使用方式都相同，不过他们之间仍有以下区别：
get请求会将参数跟在URL的后面进行传递，而post请求则是作为HTTP消息的实体内容发送给Web服务器；
get对传输的数据大小有限制（通常不大于2KB），而使用post方式传递数据量要比get方式大得多；
get方式请求的数据会被浏览器缓存起来，因此可以通过浏览器的历史记录中读到这些数据，存在安全性问题。
9.3 $.ajax()方法$.ajax()方式常用参数解析：
| 方法 | 作用 |
|---|---|
| url | 请求的地址 |
| type | 请求的方式 |
| dataType | 告诉jQuery，需要按照什么格式对服务器返回的数据进行解析，默认json |
| data | 数据 |
| success | 请求成功的回调函数 |
| error | 请求失败的回调函数 |
| beforeSend | 请求发送之前调用的函数 |
| complete | 不论请求是成功还是失败的，只要请求完成就会调用 |
| timeout | 设置请求超时时间 |
示例代码：
$.ajax({
// 请求的地址
url: "04-data.php",
// 请求的方式
type: "get",
// 告诉jQuery，需要按照什么格式对服务器返回的数据进行解析，默认json
dataType: "json",
// 数据
data: {
msg: "我是来请求数据的"
},
// 请求成功的回调函数
success: function(data) {
console.log(data);
},
// 请求失败的回调函数
error: function() {
console.log("失败了");
},
// 请求发送之前调用的函数
beforeSend: function() {
console.log("请求发送之前调用的函数");
// 如果返回一个false，那么就会阻止整个请求的发送
// return false;
// 用法：可以用作表单验证，当表单内容符合规范的时候发送ajax请求，当不符合的时候就不发送ajax请求
},
// 不论请求是成功还是失败的，只要请求完成就会调用
complete: function() {
console.log("请求完成了");
},
// 设置请求超时时间(单位:ms)，超过这个时间后，就不会请求了
timeout:2000
});
9.3 jQuery中的serialize和serializeArray方法
1、jQuery中的serialize方法：
serialize方法会将表单中所有的内容拼接成key=value&key=value这样的字符串。
通过这种方式就不要再去手动获取表单中的内容的
2、jQuery中的serializeArray方法：
上面的方法我们可以看到，获取整个数据的时候，是很简单，但是想要进行校验的话就很难，因为上面的方法获取的是一个字符串，不能进行校验，所以此时我们需要另外一个方法，jQuery中的serializeArray方法。
示例代码：ajax模拟表单校验及注册
sing in page
用户名不能为空
张三：
哈哈哈，真有趣