jQuery基础汇总（三）

动画效果
显示和隐藏效果

通过同时改变元素的宽度和高度来实现显示或者隐藏。

无动画效果
显示：show()
隐藏：hide()
(“#panelh5.head”).click(function(){
var$content=$(this).next(“p.content”);
if($content.is(“:visible”)){
$content.hide();
}else{
$content.show();
}
})
有动画效果
显示：show(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。
隐藏：hide(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。(“#panel h5.head”).click(function(){
var content=(this).next(“p.content”);
if(content.is(“:visible”)){content.hide(600);
}else{
$content.show(600);
}
})
滑动式动画效果

通过改变高度来实现显示或者隐藏的效果。

向上滑动：slideUp(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。
向下滑动：slideDown(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。
(“#panelh5.head”).click(function(){
varcontent = (this).next(“p.content”);if(content.is(“:visible”)){
content.slideUp(600);
}else{content.slideDown(600);
}
})
淡入淡出动画效果

通过改变不透明度opacity来实现显示或者隐藏。

淡入效果：fadeIn(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。
淡出效果：fadeOut(speed,callback)
speed：预定义三种速度”slow”、”normal”和”fast”，或自定义时间，单位为毫秒。
callback：动画执行完毕后的回调函数。
(“#panelh5.head”).click(function(){
varcontent = (this).next(“p.content”);if(content.is(“:visible”)){
content.fadeOut(600);
}else{content.fadeIn(600);
}
})
动画切换效果

toggle(duration,complete)：显示或隐藏匹配元素。
duration：一个字符串或者数字决定动画将运行多久。
complete：在动画完成时执行的回调函数。
(‘#clickme’).click(function(){
$(‘#book’).toggle(‘slow’,function(){
//Animationcomplete.
});
});
slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
duration：一个字符串或者数字决定动画将运行多久。
complete：在动画完成时执行的回调函数。(‘#clickme’).click(function() {
$(‘#book’).slideToggle(‘slow’, function() {
// Animation complete.
});
});
自定义动画效果

animate(properties,duration,easing,complete)
properties：一个CSS属性和值的对象,动画将根据这组对象移动。
duration：一个字符串或者数字决定动画将运行多久。
easing：一个字符串，表示过渡使用哪种缓动函数。
complete：在动画完成时执行的回调函数。
(“#panel”).click(function(){
$(this).animate({left:“500px”},3000);
})
aniamte(properties,options)
properties：一个CSS属性和值的对象,动画将根据这组对象移动。
options：一组包含动画选项的值的集合。支持的选项：
duration：一个字符串或者数字决定动画将运行多久。
easing：一个字符串，表示过渡使用哪种缓动函数。
queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
complete：在动画完成时执行的回调函数。(“#panel”).click(function(){
$(this).animate({left: “500px”}, 3000);
})
注意：animate方法不接受以下属性：

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
并发与排队效果

并发效果：指的就是多个动画效果同时执行。
(“#panel”).click(function(){
$(this).animate({left:“500px”,height:”200px”},3000);
})
排队效果：指的就是多个动画按照先后顺序执行。(“#panel”).click(function(){
$(this).animate({left: “500px”}, 3000).animate({height: “200px”}, 3000);
})
类数组操作
类数组对象就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法。

数组与类数组对象的区别

数组的类型是Array
类数组对象的类型是Object
类数组的操作：

length属性：获取指定元素的个数。
eq(index)：将下标等于index的DOM对象取出来。
get(index)：返回一个DOM对象组成的数组。
index（obj）：返回DOM或jQuery对象在类数组中的下标。
遍历方法：
(selector).each(callback)callback：回调函数，function(index,domEle)index：遍历过程中的索引值domEle：遍历后得到的DOM对象(“input”).each(function(index,domEle){
console.log(domEle.value);
});
- .each(obj,callback)?obj：需要遍历的对象或数组。?callback：回调函数，function(index,domEle)?index：遍历过程中的索引值?domEle：遍历后得到的DOM对象.each((“input”),function(index,domEle){
console.log(domEle.value);
console.log((domEle).val());
console.log(this.value);
console.log($(this).val());
});
使用插件
日期插件

layDate日期插件致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。

01_laydate插件的基本使用
layDate API选项：

elem: ‘#id’, //需显示日期的元素选择器
event: ‘click’, //触发事件
format: ‘YYYY-MM-DD hh:mm:ss’, //日期格式
istime: false, //是否开启时间选择
isclear: true, //是否显示清空
istoday: true, //是否显示今天
issure: true, 是否显示确认
festival: true //是否显示节日
min: 1900-01-01 00:00:00, //最小日期
max: 2099-12-31 23:59:59, //最大日期
start: 2014-6-15 23:00:00, //开始日期
fixed: false, //是否固定在可视区域
zIndex: 99999999, //css z-index
choose: function(dates){} //选择好日期的回调
02_laydate插件的高级使用
laydate({
elem : "#mydate",
event : "focus",
istime : true,
isclear : false,
istoday : false,
issure : false
});