jquery《从入门到精通》学习笔记
一个轻量级的前端框架
当前使用版本为1到3，所以很多新版本的api不会过多介绍
jquery的下载链接##https://jquery
项目链接##https://jquery
<原书分享>
| 1.事件处理 |
|---|
| JavaScript以事件驱动实现页面交互，事件驱动的核心:以消息为基础，以事件来驱动。例如，当浏览器加载文档完毕后，会生成一个事件;当用户单击某个按钮时，也会生成一个事件。虽然利用传统的avaScript事件能完成这些交互，但jQuery增加并扩展了基本的事件处理机制，jQuery不仅提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。 |
| 1.1 jquery事件处理基础 |
|---|
| jquery在javascript基础上进一步封装了不同类型的事件模型，从而形成一种功能更强大，用法更优雅的“”jquery事件模型“”，jquery事件模型体现如下特征： |
| 统一了事件处理中的各种方法。 |
| 允许在每个元素上为每个事件类型建立多个处理程序。 |
| 采用DOM事件模型中标准的事件类型名称。 |
| 统一了event事件对象的传递方法，并对event对象的常用属性和方法进行规范。为事件管理和操作提供统一的方法。 |
| 考虑到IE浏览器不支持事件流中的捕获型阶段，且开发者很少使用捕获型阶段，jQuery事件模型也没有支持事件流中的捕获型阶段。除了这一点区别外，jQuery事件模型的功能与DOM事件模型基本相似。 |
| 1.1.1绑定事件 |
|---|
| jquery提供了四种事件绑定方式：bind(),live(),delegate(),on(),每种方式各有特点，明白了他们之间的异同点，就能够进行正确选择，从而写出优雅而容易维护的代码（如今版本3以及更高的版本不存在bind(),live(),delegate(),如今都用on()代替，所以我们就当做了解一下吧） |
| 其相同点有如下。 |
|---|
| (1)都支持单元素多事件的绑定，都支持空格相隔方式或者大括号替代方式。 |
| (2)均是通过事件冒泡方式，将事件传递到document进行事件的响应。 |
| 其不同点有如下。 |
|---|
| (1) bind()只能针对已经存在的元素进行事件的设置，但是live()、on()、delegate()均支持委派事件，即可以为未来新添加元素注册事件。 |
| (2) bind0函数在jQuery1.7版本以前比较受推崇，jQuery1.7 版本出来之后，官方已经不推荐用bind(),替代函数为on()。on()可以代替live(), live()方法在jQuery 1.9版本已经被删除。 |
| (3) live()与delegate()类似，但是live()在执行速度、灵活性和CSS选择器支持方面比delegate()弱。 |
| (4) bind()支持jQuery版本1和版本2,在版本3中被弃用; live()支持 jQuery1.8-,高版本不再支持: delegate()支持 jQuery1.4.2+,在jQuery版本3中被弃用: on()支持jQuery1.7+。 |
| 总之，如果项目中引用jQuery为低版本，推荐用delgate()， 高版本jQuery可以使用on()来代替，在jQuery 3+版本中只支持on()。 |
1.bind()
bind()方法为匹配元素添加一个或者多个事件处理器，用法如下：
/*添加单个事件*/
$(function(){
$(".btn-test").bind("click",function(){
$(".container").slideToggle();
})
/*添加多个事件*/
$(".btn-test").bind("mouseout click",function(){
$(".container").slideToggle();
})
/*删除事件*/
$(".btn-test").unbind("click");
})
/*
bind(event,data,function)
*/
| 参数 | 说明 |
|---|
| event | 必需参数项， 添加到元素的一个或多个事件，如click、 dblclick等。可以设计单事件处理， 如$(selector).bind(“click” ,data,function);。可以设计多事件处理，此时需要使用空格分隔多个事件，如$(selector).bind(“click ,dbclic,kmouseout”,data,function);,这种方式较为死板，不能给事件单独绑定函数，适合处理多个事件调用同一个函数的情况f,可以使用大括号语法灵活定义多个事件，如$(selector).bind({event:function,event2:function,…}),这种方式较为灵活，可以给事件单独绑定函数 |
| data | 可选参数项，设计需要传递的参数 |
| function | 必需参数项，当绑定事件发生时，需要执行的函数 |
| childSelector | 必须参数项，指定需要注册事件的元素，一般为调用对象的子元素 |
2.live(event,data,function):匹配当前或未来的匹配元素添加一个或多个事件处理程序，参数说明如上
用法如上，如需详解可到哔哩哔哩，csdn,简书，百度及百度文库进一步了解,该方法可用on()代替，高版本不存在，
3.delegate(childselector,evnet,data,function):该方法为指定的元素，以及被选元素的子元素，添加一个或多个事件处理程序，并规定当这个事件发生时运行函数，使用dalegate()方法适用于当前或未来的元素，如由脚本创建的新元素等
$(function(){
$("ul").delegate("li","click",function(){
alert(this.innerHTML);
})
})
4.on(event.childSelector,data,function):方法为指定的元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用on()方法的事件处理程序使用于当前或未来的元素，如由脚本创建的新元素
$(function(){
$("ul").on("click","li",function(){
alert(this.innerHTML);
})
$("ul").on("click","li",{a:"A",b:"B"},function(){
$(this).text(event.data.a+event.data.b)
return false//阻止事件冒泡，又或者：event.stopPropagetion()
//又或者：event.parentDefault();
})
})
1.1.2事件方法24个快捷方式
| 方法 | 说明 |
|---|
| 1.blur | 失去焦点 |
| 2.focus | 进入焦点 |
| 3.focusin | 指定元素的子元素进入焦点 |
| 4.focusout | 指定元素的子元素失去焦点 |
| 5.error | 出错时触发 |
| 6.click | 单击事件 |
| 7.dbclick | 双击事件 |
| 8.change | 发生变化时触发 |
| 9.keydown | 键盘按下时 |
| 10.keypress | 键盘持续敲击触发 |
| 11.keyup | 键盘抬起时触发 |
| 12.mouseenter | 指定的元素触发hover鼠标事件,且不会向父级冒泡 |
| 13.mouseover | 指定的元素触发hover鼠标事件,会向父级冒泡 |
| 14.mousedown | 鼠标按下时触发 |
| 15.mousemove | 鼠标久按时持续触发 |
| 16.mouseout | 离开指定的元素或者子元素时都会触发 |
| 17.mouseleave | 离开指定的元素时触发 |
| 18.mouseup | 鼠标抬起时触发 |
| 19.resize | 监听window以及元素的大小 |
| 20.scroll | 滚动页面时触发 |
| 21.select | |
| 22.submit | 提交表单数据,该api在高版本中已经移除 |
| 23.unload | 1.8版本及更高的版本已经移除该api,用户离开页面时触发; |
| 24.load | 加载页面中的公共资源 |
| 1.1.3绑定一次性事件 |
|---|
| one()是on()的一个特例，用于一致，但由他绑定的事件在执行一次ui响应之后就会失效 |
one(event,[data],function):
$(function(){
$("ul>li").one("click",function(){
alert($(this).text());
})
})
| 1.1.4 注销事件 |
|---|
| 交互型事件的生命周期往往与页面的生命周期相同的，但是很多交互事件只有在特定的时间或者条件下有效，超过了时效期，就应该把他注销掉，以节省空间，根据上面的事件绑定方式jquery提供了以下4种注销事件的方式：unbind(),die(),undelegate(),off() |
$('li').click(function(e){
// console.log(e.clientX)
console.log('点击');
}).mouseenter(function(){
console.log('mouseenter');
}).mouseleave(function(){
console.log('mouseleave');
})
//解除click的事件处理函数
$('li').off('click')
| 1.1.5使用事件对象 |
|---|
| 当使用on()，bind(),delegate()等方法注册事件时，event对象实例将作为第一个参数传递给事件处理函数，这与DOM事件模型是完全相同的，但是jquery统一了IE事件模型和DOM事件模型中event对象属性和方法的用法，使其完全符合DOM标准事件模型的规范，jquery修正了web开发中可能遇到的浏览器兼容性问题，如下表所示 |
| 属性/方法 | 说明 |
|---|
| type | 获取事件的类型，如click、mouseover等。返回值为事件类型的名称，该名称与注册事件处理函数时使用的名称相同 |
| target | 发生事件的节点。一般利用该属性来获取当前被激活事件的具体对象 |
| relatedTarget | 引用与事件的目标节点相关的节点。对于mouseover事件来说，它是鼠标指针移到目标上时所离开的那个节点;对于mouseout 事件来说，它是离开 目标时鼠标指针将要进入的那个节点 |
| altKey | 表示在声明鼠标事件时，是否按下了AlIt键。如果返回值为true,则表示按下 |
| ctrlKey | 表示在声明鼠标事件时，是否按下了Ctrl键。如果返回值为true,则表示按下 |
| shiftKey | 表示在声明鼠标事件时，是否按下了Shift 键。如果返回值为true,则表示按下 |
| metaKey | 表示在声明鼠标事件时，是否按下了Meta键。如果返回值为true,则表示按下 |
| which | 当在声明mousedown. mousup和click事件时，显示鼠标键的状态值，也就是说哪个鼠标键改变了状态。返回值为1,表示按下左键:返回值为2.表示按下中键:返回值为了， 表示按下右键 |
| which | 当在声明kydwan和kypees事件时，显示触发事件的键盘键的数字编码 |
| pageX | 对于鼠标事件来说，指定鼠标指针相对于页面原点的水平坐标 |
| pageY | 对于鼠标事件来说，指定鼠标指针相对于页面原点的垂直坐标 |
| screenX | 对于鼠标事件来说，指定鼠标指针相对于屏幕原点的水平坐标 |
| screenY | 对于鼠标事件来说，指定鼠标指针相对于屏幕原点的垂直坐标 |
| data | 存储事件处理函数第二个参数所传递的额外数据 |
| preventDefault | 取消可能引起任何语义操作的事件，如元素特定事件类型的默认动作 |
| stopPropagation | 防止事件沿着DOM树向上传播 |
| 1.1.6触发事件 |
|---|
| 事件都是在特定的条件下发生的，自然不同类型的事件触发时机是无法预测的，开发者无法知道用户何时单击按钮提交表单，或者何时输入文本，但是很多情况下，开发人员需要在脚本中控制事件触发的时机 |
| jquery定义在脚本控制下自动触发事件处理函数的一系列方法，其中最常用的是trigger()方法。 |
trigger(type,[data])
$(function(){
$("li").click(function(){
alert($(this).text());
})
$("li").mouseover(function(){
$(this).trigger("click");
})
})
| 除此之外还提供了triggerHandler()对象对trigger()方法进行补充，该方法的行为表现与trigger()方法类似，用法也相同 |
|---|
| triggerHandle()方法不会触动浏览器默认事件 |
| triggerHandle()方法只触发jquery对象集合中第一个元素的事件处理函数 |
| triggerHandle()方法返回的是事件处理函数的返回值，而不是jquery对象，如果最开始的jquery对象集合为空，则这个方法返回undefined |
| 1.2.1切换事件 |
|---|
| jquery定义了两个事件切换的合成方法:hover()和toggle().事件切换在web开发中经常会用到,如样式交换,行为交换等,另外还提供了一个toggleClass()方法,它能够显示或隐藏指定的class样式,实现样式切换等效果. |
taggle([speed],[easing],[fn])
speed:为显示或隐藏的时间,默认为0毫秒,可选值有"slow","normal","fast"
easing:可选参数,用来指定切换的效果,默认是"swing",可用参数"linear".
fn:可选参数,定义在动画完成时执行的函数,每个元素执行一次
$(function(){
$("button").click(function(){
$("ul#list").toggle("slow");
//也可以传递boolean值, $("ul#list").toggle(false);
})
})
| 1.2.2使用悬停事件 |
|---|
| hover()方法可以模仿悬停事件,该方法传递两个参数:指定触发事件的元素,第二个为函数 |
$(function(){
$("input").hover(function(){
alert("该鼠标停留")
})
})
| 1.2.3事件命名空间 |
|---|
| 事件命名空间,以方便事件管理 |
$(function(){
$("li").on("click.a",function(){
$("body").append("<p>click</p>");
})
$("li").on("mouseover.a",function(){
$("body").append("<p>mouseover</p>");
})
$("li").off(".a");
})
$(function(){
$("div").on("mouseover mouserout",function(event){
$("body").append(event.type+"<br/>");
})
})
| 1.2.5自定义事件 |
|---|
| jquery支持制定义事件,所有自定义事件都通过trigger()方法触发 |
$(function(){
$("input").bind("delay",function(event){
setTimeout(function(){
alert(event.type);
},1000)
})
$("input").click(function(){
$("input").trigger("delay");
})
})
| 1.2.6页面初始化 |
|---|
| jquery定义了ready()封装javascript原生的window.onload方法,ready()方法表示当DOM载入就绪,可以查询和被操纵时,能够自动执行的函数,他是jquery事件模型中最重要的一个函数,极大地提高了web应用程序的响应速度 |
$(function(){
$("div").eq(0).ready(function(){
alert(1)
})
$("div").eq(1).ready(function(){
alert(2)
})
$("div").eq(2).ready(function(){
alert(2)
})
})
//ready方法一般按照如下方式调用
$(document).ready(function(){
//页面初始化之后执行的函数
})
jquery(function($){
//页面初始化后执行的函数体代码
})
$(function(){
//页面初始化后执行的函数体代码
})
//同时也可以取一个别名
$(function(me){
me("div").text("jquery函数别名")
})
| 1.2.7 使用ready()事件 |
|---|
| jQuery的ready事件与JavaScript的load事件具有相同的功能，但是它们在触发时机方面还存在如下细微区别。 |
| (1) JavaScip的load事件是在文档内容完全加载完毕后才被触发的。这个文档内容包括页面中所有节点以及节点关联的文件。这时JavaSeript 才可以访问网页中任何元素内容。这种情况对于编写功能性的代码非常有利，因为无需考虑加载的次序。 |
| (2) jQuery的ready事件在DOM完全就绪时就可以被触发，此时文档中所有元素都是可以访问的，但是与文档关联的文件可能还没有下载完毕。通俗地说，就是浏览器下载并完成解析HTML的DOM树结构，代码就可以运行。 |
| 如，对于一个大型图库网站来说，为页面中所有显示的图像绑定一个初始化设置的脚本。 如果使用JavaSript原生的load事件来设计，那么用户在使用这个页面之前，必须等待页面中所有图像下载完毕才能够实现。而在load事件等待图像加载过程中，如果行为还未添加到那些已经加载的图像上，则此时用户操作它们，可能会导致很多意想不到的尴尬。而使用jQuery的ready事件，则在DOM树结构解析之后，就立即触发页面初始化事件，从而避免使用load事件所带来的尴尬。 |
| 但是，由于jQuery的ready事件过早地触发，虽然DOM树结构已经解析完毕，但是很多元素的属性未必生效。例如，很多图像还没有加载完毕，导致这些图像的属性无效，如图像的高度和宽度。要解决这问题，可以使用jQuery的load事件进行触发，该事件等效于JavaScript 的load事件。 |
| 不仅如此,javascript的load事件存在一个很严密的缺陷,就是它不能被多次调用,但被多次调用时,后者覆盖前者.根据这个问题,我们用原生封装一下addLoadEvent(); |
/*
当多个js脚本出现同样的load方法时,相同的脚本会被覆盖，
因此自己封装一个addLoadEvent来解决此问题
工作原理如下
1 先把现有的window.onload事件处理函数的值存入处理函数的变量中（oldonLoad）
2 如果在这个处理函数上还没有绑定任何函数，则为其添加新的函数
3 如果在这个处理函数上已经绑定了一个函数，就把函数追回到现有函数的尾部
*/
// window.onload=()=>{
// functionA();
// functionB();
// }
// functionA=()=>{
// alert("第一次调用")
// }
// functionB=()=>{
// alert("第二次")
// }
// addloadEvent=func=>{
// //把window.onload事件处理函数的值存入变量oldonLoad
// let oldOnLoad = window.onload;
// /*
// 如果window.onload事件没有绑定任何事件处理函数，则为其添加新的事件处理函数
// */
// if (typeof window.onload != "function"){
// window.onload = func;
// }else{
// //先执行原来已绑定的事件处理函数，然后调用新添加的事件处理函数
// window.onload=()=>{
// oldOnLoad?oldOnLoad():func();
// }
// }
// }
// addloadEvent(functionA)
// addloadEvent(functionB)
| 2.使用ajax |
|---|
| ajax的核心是javascript对象XMLHttpRequest,该对象在IE5中首次引入,它能够帮助用户使用javascript向服务器提出请求并处理响应,在不阻塞网页交互响应,考虑到浏览器的兼容性,jquery封装了ajax应用,避免编写大量兼容性代码 |
| 2.1 jquery ajax基础 |
|---|
| jquery封装了ajax交互过程,用户仅需调用jquery方法,就可以轻松实现客户端与服务器端异步通信,从而帮助开发人员从繁琐的底层技术中解脱出来,专业于业务层开发 |
| jax是Asynchronous JavaScript and XML首字母缩写，表示异步JavaScript和XML,它并不是指一种单一的技术， 而是有机地利用了一系列Web 技术所形成的结合体， 它的出现揭开了无刷新更新页面的新时代，并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑。 |
| Ajax主要用到下面几种技术实现异步通信: |
| 日基于标准的XHTML结构和CSS样式。 |
| 通过DOM (Document Object Model) 实现动态显示和交互。 |
| 通过XML和XSLT进行数据交换和处理。 |
| 用XMLHttpRequest插件进行异步通信。 |
| 使用JavaScript实施逻辑控制，以便整合以上所有的技术。 |
| Ajax给Web开发提供了方便，并带来很多益处，简单概括如下。 |
|---|
| (1)获得了主流浏览器的主持。 |
| 这使得异步通信技术获得快速发展，并能够普及到Web应用的每个角落。由于浏览器都内置了Ajax组件，这样用户就不用担心所开发的Web应用是否被支持，只要浏览器允许执行JavaScript程序即可。 |
| (2)提升了用户体验。 |
| Ajax的提出就是为了解决传统通信给用户访问带来的不便，优秀的用户体验正是Ajax获得广大开发者和用户认可的根本原因。浏览者不用刷新页面就可以快速更新页面显示信息，这在传统Web开发中是很难实现。正是因为异步通信技术的普及，才诞生了众多Web 2.0类型的网络应用。 |
| (3)提高了web应用的性能 |
| 于传统的页面刷新请求不同,ajax实现局部数据请求和更新功能,使得客户端于服务器交互数据量大大降低,节省了大量带宽,同时请求响应速度也变得更加迅速 |
| 2.2使用get请求 |
|---|
| jquery定义了get()方法,专门负责通过远程HTTP get请求方式载入信息,该方法具有一个简单的get请求功能,以取复杂的$AJAX()方法 |
| get()包含4个参数,其中第一个参数为必须设置项,后面3个为可选参数 |
| 第一个参数表示要请求页面 url |
| 第二个参数表示一个对象结构的名/值队列表 |
| 第三个参数表示异步交互成功返回个的回调函数,回调函数的参数值为服务器端响应的信息 |
| 第四个参数表示服务器端响应信息返回的内容格式,如:XML,HTML,SCRIPT,JSON和text或者_default |
//jQuery.get(url,[data],[callback],[type])
$(function(){
$("input").click(function(){
$.get("text1.asp",{
name:"css8",
pass:123456,
age:1
},function(data){
alert(data)
})
})
})
| 2.2.2使用post请求 |
|---|
| post请求方式及参数于上面雷同,代码如上所示,但应该注意的是get()只能用来获取数据,而post()可以用来传递数据; |
| 2.2.3 使用ajax请求 |
|---|
| ajax()方法是jquery实现ajax的底层方法,也就是说他是get(),post()等方法的基础,使用该方法可以完成通过HTTP请求加载远程数据,由于ajax()方法的参数较为复杂,在没有特殊请求时,使用高级方法(如get(),post()等)即可. |
| 参数 | 数据类型 | 说明 |
|---|
| async | Boolean | 设置是否异步请求。默认为tue即所有请求均为异步请求。如果需要发送同步请求，设置为fale即可。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行 |
| beforeSend | Function | 发送请求前可修改XML HtpRequet对象的函数，如添加自定义HTTP头。XMLHtpRequest对象是唯一的参数。该函数如果返回false,可以取消本次Ajax请求 |
| cache | Boolean | 设置缓存。默认值为true,当dataType为script时，默认为false.设置为false将不会从浏览器缓存中加载请求信息 |
| complete | Function | 请求完成后回调函数(请求成功或失败时均调用) 。该函数包含两个参数: XMLHttpRequest对象和一个描述成功请求类型的字符串 |
| contentType | String | 发送信息至服务器时内容编码类型。默认为application/x-www-form-urlencoded |
| data | Object, String | 发送到服务器的数据。将自动转换为请求字符串格式，必须为key/value 格式。GET请求中将附加在 URL后。查看processData 选项说明以禁止此自动转换。如果为数组，jQuery将自动为不同值对应同一个名称。如{foo:[“bar1”, “bar2”]}转换为’&foo=bar1&foo-=bar2’ |
| dataFilter | Function | 预期服务器返回的数据类型。如果不指定，jQuery 自动根据HTTP包含的MIME信息返回responseXML或responseText, 并作为回调函数参数传递，可用值:xml;返回XML文档，可用jQuery处理,html:返回纯文本HTML信息，包含的script标签会在插入dom时执行,script:返回纯文本JavaSerpt 代码。不会自动缓存结果。除非设置了Cache参数.注意:在远程请求时(不在同一个域下)， 所有POST请求都将转为GET请求(因为将使用DOM的script标签来加载),json:返回JSON数据,jsonp: JSONP 格式。使用JSONP形式调用函数时，如:myurl?callback=?", jQuery 将自动替换为正确的函数名，以执行回调函数,text:返回纯文本字符串 |
| error | Function | 请求失败时调用的函数。该函数包含3个参数: XMLHttpRequest 对象、错误信息(可选),捕获的错误对象。如果发生了错误，错误信息(第二个参数)除了得到null之外，还可能是timeout、error、notmodified 和parsererror |
| global | Boolean | 是否触发全局Ajax事件，默认值为true。设置为false将不会触发全局Ajax事件，如ajaxStart或ajaxStop可用于控制不同的Ajax事件 |
| ifModified | Boolean | 仅在服务器数据改变时获取新数据，默认值为false. 使用HTTP 包含的Last-Modifed 头信息进行判断 |
| jsonp | String | 在一个jsonp请求中重写回调函数的名字。这个值用来替代callback=?"这种GET或POST请求中URL参数里的callbak部分，如{jsonp:’ onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器 |
| password | String | 用于响应HTTP访问认证请求的密码 |
| processData | Boolean | 发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型applocation/x-ww.form-urlencoded,默认值为true,如果要发送DOM数信息或其他不希望转换的信息,请设置为false |
| scriptCharset | string | 只有当请求时dataType为jsonp或script,并且type是get才会用于强制修改charset,通常在本地和远程的内容编码不同时使用 |
| success | function | 请求成功后回调函数,函数的参数由服务器返回,并根据datatype参数进行处理后的数据,描述状态的字符串 |
| timeout | number | 设置请求超时时间(毫秒),此设置将覆盖全局设置 |
| type | string | 设置请求的方式,如post或get,默认get,其他HTTXP请求方法,如put或delete也可以使用,但仅部分浏览器支持 |
| url | string | 用于响应HTTP访问认证请求的用户名 |
| username | string | 用于响应HTTP访问认证请求的用户名 |
| xhr | function | 需要返回一个XMLHttpResquest对象,默认在IE下是ActiveObject,而其他情况下是XMLHttpResquest,用于重写或者提供一个增强的XMLHttpResquest对象 |
| 2.2.4跟踪状态 |
|---|
| jquery在XMLHttpResquery对象定的readyState属性基础上,对异步交互服务器响应状态进行了封装,提供了6个响应事件,以便于进一步细化对整个请求响应过程的追踪 |
| 事件 | 说明 |
|---|
| ajaxStart | ajax请求开始进行响应 |
| ajaxSend | ajax发送请求时开始响应 |
| ajaxComplete | ajax请求完成时进行响应 |
| ajaxSuccess | ajax请求成功时进行响应 |
| ajaxStop | ajax请求结束时响应 |
| ajaxError | ajax请求错误时响应 |
$(function(){
$.ajax({
type:"post"
url:"test.txt"
data:"name=css8"
})
//响应顺序如下
$("div").ajaxStart(function(){
alert("ajax请求开始")
})
$("div").ajaxSend(function(){
alert("ajax发送请求")
})
$("div").ajaxSuccess(function(){
alert("ajax请求成功")
})
$("div").ajaxComplete(function(){
alert("ajax完成请求")
})
$("div").ajaxStop(function(){
alert("ajax请求结束")
})
$("div").ajaxError(function(){
alert("ajax报错")
})
})
| 2.2.5载入文件 |
|---|
| 遵循ajax异步交互的设计原则,jquery定义了可以加载网页文档的方法load(),该方法与getScript()方法的功能相似,都是加载外部文件,但是他们的用法完全不同,load()方法能够把加载的网页文件附加到指定的网页标签中 |
| 使用ajax方法可以替代load方法,因为load()方法是以ajax()方法作为底层实现的 |
$(function(){
$("input").click(function(){
$("div").load("text.html");
})
})
<---------------------------------------->
$(function(){
$("input").click(function(){
var str = ($.ajax({
url:"table.html"
async:false;
})).reponseText;//获取XMLHttpResquest对象中包含的服务器响应信息
$("div").html(str);
})
})
| 2.2.6设置ajax选项 |
|---|
| 对于频繁与服务器进行交互的页面来说，每-次交互都要设置很多选项，这种操作是很繁琐的，也容易出错。为此，jQuery 定义了ajaxSetup0方法，该方法可以预设异步交互中通用选项，从而减轻频繁设置选项的繁琐。 |
| ajaxSetup()方法的参数仅包含一个 参数选项的列表对象，这与ajax0方法的参 数选项设置是相同的。在该方法中设置的选项，可以实现全局共享，从而在具体交互中只需要设置个性化参数即可。 |
$(function() {
$.ajaxSetup({ //预设公共选项
url: "test.asp", //请求的URL
global: false, //禁止触发全局Ajax事件
type:"POST", //请求方式
dataType:"text"， //响应数据的类型
success :function (data) { //响应成功之后的回调函数
alert (data) ;
});
$("input") .eq(0) .click (function() { / /为按钮1绑定异步请求$.ajax ({
data : "name=zhu"
/ /发送请求的信息
};
};
$("input") .eq(1) .click (function() { //为按钮2绑定异步请求$.ajax({
data : "name=wang"
/ /发送请求的信息
}) ;
}) ;
$("input") .eq(2) .click(function(){ // 为按钮3绑定异步请求$.ajax( {
data : "name=zhang"
//发送请求的信息
}) ;
}) ;
})
| 2.2.7序列话字符串 |
|---|
| 在Aja异步通信过程中，客户端所发送的请求字符串格式必须是由“&”字符连接的多个名/值对，列如， user-zhu&sex-man&grade=2。 而当使用表单发送请求时， 发送请求的信息并非按此格式进行传递。用户需要手工编写发送信息的字符串格式，为了减轻开发人员不必要的劳动量，特意定义了serialize(方法，该方法能够帮助用户按名/值对的字符串格式快速整理，并返回合法的请求字符串。 |
//在发送请求之前,调用serialize()方法,就可以轻松完成解决合法格式的请求字符串的设计了
$(function(){
$("p").html($("form").serialize());
return false;
})
//除此之外jquery还定义了serializeArray()方法,该方法能够返回指定表单域值的json结构对象
该方法无法在form表单上直接调用
$(function(){
$("#submit").click(function(){
var arrar = $("input, select,:redio").serialzeArray();
})
})
再最后,献上原生es6封装的ajax
let ajax=json=>{
const xhr = new XMLHttpRequest();
const {mathod,url,success,error} = json;
let data = json.data||{};
//封装fn函数
function fn(obj){
let arr=[];
for(let key in obj){
arr.push(key+"="+obj[key])
}
return arr.join("&");
}
//区分"get"以及'post'
switch(mathod){
case'get':
xhr.open(mathod,url+"?"+fn(data),true);
xhr.send(null)
break;
case"post":
xhr.open(mathod,url,true)
xhr.send(fn(data))
xhr.setReadyHeader("content-type","application/x-www-unlencoded");
break;
}
//封装状态码
xhr.onreadystatechange=()=>{
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
success(JSON.parse(xhr.responseText))
}else{
error(status)
}
}
}
}
ajax({
mathod:"get",
url:"https://jsonplaceholder.typicode/posts",
// data:{
// usedname:"zhoulan",
// age:"28",
// }
success:res=>{
console.log(res)
},
error:status=>{
console.log(xhr.status)
}
});
| 今天的快乐已经结束，下一章设计动画跟使用辅助工具，我们下章见，2020-5-13； |
|---|
本文标签：
入门未来科技jqueryUI
发表评论