jQuery视频知识点总结_jquery关于视频的处理-CSDN博客

本文链接：https://blog.csdn.net/xin_xun_/article/details/60467343

选择器

1.基本选择器

$('#id属性值') document.getElementById();

$('tag标签名称')document.getElementByTagName();

$('.class属性值') class属性值选择器

$('*') 通配符选择器

$('s1,s2,s3') 联合选择器:把符合s1，s2或s3条件的节点都找到

2.层次选择器：

$(s1 s2)父子派生选择器：在s1内部获得全部的s2节点（不考虑层次）

$(s1>s2)父子直接子元素选择器：在s1内部获得直接子元素节点s2

$(s1+s2)兄弟直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(s1~s2)兄弟后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

3.并且（过滤）选择器：

（这里的符合条件指的是冒号前利用一些选择器选择出的若干元素）

:first 符合条件的第一个元素

:last 符合条件的最后一个元素

:eq(index) 符合条件的第index个元素，这里的index是从0开始的

:gt(index) 符合条件的索引值大于index（不包括index）的所有元素

:lt(index) 符合条件的索引值小于index（不包括index）的所有元素

:even 符合条件的下标索引值为偶数的元素

:odd 符合条件的下标索引值为奇数的元素

（但这里要注意，因为index是从0开始取的，所以实际上是奇数位置的元素下标都是偶数，反而要用even来选择）

:not(selector) 去除符合条件的元素中满足selector条件的元素

:header 符合条件的所有标题元素

//并且（过滤）选择器可以单独使用，也就是说冒号前可以不写任何内容

//各种选择器都可以在并且选择器中使用，也就是说将各个写法正确的选择符连起来写就可以筛选出同时符合所有条件的元素

$(':header.pear')

//每个选择器使用前，已经获得节点下标归位处理，如果想获得li集合中的第2、3、4个li，原本要使用的是$('li:gt(1):lt(5)')，但却发现选择出来的结果是li集合中的第23456个li，原因是，首先进行的是li:gt(1)选择，选出所有下标大于1的li元素，这些li元素被重新编号，从0开始，原本下标为2的元素现在下标为0，再进行:lt(5)过滤的时候是以重新编号后的下标为标准的，选出下标小于5的元素，对应回原始下标，就相当于是下标小于7的元素，故而选出的是原来li集合中的第23456个li元素。要选出li集合中第234个li元素，正确的写法应该是$('li:gt(1):lt(3)')

//并且关系的多个选择器，没有前后顺序关系，但是要避免产生歧义

$(':header.pear')和$('.pear:header')是一样的结果

4.内容过滤选择器

:contains(context) 包含内容选择器,获得的节点内部包含指定的内容context,就算内容context被包含在其他子标签之中，也不会被影响

:empty 获得空元素节点对象，即内部没有任何元素/本文的节点对象，注意如果节点内部有空格的话则不算是空元素节点对象，因为空格是一种文本内容

:has(selector) 节点内部必须包含满足指定选择器规定条件的元素

:parent 寻找的节点必须作为父元素节点存在

5.表单域选中选择器

$(:checked) 复选框，单选按钮选中选择器获得被选中的复选框或者单选按钮

$(:selected) 下拉列表选中选择器获得被选中的下拉列表项目

属性操作

1.属性操作

$().attr(attributeName); 获得属性信息值（自定义属性和w3c规定的属性都可以获取）

$().attr(attributeName,attributeValue);设置属性信息（jquery对type属性是禁止修改的，比如：$('input:first').attr('type','checkbox')是不会有修改作用的；但js底层代码在有的浏览器中是可以修改的，比如将原本的text文本框改成复选框：document.getElementById('id').type="checkbox"）

$().removeAttr(attributeName); 删除属性（除了type属性，其他属性都可以删除）

$().attr(jsonObject); 同时为多个属性设置信息值，json对象的键值对就是名称和值

$().attr(attributeName,fn); 通过fn函数执行的return返回值对属性进行修改赋值操作

快捷操作

1.原始的class属性值操作

$().attr('class',class属性值);修改class属性的值对同一个class进行多次设置修改，后者会覆盖前者，也就是只有最后一个设置class的语句会生效

$().attr('class'); 获取class属性的值

$().removeAttr('class'); 删除class连同class的所有属性也一起删除了

class具体快捷操作方法

$().addClass('class属性值'); 给class属性追加信息值对同一个class设置多个样式，会同时存在，不会被覆盖

