一、动画效果
1、隐藏和显示
1)基本显示、隐藏效果
-show();显示
-hide();隐藏
作用:通过改变元素的宽度和高度来实现显示或隐藏
语法:jq对象.show(执行时间,动画完成后调用的函数)
动画执行时间,可以取值为:slow、normal、fast、毫秒数
2)滑动式动画效果
-slideDown();显示
-slideUp();隐藏
作用:通过改变元素的高度,来实现显示或隐藏的效果
语法:jq对象.slideDown(时间,函数);
3)淡入淡出式动画效果
-fadeIn();淡入
-fadeOut();淡出
作用:通过改变透明度opacity来实现显示或隐藏
语法:jq对象.fadeIn(时间,函数);
2、自定义动画
-animate();动画函数
语法:jq对象.animate({“css样式属性”:“属性值”},执行时间,函数);
那些样式可以使用动画
-取值为尺寸的属性
一、类数组的操作
1、什么是类数组
jQuery对象封装了一个或多个DOM对象,他拥有类似数组的特点,也有用类似数组的一些操作;
2、类数组操作
-length属性:表示封装了几个dom对象
-each(匿名函数);遍历类数组,匿名函数用于处理dom对象,函数中的this表示正在遍历的DOM对象,会随着遍历的进行发生改变,我们可以给函数添加一个形参,表示当前所遍历的dom对象的下标
语法:jq对象.each(function(){
操作;
})
-jq对象.get();得到一个DOM对象组成的数组
-index(jq对象);获取jq对象在类数组中的下标
语法:jq对象.index(jq子对象);
二、使用插件
1、jQuery插件库
https://jqueryui.com/ 2、datepicker(日期选择工具)
1)默认功能
日期选择器一般会绑定在标准的input,type=text元素上,当文本框获取焦点时,会打开一个日历以供选择,点击上面的任何一个日期会关闭日历,且会将选择的日期显示在文本框中
2)基础使用
-首先导入需要的js、css文件
-绑定日历:jq对象.datepicker();
$("#ui-datepicker-div").css(“height”,“800px”);可以调整日历控件的尺寸
3)带动画的
如果需要设置动画,我们要将datepicker的动画属性进行单独设置,语法:
jq对象.dapicker({
showAnim:“动画名”
})
4)显示其他月份的日期
需要单独设置属性:
showOtherMonths:true
设置其他月份的日期可点
selectOtherMonths:true