jsjquery中常用的语法13

Ajax

异步和同步

使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。 jQuery对Ajax采用了三层封装，其中最底层的是$.ajax(),中层封装是.load()，$.get()，$.post，最顶层是getScript和getJSON()。

二、.load()方法 jquery对Ajax进行了大量封装，对于封装方式，jquery采用了三层封装，其中$.ajax()是最底层封装，上层封装方法有.load()方法， $.get()，$.post()方法;

.load()方法是局部方法,.load()方法中共有三个参数，一个是url，链接地址，第二个是发送的数据data，第三个是回调函数callback，期中第二个参数为非必选参数。

1.参数url, 可以提供筛选功能。 $().load('data/test.html ') $().load(‘data/text.html .box’)>>>筛选功能

2.data参数传入决定，是否以post方式提交参数是一个对象形式传入。 $().load(‘data/test.html’,{ data:‘admin’ })

3.回调函数function(response,status,xhr){} $().load(‘data/test.html’,{ data:‘admin’ },function(response,status,xhr){})

response ：返回结果，和页面里内容一样 。 status ：状态，success，或者error xhr ：XMLHttpRequest，他是一个对象

xhr有四个常用属性。 属性名 说明 responseText 作为响应主体被返回的文本 responseXML 如果响应主体内容类型是"text/xml"或"application/xml"， 则返回包含响应数据的 XMLDOM 文档 status 响应的 HTTP 状态（状态码） statusText HTTP 状态的说明

三、$.get()和$.post() $.get()和$.post()有四个参数，其中第一个地址参数为必填参数，第二个参数data，和第三个callback函数和.load()方法一样， 第四个参数为type $.get(‘data/test.html’,{ name:‘admin’ },‘html’)

由于php返回的值默认为纯文本格式，所以数据格式html和text格式可以不写。如果写入数据格式，那么默认会强制转换为该格式。如果传入错误格式，那么不会有返回值。

注：一般情况下，type都是只能判断，并不需要人为设置，除非需要打印整个文件的代码，才需要强制类型转换。

$.get()和$.post()的差别:$.get()是以get方式提交，$.post()方式是以post方式提交。

1.get方式提交数据是吧数据放在浏览器网址上面的，post是通过http消息，实体提交的。 2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。 3.get方式因为在浏览器中会被历史记录缓存，所以这种提交数据方式并不安全，post方式没有这种问题。 4.在服务器端（php语言），get方式通过$GET[]方式获取，post通过$POST[]方式获取。

四、$.ajax()方法；

getScript()和$.getJSON()； jquery封装AJAX的最顶层，用于特定情况下的使用。 有三个参数,与$.get()和$.post()方法，前三个参数相同。 getScript()在需要资源的时候加载，是实现资源节约的时候需要用到的一个方法。 $.ajax()方法 $.ajax({ url:'', 链接路径 type:'post/get' 用什么方式提交 data:{键:值}, 传入数据用键值对方式传入 success:function(){ 成功是传入的参数 } })

表单序列化 当页面上表单需要提交时，我们如果把数据直接写在data里面工作量会很大，所以出现了表单序列化。 $(‘form’).serialize() 表单序列化是把整个表单内容提取出来，组成一个键值对，并且对URL进行编码。

$.ajaxSetup() ajax初始化对于ajax可以做一个预先设置，减少重复。 $.ajaxSetup({ url:'', type:'post', data:{user:'ddd'} }) $.ajax({ success:function(data){ alert(data) } })

$.param()方法，用来解析对象。

因为浏览器对对象的解析有限，太过复杂的对象无法解析，于是出现了$.param()方法用来解析对象。

alert($.param({ email:'ddd', user:'lll' }))

全局函数类型 何时被触发 参数

