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

最新推荐文章于 2020-07-22 19:25:16 发布

SenZendao

最新推荐文章于 2020-07-22 19:25:16 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/SenZendao/article/details/82694042

前端专栏收录该内容

33 篇文章

订阅专栏

这篇博客继续深入探讨jQuery，重点讲解了jQuery的链式调用、动画效果的实现，以及尺寸相关和滚动事件的处理。文章详细阐述了如何使用animate方法创建动画，并介绍了获取元素尺寸和页面滚动信息的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继续上篇未完成的

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