jquery特殊效果 jquery链式调用 jquery动画 尺寸相关、滚动事件

jquery特殊效果

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

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元素

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

尺寸相关、滚动事件

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(){ 

    ...... 

})

实例

1、层级菜单

2、选项卡

3、置顶菜单

4、滚动到顶部

6、手风琴效果

5、无缝滚动