jQuery基础汇总（三）

动画效果
显示和隐藏效果

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

无动画效果
显示：show()
隐藏：hide()
$(“#panel h5.head”).click(function(){ var $content = $(this).next(“div.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(“div.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：动画执行完毕后的回调函数。
$(“#panel h5.head”).click(function(){ var$content = $(this).next(“div.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：动画执行完毕后的回调函数。
$(“#panel h5.head”).click(function(){ var$content = $(this).next(“div.content”); if($content.is(“:visible”)){
$content.fadeOut(600); }else{$content.fadeIn(600);
}
})
动画切换效果

toggle(duration,complete)：显示或隐藏匹配元素。
duration：一个字符串或者数字决定动画将运行多久。
complete：在动画完成时执行的回调函数。
$(‘#clickme’).click(function() { $(‘#book’).toggle(‘slow’, function() { // Animation complete. }); }); 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
});