Unit03： jQuery动画效果、 jQuery类数组操作、使用插件－1

最新推荐文章于 2024-09-25 18:15:20 发布

weixin_30502965

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mbyund/p/6406287.html

版权

【动画效果】
1.显示与隐藏：
改变每个匹配元素的高度、宽度和不透明度。;
- show()
show()
无参版本：没有动画效果，
show(speed, [callback])
有参版本：具有动画效果，
speed：动画时长毫秒，三种预定速度之一的字符串("slow", "normal", or "fast")，
callback :[可选]，在动画完成时执行的函数，每个元素执行一次。

- hide()
同show()；
- toggle(speed, [callback])

2.滑动式动画效果：
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
- slideDown(speed, [callback])
可以不传参，在jquery底层指定了一个默认时长；
高度变化（向下增大）；
- slideUp(speed, [callback])
高度变化（向上增大）；
- slideToggle(speed, [callback])

3.淡入淡出：
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
- fadeIn(speed, [callback])
可以不传参，在jquery底层指定了一个默认时长；
- fadeOut(speed, [callback])
- fadeTo(speed, opacity, [callback])

4.自定义动画
- animate(params, [duration], [easing], [callback])
params: css属性和及其值的集合；
{
width: "90%",
height: "100%"
}
duration：动画执行时长；
easing：要使用的擦除效果的名称(需要插件支持)；
callback：回调函数；

并发效果与排队效果；

- animate(params, options)
params:
options：
duration：动画执行时长；
easing：要使用的擦除效果的名称(需要插件支持)；
callback：回调函数；
queue：false；并发效果；

【类数组操作】
1.jQuery对象是数组对象;
查看jQuery底层代码 - 证明jQuery是数组对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
var init = jQuery.fn.init = function(selector,context){
return jQuery.makeArray( selector, this );
}
var makeArray = function(arr,results){
var ret = [];
return ret;
}
window.jQuery = window.$ = jQuery;

2.属性
length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)
3.方法
get(index) - 根据角标返回DOM对象
eq(index) - 根据角标返回DOM对象
:eq()选择器的作用一致
index(obj) - 根据DOM对象返回对应角标
4.隐式迭代 - jQuery的遍历:在遍历的过程中,只关注入口和出口
var arr = [];// 数组就是入口
for(var i=0;i<arr.length;i++){
var ele = arr[i];// 数组的每个元素就是出口
}
5.显式迭代 - 例如for循环
在遍历的过程中,从开始到结束控制遍历的所有过程
6.jQuery的遍历
- $().each(callback)
对象的方法 jQuery元素集
与页面有关
callback:function(index,domEle){};
- $.each(obj,callback)
全局函数
可以遍历对象和方法