$().removeClass('class属性值'); 删除class属性中的某个信息值

$().toggleClass('class属性值'); 开关效果，有某个class属性值就删除，没有就添加

2.标签包含内容操作

JavaScript操作

node.innerHTML; 获得节点node包含的信息

node.innerHTML=somecontont；设置节点node包含的内容

innerHTML不是w3c标准技术，只是许多浏览器对其都有支持而已

jquery操作

$().html(); 获得节点包含的信息

$().html(somecontont); 设置节点包含的内容普通字符串和html标签都可以设置

$().text(); 获得节点包含的“文本字符串信息”内容不包含一切标签

$().text(somecontont); 设置节点包含的内容（有html标签就把">"和"<"符号变为符号实体，也就是说html标签会被当做普通字符串处理，浏览器不识别它们）

html()和text()方法的区别：

1. 获取内容：

前者可以获取html标签和普通字符串内容。

后者只获取普通字符串内容（会自动过滤html标签）。

例如：<div id=”exp”><p>Thisa an example.</p></div>

$(‘#exp’).html();//得到的结果是：<p>Thisa an example.</p>

$(‘#exp’).text();//得到的结果是：Thisa an example.

2. 设置内容：

前者可以设置html标签和普通字符串内容。

后者只设置普通字符串内容，如果内容里面有tag标签内容，就需要把其中的“>”,“<”符号转变为符号实体：<对应< >对应> 空格对应 

以上两种操作（获取/设置）如果针对的操作内容是纯字符串内容，则使用效果一致。

3.CSS样式操作

$().css(name,value); 设置样式会被设置为行内样式，有则修改，无则添加（为行内样式），若外部也存在对相同样式的设置，则会被覆盖，因为行内样式的优先级高；复合样式可以直接设置（为行内样式）

$().css(name); 获取样式信息行内样式，内部样式，外部样式都可以获取，但复合样式需要拆分为具体样式进行获取（比如可以同时设置字体颜色、大小、字体类型的font属性）；而JavaScript的DOM方式只能获得行内样式

$().css(jsonObject); 同时修改多个css样式

css()样式操作特点：

1. 样式获取，jquery可以获取行内、内部、外部的样式。

DOM方式只能获得行内样式。

2. 获取复合属性样式，需要拆分为“具体样式”才可以操作。

有的浏览器是可以获得复合属性信息的，例如chrome。

例如，background需要拆分为background-color、background-image等进行操作。

margin需要拆分为margin-top、margin-left、margin-right、margin-bottom进行操作。

3. 样式的设置，会被设置为“行内样式”。

有相应样式则修改，无则添加。

复合属性样式可以直接进行设置操作，无需拆分分别进行设置。

value属性值快捷操作

原始的value属性值操作

$().attr('value');

$().attr('value',信息值);

因为value本质上也是元素节点的一种属性

快捷操作

$().val(); 获得value属性值

$().val(信息值); 设置value属性值

该val()方法在复选框、单选按钮、下拉列表的使用中有突出表现，比如：

想获取一组复选框中被选中的项目的value值，需要多行代码；（而下面的五种操作均可用一行代码完成）

想找出所有class为hby的复选框中value值为1,2,3的复选框并将其选中，可以用$('.hby').val([1,2,3])来实现

想获取全部被选中的下拉列表项目的value值，可以使用$('select').val()来实现（适合单选或多选的情况）；但若是下拉列表只能单选时（未设置multiple="multiple"属性），可以用$('option:selected').val()来实现

想找出下拉列表中value值为A,B,C的option并将其选中，可以使用$('select').val(['A','B','C'])来实现

想获取class为sx的一组单选按钮中被选中的单选框项目的value值，可以使用$('.sx:checked').val()来实现

想找出class为sx的一组单选按钮并将其中value为a的单选框项目被选择，可以使用$('.sx').val(['a'])来实现

5.复选框操作（全选、反选、全不选）

$().attr('checked',true); 设置复选框选中

$().attr('checked',false); 取消复选框选中

$().attr('checked'); 判断复选框选中情况，返回布尔值

想将class为hby的一组复选框全部选中，可以使用$('.hby').attr('checked',true)来实现。（这里之所以会有批量处理效果，是因为方法本身的“遍历机制”，在遍历的同时会为每个DOM对象都设置对应的属性或调用一次对应的方法

想将class为hby的一组复选框全部不选中，可以使用$('.hby').attr('checked',false)来实现。

想将class为hby的一组复选框全部反选，可以使用以下代码来实现：

$('.hby')

for(var i=0;i<$('.hby').length;i++){

varflag=$('.hby:eq('+i+')').attr('checked');//蓝色部分表示实际被拼接的内容

$('.hby:eq('+i+')').attr('checked',!flag);

}

jquery对象与DOM对象的关系

jquery对象：

$('#one')， $('li')等选择器返回的信息就是对象

DOM对象：

document.getElementById('one')，document.getElementByTagName('li')获取的就是DOM对象

jquery对象对DOM底层对象进行了封装

互调对方的成员：

jquery对象调用DOM对象的成员——失败：

$('h2').style.backgroundColor="lightblue";

DOM对象调用jquery对象的成员——失败：

document.getElementsByTagName('div')[0].css('color','blue');

jquery对象与DOM对象不能随便调用对方的成员

jquery对象封装DOM对象：

利用getElementById()和getElementByTagName()等方法来封装DOM对象

DOM对象就是jquery对象的数组组成部分

jquery对象转化成DOM对象：

jquery对象--->DOM对象：$()[下标]

jquery对象转化成DOM对象之后可以调用DOM对象的成员

DOM对象转化成jquery对象：

DOM对象--->jquery对象：$(DOM对象)

DOM对象转化成jquery对象之后可以调用jquery对象的成员

jquery框架对象类型：jquery对象和$对象

jquery对象（普通对象）：

各种选择器创建出来的对象 $(div)、$(.class)、$(#id)

创建一个jquery对象，该对象可以调用构造函数内部的成员：

1.jQuery.fn.init()构造函数本身的成员

2.（init()构造函数通过原型方式继承jquery.fn）init()构造函数new的对象不仅可以调用init本身成员，还可以调用fn的成员：jQuery.fn.init.prototype=jQuery.fn;

3.jQuery.fn本身还有“复制继承”，该复制继承可以为jQuery.fn丰富许多成员出来，如jQuery对象经常使用的addClass()、attr()、css()、html()、text()等等成员，都是jQuery.fn通过extend复制继承出来的：jQuery.extend=jQuery.fn.extend=function(){……}

$对象:

就是“函数对象”：$.()，也可以称为jQuery对象

该$对象可以调用的成员都是extend()复制继承过来的

例如$.get()、$.post()、$.ajax()

遍历方法

原始的遍历当前选中的复选框元素节点：

for(vari=0;i<$('.hby:checked').length;i++){

console.log($('.hby:checked:eq('+i+')').val());

}

each遍历方法

$.each(数组/对象，function处理)；//$对象调用的

$(选择器).each(function处理)； //jquery对象调用的

遍历数组：

$.each(数组，function(每个元素的下标k，每个元素的值v){})；

varcolor=['gold','yellow','orange','white'];

$.each(color,function(k,v){

console.log(k+"---"+v);

})；

遍历对象（获得各个成员）：

$.each(对象，function(成员名称k，成员的值v){})；

var cat={name:'kitty',color:'white',climb:function(){console.log('会爬树')}};

$.each(cat,function(k,v){

console.log(k+"---"+v);

})；

遍历jquery对象：

$(选择器).each(function(DOM对象的下标k,每一个DOM对象v){})；

$('li').each(function(k,v){

console.log(k+"---"+v);

v.style.color="blue";//DOM对象进行样式设置

$(v).css('backgroundColor','green');//DOM对象变成jquery对象

//this关键字在这里表示DOM对象——每个li元素，不清楚的话就打印出来

console.log(this);

//在jquery内部使用的时候，this基本上都代表的是DOM对象

this.style.color="purple";

$(this).css('backgroundColor','pink');

});

加载事件

JavaScript的加载事件两种方式：

window.οnlοad=function(){}

jquery加载事件实现

1.$(document).ready(function());

$(document)是把document的DOM对象变为jquery对象

这种方式的速度最快

2.$().ready(function());

$()也是创建jquery对象，不过内部没有DOM对象的组成部分

3.$(function())；

该方式加载事件是对第一种加载的封装

jquery加载事件与传统方法的区别

1.设置个数：

在同一个请求里加载事件设置的数量：

jquery：可以设置多个（把每个加载事件都存入一个数组里边并成为数组的元素，执行的时候就遍历该数组执行每个元素即可）

传统onload：只有一个起作用（给onload事件属性赋值，多次赋值，后者会覆盖前者）

2.执行时机：

jquery：只要全部内容（文字、图片、样式）在内存里对应的DOM树结构绘制完毕就执行，有可能对应的内容在浏览器里边还没有显示（如果绘制内容的时候加上了时间延迟，那么加载事件不会等到延迟时间过去，而是在DOM树结构加载完毕后直接执行）

传统onload：全部内容（文字、图片、样式）在浏览器显示完毕再执行加载事件（如果绘制内容的时候加上了时间延迟，那么加载事件要等到延迟时间过去以后才会执行）

（有时广告图片右上角的小叉点击无效，也就是关不上广告，就是因为在加载事件里面给图片的小叉设置了onclick事件还没有加载好，导致无法关闭广告；

用户名输入框在输入文字时点击，但原本的默认内容没有消失，我们输入的内容紧接其后显示，这也是在加载事件里面给输入框设置了onclick事件隐藏灰色文字，还没有加载好时默认文字不会消失）

总体来说，jquery执行速度更快

jquery加载事件是对DOMContentLoaded的封装（非onload）

普通（简单）事件操作

1.DOM1级事件设置

itnode.οnclick=function(){}

itnode.οnclick=函数；

2.DOM2级事件设置

itnode.addEventListener(类型,处理,事件流);

itnode.removeEventListener(类型,处理,事件流);

node.attachEvent();//这两个是IE中的方法

node.detachEvent();

3.jquery事件设置

$().事件类型(事件处理函数fn); //设置事件

$().事件类型(); //触发事件执行

事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等

例如：$(form).submit()可以使得表单进行提交

允许为同一个对象设置多个同类型事件：

$('div').mouseover(function(){

$('div').css('font-size','30px');

//$('this').css('font-size','30px');

});

$('div').mouseover(function(){

$('div').css('background-color','blue');

//$('this').css('background-color','blue');

});

jquery对文档的操作：

通过jquery方式实现页面各种节点的追加、删除、复制、替换等操作

节点追加：

1.父子关系追加（内部追加）

主动追加：

父节点.append(要追加的content)向每个匹配的元素内部后置追加内容content

父节点.prepend(要追加的content)向每个匹配的元素内部前置追加内容content

已有节点追加：发生物理位置移动：

$('#shu').append($('#wu li:eq(1)'))；

把id为wu的无序列表的第二个li元素追加到id为shu的无序列表的最后，相当于一个剪切粘贴的操作，对应的li元素在原来的id为wu的无序列表中就不存在了

被动追加：

要追加的节点.appendTo(父节点)把所有匹配的元素后置追加到另一个、指定的元素集合中

要追加的节点.prependTo(父节点)把所有匹配的元素前置追加到另一个、指定的元素集合中

下面两行的功能是一样的：

$('#shu').append('<li>赵云</li>')；

$('<li>赵云</li>').appendTo($('#shu'));

2.兄弟关系追加（外部追加）

主动追加：

兄弟节点.after(要追加的content)在每个匹配的元素之后插入内容content

兄弟节点.before(要追加的content)在每个匹配的元素之前插入内容content

已有节点追加：发生物理位置移动

被动追加：

要追加的节点.insertAfter(被追加节点)把所有匹配的元素插入到另一个、指定的元素集合的后面

要追加的节点.insertBefore(被追加节点)把所有匹配的元素插入到另一个、指定的元素集合的前面

下面两行的功能是一样的：

$('#liubei').after('<li>赵云</li>')；

$('<li>赵云</li>').insertAfter($('#liubei'));

节点替换：

$().replaceWith();被动替换用后面括号中的节点替换前面括号中的节点

$().replaceAll();主动替换用前面括号中的节点替换后面括号中的节点

既可以用新节点进行替换，也可以用已有节点进行替换

$('<li>赵云</li>').replaceAll($('#liubei'));用（新节点）赵云主动把刘备替换掉

$('#liubei').replaceWith($('#sunquan'));用（已有节点）孙权把刘备替换掉（用已有节点替换时，会发生物理位置移动，孙权从原来的位置处被移除）

节点删除：

$(父节点).empty();父节点清空子节点（但父节点仍然存在，只是其中没有东西了）

$(匹配节点).remove();删除匹配的节点

节点复制：

$().clone(true);节点和其身上的事件都复制

$().clone(false);只复制节点本身（包括节点内部信息）

varanother_zhangfei=$('#zhangfei').clone(false);//只复制节点，没有附带事件

varanother_zhangfei=$('#zhangfei').clone(true);//复制节点和其附带的事件

$('#wu').append(another_zhangfei);

使用上面这种复制原有节点再将其副本进行追加的方式，原有的节点仍在其原来位置

属性选择器使用

1.[name] 节点必须有“name”属性

2.[name=value] 节点必须有name属性，其值等于“value”

3.[name^=value] 节点必须有name属性，其值以“value”开头

4.[name$=value] 节点必须有name属性，其值以“value”结尾

5.[name!=value] 节点如果有name属性，其值不等于“value”；或者节点没有name属性

6.想找到有name属性，且其值不等于“value”的节点：

[name][name!=value]（这里利用到了属性选择器和并且选择器）

7.[name*=value] 节点必须有name属性，其值出现“value”字样（至于具体位置在哪无所谓）

并且选择器：

[selector1][selector2][selector3]需要同时满足多个条件时使用

例如：$('input [name$='value'] #id')

事件绑定（丰富对事件的操作）

jquery事件的简单操作：

$().事件类型(function事件处理);

$().事件类型();

jquery事件绑定：

$().bind(事件类型,function事件处理);

为div绑定事件：

$('div').bind('mouseover',function(){

$(this).css('background-color','lightblue');

})

$().bind(类型1类型2 类型3,事件处理);//给同一个对象的多个不同类型的事件绑定同一个处理，注意，多个类型的事件彼此通过一个空格连接,若是通过多个空格连接，则除了第一个类型的事件外，后面的事件都不会被绑定相应的事件

$('div').bind('click mouseovermouseout',function(){

console.log('12345');

})

$().bind(json对象);//批量方式设置事件：通过一个json对象，为节点同时绑定多个不同类型的事件

$('div').bind({

click:function(){console.log('111')},//这里使用的是匿名函数来绑定

mouseover:function(){console.log('222')},

mouseout:function(){console.log('333')}

$('div').bind('click',f1);//这里使用的是有名函数绑定

$('div').bind('click',f2);

});

function f1(){console.log('1');}

function f2(){console.log('2');}

（事件类型：click、mouseover,、mouseout、blur、focus等等）前面没有on

（事件处理：有名函数、匿名函数）

取消事件绑定：

之前取消事件：

dvnode.οnclick=null;//DOM1级事件取消

dvnode.removeEventListener(类型，(有名)处理，事件流);//DOM2级事件取消，三个参数的设置要与绑定的时候设置的一样

jquery方式取消事件绑定：

$().unbind();//取消全部事件绑定（无视事件类型，无视处理函数类型）

$('div').unbind();//取消全部事件绑定

$().unbind(事件类型);//取消指定类型的全部事件绑定（无视处理函数类型）

$('div').unbind('mouseover');//取消mouseover类型的全部事件绑定

$().unbind(事件类型，有名(事件)处理函数);//取消指定类型的指定事件处理函数绑定，注意，这种取消事件绑定，事件处理必须是有名函数

$('div').unbind('click',f1);//取消click类型的f1函数设置的事件绑定，注意这里的f1，f2放的位置，放在外部才能保证所有函数对它的访问权限

事件对象、阻止浏览器默认动作、阻止事件冒泡

$().bind('click',function(evt){});

$().click(function(evt){});

$().bind('mouseover',f1);

function f1(evt){}

事件对象：就使用evt即可，在jquery框架内部有做浏览器兼容性处理；以上evt对主流的事件对象和IE的事件对象都有封装

阻止浏览器默认动作、阻止事件冒泡：

DOM2级浏览器默认动作阻止：

事件对象.preventDefault();主流浏览器

事件对象.returnValue=false;IE浏览器

DOM2级事件冒泡阻止：

事件对象.stopPropagation();主流浏览器

事件对象.cancelBubule=true;IE浏览器

在jquery中：

$().bind('click',function(evt){

evt.preventDefault();//只是方法名与DOM2级的方法名相同，实际上已做过浏览器兼容处理

evt.stopPropagation();

});

preventDefault()方法是jquery的方法，名字与js底层代码的名字一致而已，并且其有做浏览器兼容处理

stopPropagation()方法是jquery的方法，名字与js底层代码的名字一致而已，并且其有做浏览器兼容处理

动画效果

基本动画：

隐藏

(本质上是通过CSS的属性display：none来控制的)

$().hide([速度ms,回调函数]);

回调函数：效果呈现完毕会自动调用函数执行

$('div').hide();

$('div').hide(3000);//在3000毫秒内隐藏，本质上是通过CSS的属性height和width、opacity（透明度）来控制的,隐藏时是沿着左上右下对角线的方向逐渐隐藏的

$('div').hide(3000,function(){

alert('我消失了');

});

显示

(本质上是通过CSS的属性display：block来控制的)

$().show([速度ms,回调函数]);

回调函数：效果呈现完毕会自动调用函数执行

$('div').show();

$('div').show(3000);//在3000毫秒内显示，本质上是通过CSS的属性height和width、opacity（透明度）来控制的,显示时是沿着左上右下对角线的方向逐渐显示的

$('div').show(3000,function(){

alert('我出现了');

});

开关

$().toggle([速度ms,回调函数]);

$('div').toggle();

$('div').toggle(3000);

$('div').toggle(false);//点击后始终为隐藏状态，很少这样使用，不如使用hide()直观

基本动画本质上是通过控制CSS的属性display、height和width、opacity（透明度）来控制的

垂直动画：

隐藏：

$().slideUp([速度ms,回调函数]);

$('div').slideUp(3000);//在3000毫秒内从下向上收起直到隐藏，本质上是通过CSS的属性height来控制的,隐藏时是沿着垂直的方向逐渐隐藏的

显示：

$().slideDown([速度ms,回调函数]);

$('div').slideDown(3000);//在3000毫秒内从上向下展开直到完全显示，本质上是通过CSS的属性height和display来控制的,显示时是沿着垂直的方向逐渐显示的

开关：

$().slideToggle([速度ms,回调函数]);

$('div').slideToggle(3000A);//本质上是通过CSS的属性height和display来控制的,显示或隐藏时是沿着垂直的方向逐渐显示或隐藏的，假设这条语句是包含在f3()函数中的：

循环调用f3()函数，每3000ms执行一次：

setInterval("f3()",3000B);

当A处和B处设置的时间相等时，刚好在f3()函数执行完一次之后开始下一次，效果会比较连贯

当A处设置的时间比B处设置的时间大时，f3()函数执行不完一次就会开始下一次

当A处设置的时间比B处设置的时间小时，f3()函数执行完一次之后需要等待B处减A处的时间，才会开始下一次

颜色渐变动画：

隐藏：

$().fadeOut([速度ms,回调函数]);

$('div').fadeOut(3000);//本质上是通过CSS的属性opacity来控制的,隐藏时是逐渐变透明从而逐渐隐藏的

显示：

$().fadeIn([速度ms,回调函数]);

$('div').fadeIn(3000);//本质上是通过CSS的属性opacity来控制的,显示时是逐渐变得不透明从而逐渐显示的

开关：

$().fadeToggle([速度ms,回调函数]);

$('div').fadeToggle(3000);//本质上是通过CSS的属性opacity来控制的,显示或隐藏时是通过改变透明度从而逐渐显示或隐藏的，

指定透明度：

fadeTo(speed,opacity,回调函数);

把所有匹配元素的透明度以渐进方式调整到指定的不透明度

opacity在0-1之间，数字越小，越透明

jquery封装的ajax

具体操作：

$.get(url [,data] [,function(msg){}][,dataType]);

url：向服务器端发出请求的地址

data:给服务器传递的数据，可以设置请求字符串或json对象

function(msg){}：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理，msg泛指从服务器传递回来的信息

dataType：服务器返回数据类型，html、text、xml、json

$.post(url [,data][,function(msg){}] [,dataType]);

该方法与$.get()方法的使用完全一致，不同的是其为post方式请求

给服务器传递数据的时候，不需要设置header头

（以上两种ajax请求是异步的，且封装层次稍高，可设置参数较少，如果需要设置同步请求，就换其他方法）

$.ajax({//json对象

url:请求地址

[data]:给服务器传递的数据，可以设置请求字符串或json对象

[dataType]:默认字符串返回信息，数据从服务器返回格式html、text、xml、json

[type]:get/post请求方式

[success]:function(msg){} ajax成功请求后的回调函数，可以做后续处理使用，msg泛指服务器返回来的信息

async:true异步/false同步

cache:true缓存/false不缓存

})