JQuery中的动画效果
JQUERY DAY03:
* 动画效果
* 显示与隐藏
* show() - 显示
* 无参版本 - 不具有动画效果
* show(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* hide() - 隐藏
* 无参版本 - 不具有动画效果
* hide(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 滑动效果
* slideUp() - 向上滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* slideDown() - 向下滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* 淡入淡出
* fadeIn() - 淡入
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeOut() - 淡出
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* 参数
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
* fadeTo() - 将当前元素从透明度一个值到另一个值
* 自定义动画
* animate(params,duration,easing,callback)
* params - 设置动画样式(CSS属性)
* duration - 设置动画执行时长,单位为毫秒
* callback - 动画执行完毕后的函数
* animate(params,options)
* 并发与排队效果
* 并发效果 - 多个动画效果同时执行
animate({
attrName1 : attrValue1,
attrName2 : attrValue2,
...
},time);
aniamte({attrName:attrValue},{duration:time})
.aniamte({attrName:attrValue},{
duration : time,
queue : false
});
* 排队效果 - 多个动画效果按照先后顺序执行
animate({attrName:attrValue},time).animate({attrName:attrValue},time).animate({attrName:attrValue},time)...
* 切换动画
* toggle() - show()+hide()
* slideToggle() - slideUp()+slideDown()
* 类(似)数组操作 - 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;
* 属性
* length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)
* 方法
* get(index) - 根据角标返回DOM对象
* eq(index) - 根据角标返回DOM对象
:eq()选择器的作用一致
* index(obj) - 根据DOM对象返回对应角标
* 隐式迭代
* 概念
* 隐式迭代 - jQuery的遍历
* 在遍历的过程中,只关注入口和出口
var arr = [];// 数组就是入口
for(var i=0;i<arr.length;i++){
var ele = arr[i];// 数组的每个元素就是出口
}
* 显式迭代 - 例如for循环
* 在遍历的过程中,从开始到结束控制遍历的所有过程
* jQuery的遍历
* $().each(callback) - 对象方法
* $.each(obj,callback) - 全局函数
* 支持插件
* 作用 - 为了扩展或简化jQuery的开发
* 特点 - 数量多
* 地址 - http://plugins.jquery.com
* 目的
* 掌握jQuery插件的使用方法
* 掌握如何学习jQuery插件的使用
* 日历插件 - My97DatePicker(国产)
* 目录说明
* lang - 存储国际化(i18n)文件
* 本地化(i10n)
* skin - 皮肤(日历控件长什么样子)
* calendar.js - 日期库主文件
* WdatePicker.js - 配置文件
* 如何使用My97日历插件
* 将My97DatePicker文件夹整体拷贝到工程目录中
* 注意 - 不能随意修改My97DatePicker目录中任何内容
* 使用My97日历插件的步骤
* 拷贝My97DatePicker文件夹
* 在HTML页面引入文件
* 引入jQuery文件
* 引入插件文件
* 在HTML页面定义容器(元素)
* 作用 - 用于在页面中显示的效果
* 在javascript代码使用插件提供的API方法
* 表单验证插件
*
* 扩展内容
* Web前端
* 页面设计师 - UI设计师
* Web前端 - 逻辑(页面特效)
* this的用法
* 在具有上下文环境中使用this
* this指代上下文环境
* 在javascript创建构造器时使用this
* this指代new之后的对象
* 在jQuery中的隐式迭代中使用this
* this指代DOM对象(页面元素)
* 注意
* this的用法是javascript整个内容中最难的部分
* 建议
* 会就用,不会就别用
*
