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 方法可以设置元素某属性值上的动画, 可以设置一个或多个属性值, 动画执行完成后会执行一个函数
- $('#div1').animate({
- width:300,
- height:300
- },1000,swing,function(){
- alert('done!');
- });
参数可以写成数字表达式:
- $('#div1').animate({
- width:'+=100',
- height:300
- },1000,swing,function(){
- alert('done!');
- });
尺寸相关滚动事件
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 获取元素相对页面的绝对位置 : offse()
3 获取可视区高度 : $(window).height();
4 获取页面高度 :
$(document).height();
5 获取页面滚动距离
- $(document).scrollTop();
- $(document).scrollLeft();
6 页面滚动事件
- $(window).scroll(function(){
- ......
- })
简单实例操作
1 层级菜单
2 选项卡
3 置顶菜单
4 滚动到顶部
5 无缝滚动
6 手风琴效果
来源: http://www.jianshu.com/p/fcae514338f1