1.jquery特殊效果:
fadeIn() 淡入 fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素 show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开 slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
eg: $btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
2.jquery链式调用:jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
3.jquery动画:通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
4.尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置 offset()
3、获取可视区高度 $(window).height();
4、获取页面高度 $(document).height();
5、获取页面滚动距离 $(document).scrollTop() $(document).scrollLeft();
6、页面滚动事件 $(window).scroll(function(){ ......})
5.实例 1、层级菜单 2、选项卡 3、置顶菜单
4、滚动到顶部 5、手风琴效果 6、无缝滚动