jquery框架的ajax,jQuery框架事件/AJAX

Day3 事件

一、jQuery中事件的添加方式

1、 简单的事件添加方式(必须会)：

1)

格式：jQuery对象.事件名(事件函数)；

2)

注意：如果事件名相同，那么后面的事件不会覆盖前面的事件

2、 bind方式添加事件：该方式添加事件的缺点是后面添加的元素无法使用事件

1)

格式1：jQuery对象.bind(‘事件名’，事件函数);

2)

格式2：jQuery对象.bind(‘事件名1 事件名2…’，事件函数);该方式适用于不同的事件，但是这些事件被触发时要执行的事件函数相同

3)

格式3：

jQuery对象.bind({

事件名1：function(){},

事件名2：function(){}

});

3、 delegate方式添加事件：该方式只支持事件委托

1)

格式：祖先元素.delegate(要拥有事件的后代元素，’事件名’，事件函数);

4、 on方式添加事件(必须会)

1)

给自身绑事件

l

格式1：jQuery对象.on(‘事件名’，事件函数);

l

格式2：jQuery对象.on(‘事件名1 事件名2…’，事件函数);

l

格式：

jQuery对象.on({

事件名1： 事件函数，

事件名2：事件函数

});

2)

采用事件委托方式给后代元素添加事件

l

格式：祖先元素.on(‘事件名’，‘要具有事件的后代元素’，事件函数);

5、 one方式添加事件

1)

作用：该方式只能添加一次性事件，即事件只能被触发一次

2)

格式：jQuery对象.one(‘事件名’，事件函数);

6、 hover方式添加事件

1)

作用：该方式添加的事件，其实就是鼠标移入和移出两种事件的综合

2)

格式：

jQuery对象.hover(

function(){}，

function(){}

);

二、jQuery中如何删除事件

1、 利用unbind方法删除事件(对应bind)

1)

格式1：jQuery对象.unbind();表示删除对象身上所有的事件

2)

格式2：jQuery对象.unbind(‘事件名1 事件名2….’);

2、 利用undelegate方法删除事件(对应delegate)

1)

格式1：祖先元素.undelegate();表示删除后代元素身上所有的事件

2)

格式2：祖先元素.undelegate(‘事件名1 事件名2’);表示删除后代元素身上指定的事件

3、 利用off方法删除事件(对应on)

1)

格式1：jQuery对象.off();表示删除对象身上所有的事件

2)

格式2：jQuery对象.off(‘事件名1 事件名2….’);

三、jQuery中如何触发事件

1、 方式1：通过调用对应的事件函数，格式：jQuery对象.事件名()；

2、 方式2：利用trigger方法触发，格式：jQuery对象.trigger(‘事件名’);

四、jQuery中常用的事件

1、

click：单击时触发该事件

2、

dblclick

：双击时触发该事件

3、

blur：失去焦点时触发该事件

4、

focus

：获取焦点时触发该事件

5、

change：域内的值被改变时触发，如select下拉菜单中的选项被改变时触发

6、

keydown

：键盘上的按键被按下去时触发该事件，支持所有按键

7、

keypress

：键盘上的按键被按下去时触发该事件，不支持功能按键

8、

keyup

：松开键盘上的按键时触发该事件

9、

mousedown

：鼠标被按键被压下去时触发

10、

mouseup：鼠标按键被松开时触发

11、

mouseenter

：鼠标移入某个元素时触发该事件，注意，不管这个元素中是否有子元素，该事件只触发一次

12、

mouseleave

：鼠标移出某个元素时触发该事件。注意，不管这个元素中是否有子元素，该事件只有在鼠标一开设置了该事件的那个元素时触发

13、

mouseover

：鼠标移入某个元素时触发该事件，注意，如果该元素中有子元素，那么在移入到子元素上时也会触发该事件。

1)

mouseover、mouseout和mouseenter、mouseleave的区别：如果元素中包含其它的元素，如div中包含p，那么在使用mouseove时，进入div时会触发一次，进入到它的子元素p时还会触发一次，mouseout也是一样。但是mouseenter和mouseleave只会被触发一次

14、

mouseout

：鼠标从元素身上移出时触发

15、

mousemove

：鼠标在某个元素上方移动时触发该事件

16、

resize

：更改元素尺寸时触发

17、

scroll

：拉动滚动条时触发

18、

select

：文本框、文本域中的内容被选取时触发

19、

submit：在点击提交按钮时触发 ，给form元素添加该事件

20、