ajaxStart 在jQuery AJAX函数或命令发起时，但在XHR实例被创建之前 类型被设置为ajaxStart的全局回调信息对象 ajaxSend 在XHR实例被创建之后，但在XHR实例被发送给服务器之前 类型被设置为ajaxSend的全局回调信息对象；XHR实例；$.ajax()函数使用的属性 ajaxSuccess 在请求已从服务器返回之后，并且响应包含成功状态码 类型被设置为ajaxSuccess的全局回调信息对象；XHR实例；$.ajax()函数使用的属性 ajaxError 在请求已从服务器返回之后，并且响应包含失败状态码 类型被设置为ajaxError的全局回调信息对象；XHR实例；$.ajax()函数使用的属性；被XHR实例返回的异常对象(如果有的话) ajaxComplete 在请求已从服务器返回之后，并且在任何已声名的ajaxSuccess或ajaxError回调函数已被调用之后 类型被设置为ajaxComplete的全局回调信息对象；XHR实例；$.ajax()函数使用的属性 ajaxStop 在所有其他AJAX处理完成以及任何其他适用的全局回调函数已被调用之后 类型被设置为ajaxStop的全局回调信息对象

jQueryDOM jQuery的遍历：

祖先：

parent() parents() parentsUntil()

后代 :

children()--------- > find()---------

兄弟：

siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()

过滤

eq()

养成一个习惯，如果该jQuery方法可以设置元素值，那么该方法一定可以获取元素值。

DOM元素及属性操作。

1.设置（获取）元素内容。 html() 可以获取该元素的标签和内容 html(text) text(text) 只可以获取该元素的文本内容； text() val(text) val() addClass( )方法 addClass（class） 给元素添加一个class addClass( 'class1 class2 class3' )给元素添加多个class removeClass(class) 给元素删除一个class removeClass('class1 class2 class3')给元素删除多个class toggleClass(class) 如果元素没有当前class那么添加，如果有那么删除

demo: 2.操作元素属性。（获取，设置，修改、删除）

.attr( ) .attr( )的参数有几种设置方法。 1）$('div') .attr('type')获取该属性属性值 2）$('div') .attr('type','value')设置属性值 3)$('div') .attr({ 'data':'value1', 'data2':'value2' }) 设置一组属性值； 4）$('div').removeAttr('title')；

3.操作元素样式

css() 注：css（）方法不仅能获取行内样式，也能获取非行内样式 css() 方法的参数有几种设置方法， css(name) 获取某个元素的行内样式 css('name',value) 设置行内样式 css({ name1:value1, name2:value2 }) 设置多个行内样式 var box=$('div').css(['color','height','width']); //得到多个 CSS 样式的数组对象 for(var i in box){ //逐个遍历出来 alert(i+':' +box[i]); } jquery提供了一个方法$.each()他和for in一样可以遍历对象。 $.each(obj,function(index,value){ }) css方法 width() height() innerWidth() 包含内边距（padding） outerWidth()包含内边距和边框( padding border) offset() 获取某个元素相对于浏览器窗口(可视区域的距离) position()获取某个元素相对于父元素的偏移距离 scrollTop()获取垂直滚动条的值； scrollTop(value)设置垂直滚动条的值; scrollLeft()获取水平滚动条的值； scrollLeft(value)设置水平滚动条的值;

jQuery 节点操作

一．创建节点 为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么 在插入之前首先要做的动作就是：

1.创建节点。

var box=$('<div id="box">节点</div>'); //创建一个节点 $('body').append(box); //将节点插入到<body>元素内部

2.插入节点

append(content) 向指定元素内部后面插入节点 content appendTo(content) 将指定元素移入到指定元素 content 内部后面 prepend(content) 向指定元素 content 内部的前面插入节点 prependTo(content) 将指定元素移入到指定元素 content 内部前面 after(content) 向指定元素的外部后面插入节点 content before(content) 向指定元素的外部前面插入节点 content

3.节点操作

