javascript第十九天jquery事件和Aajax

Jquery的动画和ajax

1. jQuery动画

(1)     预制动画

①    显示隐藏动画

1)       Show

1. 用法：jQuery对象.show(speed, easing, callback)

a)       Speed：动画持续时间

b)       Easing：动画的速度曲线  linear线性（匀速） swing（先慢后快再慢）

c)        Callback：回调函数，当动画执行完毕的时候 如果用户传入了回调函数，就执行

d)       注：出了speed 其他参数 都可以不传

1. 作用：动画显示指定元素

2)       Hide

1. 用法和show完全一样
2. 作用：动画隐藏指定元素

3)       Toggle

1. 用法和show完全一样
2. 作用：给元素添加显示隐藏动画的切换 如果显示 就动画隐藏 如果隐藏 就动画显示

②    淡入淡出动画

1)       fadeIn

1. 用法：jQuery对象.fadeIn(speed, easing, callback)         
2. 作用：给指定的jQuery对象 添加 淡入动画（将透明度从0 变成 1）
3. 注：

a)       如果不传speed默认时间是400ms

b)       Speed 有三个关键字的值 fast(200ms)  normal(400ms)  slow(600ms)

2)       fadeOut

1. 用法同上
2. 作用：淡出

3)       fadeToggle

1. 用法同上
2. 作用：淡入淡出切换

4)       fadeTo

1. 用法：jQuery对象.fadeTo(speed, to, easing, callback)  透明到多少
2. 作用：控制jQuery元素 透明度 动画到 指定值

a)       to就是指定的透明度终点

③    上拉下拉动画

1)       slideUp

1. 用法：jQuery对象.slideUp(speed, easing, callback)
2. 作用：将元素高度动画变为0

2)       slideDown

3)       slideToggle

(2)     自定义动画 animate

①    用法1：jQuery对象.animate(prop, speed, easing, callback);

1)       Prop：{要添加动画的样式属性1：终点值，样式2：终点值........}

2)       Speed：动画时间

②    用法2：jQuery对象.animate(prop,option)

1)       Prop:{要添加动画的样式属性1：终点值，样式2：终点值........}

2)       Option：是一个动画的配置对象

1. {

Duration：动画执行时长，

Easing：速度曲线

Complete：function(){} 动画执行结束的回调函数

Queue：true/false 动画队列

}

3)        

(3)     动画队列

①    当我们给一个元素添加多个动画的时候 这些动画就会按照顺序排成队列，依次执行，这就是动画队列

(4)     停止动画  stop

①    用法：jQuery元素.stop(clearQueue , gotoend)

1)       clearQueue : 清空后续动画队列 是一个布尔值 如果值为true 则表示清空后续动画队列， 值为false 表示 不清空

2)       Gotoend：控制当前动画是否立即执行到终点，布尔值，true表示立即到终点，false表示不到终点。

3)       注：如果不传，默认值为 false

(5)     延迟动画 delay

①    用法：jQuery元素.delay(xxxx)    xxxx是时间，以ms为单位

②    作用：让动画能有一定的延迟时间

(6)     操作动画队列

①    Queue

1)       用法：jQuery对象.queue(function(){要插入动画队列的代码})

2)       如果直接这么插入，就会导致后续代码罢工，因此我们需要安抚后续代码。

3)       写作：jQuery对象.queue(function(形参){要插入的代码;  形参()})  这里形参接收到的函数的作用就是安抚后续代码。

(7)     操作动画队列的属性

①    Queue

②    jQuery元素.animate({样式属性：终点值},{....,queue:true/false})

1)       如果queue属性值为true 表示将当前动画存入动画队列中(true是默认值)， 如果属性值为false 表示当前动画不存入动画队列中

 

1. jQuery的ajax

(1)     jQuery的ajax

①    Ajax

1)       用法：jQuery对象.ajax({

Url:请求数据的地址，

Type:请求的方式 “get” “post”,

Data: 要提交的数据，是一个对象

dataType：数据交互格式 text json xml

Cache：是否启用缓存，布尔值，

timeout：超时时间 数字 以ms为单位，

Async：是否异步 布尔值，

beforeSend：function(){},在请求发送前调用这个回调函数，

Success: function(res){},在请求响应成功之后 调用这个回调函数，res形参                  接收到请求的数据

Error：function(err){},在请求响应失败的时候 调用这个回调函数，err接           收到请求失败的信息

Complete：function(){},在请求和响应结束之后调用

})

2)       在ajax方法中 出了url之外 别的属性都可以不传 有默认值

(2)     jQuery的简化交互方法

①    get方法

1)       用法：jQuery对象.get(url地址，提交数据，function(res){})

2)       res就是响应的数据

3)       注：除了url地址 别的都可以不传

②    Post方法

1)       用法：jQuery对象.post(url地址，提交数据，function(res){})

2)       res就是响应的数据     

3)       注：除了url地址 别的都可以不传

(3)     跨域问题

①    跨域的定义

1)       同源策略：如果两个网页是同源的， 他们就可以互相访问对方的数据，而如果不是同源的就不能访问对方的数据

2)       同源：url地址中 协议 域名 端口号都相同 就是同源

3)       跨域：非同源即跨域

②    跨域获取数据的方法----jsonp

1)       Jsonp和json没有任何关系

2)       Jsonp跨域请求数据 其实是 利用了 src属性 的特性

1. src属性天生就可以进行跨域请求数据

3)       我们一般使用script标签的src属性进行jsonp跨域

4)       Jsonp跨域 只能使用 get请求 不能使用其他方式

③    jQuery的跨域方法

1)       $.ajax({url:xxx , dataType:”jsonp” , success:function(res){}})

(4)     表单内容的序列化

①    serialize：

1)       用法：jQuery表单元素.serialize()

②    serializeArray：

1)       用法：jQuery表单元素.serializeArray()