unload

：在页面被卸载时触发或者页面发生跳转时触发，Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果

21、

ready：该事件在DOM树渲染完毕后立即执行，不需要等里面的节点加载完成，如不需要等img完全加载完

五、jQuery中如何使用事件对象：在jQuery中事件对象是以形参的形式传递给事件函数，常用属性、方法如下

1、

event.type：此属性可以返回事件的类型

2、

event.pageX：此属性能够返回当前鼠标指针相对于文档的左边缘的位置

3、

event.pageY：此属性能够返回当前鼠标指针相对于文档的上边缘的位置。

4、

event.which：针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮，按键盘按键返回keyCode，按鼠标左键返回1，按鼠标右键返回3，按鼠标中间键返回2

5、

event.result：此属性可以返回与当前事件类型相同事件的前一个处理函数的返回值

6、

event.data：此属性返回传递给当前事件处理函数的额外数据。返回值可以是任意类型的，如果没有传递额外数据，那么返回值是undefined

7、

event.target：此属性用来返回触发事件的DOM元素(点击的是谁)，返回值为DOM对象

8、

event.currentTarget：在事件冒泡阶段中的当前DOM元素(谁身上的事件被触发了)

9、

event.delegateTarget：同上

10、

event.

relatedTarget：在事件中涉及的其它任何DOM元素

1)

对于mouseout 事件，它指向被进入的元素，表示去哪

2)

对于mouseover事件，表示从哪来

11、

event.stopPropagation方法：阻止冒泡

12、

event.isPropagationStopped方法：根据事件对象中是否调用过event.stopPropagation()

方法来返回一个布尔值，如果调用了返回true，否则返回false

13、

preventDefault方法：阻止默认事件行为的触发。

14、

event.isDefaultPrevented方法：根据事件对象中是否调用过event.preventDefault()

方法来返回一个布尔值

六、jQuery中如何使用动画

(一)

jQuery自带的动画

1、

show方法

1)

作用：该方法的作用是是显示jQuery对象

2)

格式：jQuery对象.show(参数1，参数2)；

3)

参数说明

l

参数1：设置动画所需的时间，单位为毫秒，该参数也可以是字符串，如fast(200毫秒)、normal(默认，400毫秒)、slow(600毫秒)，如果是任意的字符串，如‘abc’表示normal

l

参数2：该参数为一个回调函数，当动画执行完毕后执行该回调函数

2、

hide方法：该方法的作用就是隐藏元素，使用格式同上

3、

slideDown方法：向下滑入，用法同上，注意如果slideown没有参数，那么默认为normal

4、

slideUp方法：向上滑出，用法同上，注意如果slideUp没有参数，那么默认为normal

5、

slideToggle方法：以滑动的方式显示隐藏元素，用法同上，注意如果sideToggle没有参数，那么默认为normal

(二)

自定义动画

1、

animate方法

1)

作用：自定义动画效果

2)

格式：jQuery对象.animate(参数1，参数2，参数3，参数4);

3)

参数说明

l

参数1：该参数通常是一个对象，里面一键值对的形式封装了要达到的CSS样式，注意：animate的修改样式时只对属性值中包含数值的样式敏感

l

参数2：动画执行所需时间，单位为毫秒，该参数也可以是字符串，如fast(200毫秒)、normal(默认，400毫秒)、slow(600毫秒)，如果是任意的字符串，如‘abc’表示normal

l

参数3：动画在执行时的状态(即是匀速的，还是慢-快-慢)，只支持两个值linear、swing(默认)

l

参数4：回调函数，动画执行完毕后执行该回调函数

4)

注意事项：animate中不可以直接更改颜色的颜色，如果需要更改颜色，需要使用jquery的插件jquery.color.min.js。插件的使用方式是

l

第一步：先引入jQuery文档

l

第二步：在jQuery文档下面引入jQuery插件

l

第三步：正常在jQuery代码中设置颜色即可

2、

delay方法

1)

作用：延迟动画的执行

2)

格式：jQuery对象.delay(延迟时间).动画函数()；

3、

stop方法

1)

作用：该方法的作用是停止或者清空元素身上的的动画

2)

格式：jQuery对象.stop(参数1，参数2);参数1和参数2的值都是布尔值true、false

4、

finish方法

1)

作用：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

2)

格式：jQuery对象.finish();

3)

说明：该方法的作用就是停止当前正在执行的动画，删除后面所有动画，即后面的所有动画都不在执行。元素停留在最后一个动画完成后的效果