$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中 注：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true 参数的话，这个元素附带的事件处理行为也复制出来。 $('div').remove(); //直接删除 div 元素 $('div').empty(); //删除 div 所有的子元素 remove()方法可以接收一个参数，过滤需要删除的元素。 $('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素

jQuery事件

1.jquery事件绑定；

$('input').bind('click',[data],fn) $('input').bind('click',[1,2,4,5],function(evt) { alert(evt.data) }) 1)同时绑定多个事件，公用一个事件处理函数 $('input').bind('mouseover mouseout',function(){ alert(1) })

2)同时绑定多个事件，并使用不同事件处理函数

$('input').bind({ mouseout:function(){ alert('移出') }, mouseover:function(){ alert('移入') } })

3）同一事件绑定不同事件处理函数；

$('input').bind('click',fn1) $('input').bind('click',fn2) function fn1(){ alert(1) } function fn2(){ alert(2) }

执行顺序为事件绑定的顺序。

2.事件解绑

$('input').unbind() 不传参数的时候默认移除该DOM元素上所有事件。 $('input').unbind('mouseover') 移出该DOM元素上参数（'mouseover'）的事件。

3.jquery事件

jquery的事件就是将JavaScript事件简写（省略了on）,然后在后面加上括号。(注：前缀必须是jQuery对象) document.onclick=function(){ > jQuery 写法> $(document).click(function(){ //事件处理函数 //事件处理函数 } }) 值得注意的是mouseover、mouseout 和 mouseenter、mouseleave 的差别 （mouseover）当事件发生在当前元素外的元素上的时候，会立即触发mouseout； （mouseenter）只要事件还在当前元素内，无论是否移动到子集元素上，都不会触发mouseleave事件 （hover事件）相当于给元素同时绑定了mouseenter 和 mouseleave $('div').hover(fn1,fn2) // 鼠标移入执行fn1， 鼠标移出执行fn2 function fn1(){ alert(1) } function fn2(){ alert(2) }

4.事件对象

JavaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。很烦！但是jQuery已经帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。 event.target 获取绑定事件的DOM元素 event.type 获取事件的类型 event.data 获取事件中传递的数据 event.pageX/pageY 获取根据页面原点的X,Y值 event.screenX/screenY 获取根据显示器窗口的X,Y值 event.offsetX/offsetY 获取根据父元素X,Y值 event.which 获取当前鼠标点击的键1,2,3 event.altKey/shiftKey/ctrlKey/ 返回 true、false

5.事件冒泡（默认事件）

preventDefault() //阻止默认行为 >>>> contextmenu stopPropagation() //取消事件冒泡 return false 阻止默认事件和事件冒泡 双层阻止

6.模拟事件

$('input').trigger('click'); （jquery对象）.trigger方法(事件名)； 模拟用户触发事件：同时触发事件冒泡。 $（'input'）.triggerHandler('click') （jquery对象）.triggerHandler方法(事件名) 模拟用户触发事件：不触发事件冒泡。 计时器自动执行事件时可用

7.事件的命名空间

$（'input'）.bind('click',function(){ alert(1) }) $（'input'）.bind('click.abc',function(){ alert(1) }) 方便模拟事件、解绑事件时选定特定事件。

8、事件委托

什么是事件委托：有 100 个学生同时在某天中午收到快递，但这 100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。 而在 jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素) 上，然后再进行相关处理即可。 传统事件绑定，会让性能变得很低，造成程序中非常多的冗余，事件委托完美解决了这个问题，他只需要给父级元素绑定一个事件，那么他的自己元素全部会在事件流中接受到事件，并对事件处理函数做出相应。 一个新的方法on(on已经全面取代了bind) $('div').on('click','input',function(evt){ // alert(evt.target) $('div').append($('input').eq(0).clone(true)) }) 使用on添加事件 使用off删除on添加的事件 使用on添加的事件存在事件的命名空间，方便删除

传入的第二个参数是为了改变this的指向；

成绩单.html