jquery链式调用,动画,尺寸/滚动事件:(三)

版权声明：一个苦逼初学者的原创小博客。 https://blog.csdn.net/SenZendao/article/details/82694042

继续上篇未完成的

---

8：jquery链式调用
9：jquery动画
10：尺寸相关、滚动事件
11：jquery事件
12：主动触发与自定义事件
13：事件委托
14：事件冒泡
15：jquery元素节点操作
16：滚轮事件与函数节流
17：json
18：ajax与jsonp
19：本地储存
20：jqueryUI

---

目录八

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方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

目录十

尺寸相关、滚动事件

获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

获取元素相对页面的绝对位置

offset()

获取可视区高度

$(window).height();

获取页面高度

$(document).height();

获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

页面滚动事件

$(window).scroll(function(){  
    ......  
})