Day4 对象访问、AJAX

一、jQuery中的对象访问

1、

each方法

1)

作用：遍历jQuery对象中的元素

2)

格式：jQuery对象.each(function(index,ele){});注意：index表示元素的下标，ele表示DOM对象

3)

注意：在jQuery中如果是对jQuery对象中的元素进行样式的设置会有“隐式迭代”现象，隐式迭代时，元素的样式会被设置成相同的样式或属性，如果要对元素采用不同的操作，就需要用each

2、

size方法

1)

作用：获取jQuery对象中包含的元素的个数

2)

个数：jQuery对象.size();

3、

length属性

1)

作用：获取jQuery对象中包含的元素的个数

2)

格式：jQuery对象.length;

4、

selector属性

1)

作用：获取选取当前jQuery对象时的选择器

2)

格式：jQuery对象.selector

5、

get方法

1)

作用：该方法的作用是获取jQuery对象中的某个DOM对象

2)

格式：jQuery对象.get(下标);返回值是DOM对象

3)

注意：也可以采用如下格式获取DOM对象：jQuery对象[下标]

6、

index方法

1)

作用：获取某个jQuery对象在jQuery对象集合中的下标

2)

格式：jQuery对象集合.index(jquery对象);

3)

注意：如果有返回对应下标，如果没有返回-1

二、jQuery中如何实现ajax通信

1、

$.get方法

1)

作用：以get方式请求数据

2)

格式：$.get(参数1，参数2，参数3，参数4);

l

参数1：表示请求的文档所在的地址路径

l

参数2：表示向服务器传递的参数，是一个对象

l

参数3：是一个回调函数，该函数有三个形参，分别表示：获取的数据、响应状态码(字符串格式)、通信对象

l

参数4：请求的文件的类型

2、

$.post方法

1)

作用：以post方式请求数据

2)

格式：$.post(参数1，参数2，参数3，参数4);

l

参数1：表示请求的文档所在的地址路径

l

参数2：表示向服务器传递的参数，是一个对象

l

参数3：是一个回调函数，该函数有三个形参，分别表示：获取的数据、响应状态码(字符串格式)、通信对象

l

参数4：请求的文件的类型

3、

$.ajax方法

1)

作用：从服务器请求数据(功能最为强大)

2)

格式1：$.ajax(url, {参数列表});

3)

格式2：$.ajax({参数列表});

4)

参数说明

l

url：请求的文件的地址

l

type：请求类型，值为get或post

l

data：向服务器传递的参数

l

dataType：请求的文件的类型

l

aysn：设置是同步还是异步，属性值为true(异步)、false(同步)

l

success：请求成功是执行的函数，即属性值为函数，该函数有三个形参：请求的数据、响应状态码、通信对象

l

error：请求失败时执行的函数，即属性值为函数，有一个形参，这个形参是通信对象

l

complete：属性值为一个函数，该函数无论请求成功还是失败都会执行

4、

load方法

1)

作用：将一个网页文件中的代码(head下面和body下面的代码)加载到另一个页面中的指定的元素内部

2)

格式：jQuery对象.load(参数1，参数2，参数3);

l

参数1：表示要加载的HTML文件地址

l

参数2：传递的参数，属性值为对象

l

参数3：回调函数，该函数的形参可以获取被加载文件的内部结构，即文件中的所有内容

5、

$.getJSON方法

1)

作用：通过get方式请求服务器上面的json文件

2)

格式：$.getJSON(参数1，参数2，参数3);

l

参数1：表示json文件的地址

l

参数2：向服务器传递的参数

l

参数3：回调函数，里面包含三个形参：请求到的数据、响应状态码、通信对象

3)

注意：该方法支持JSONP(跨域)

6、

$.getScript方法

1)

作用：通过get格式请求服务器上面的js文件，并让该文件执行

2)

格式：$.getScript(参数1，参数2);

l

参数1：js文件的地址

l

参数2：回调函数，该回调函数的形参是被请求下来的JS文件中的代码

三、jQuery插件：所谓jQuery插件是指为了扩展jQuery的功能而提供的代码段或者封装好的js文件。插件的使用方式

1、

第一步：先引入jQuery文档

2、

第二步：引入要使用的jQuery插件

3、

第三步：在自己的HTML文档中补充代码

四、jQuery常用插件——懒加载插件

五、自定义jQuery插件

1、

格式1：$.prototype.方法名 = function(){};

2、

格式2：$.fn.方法名 =

function(){};