元素尺寸和入口函数
入口函数
- 原生的 window.onload,一个页面只能书写一次,后写的会覆盖先写的
- jQuery 中的入口函数,一个页面可以多次书写,执行顺序按照书写顺序执行
- 语法1:$(document).ready(function(){
// 获取元素
}); - 语法2:$(function(){
// 获取元素
}); - 注意:
onl oad 事件,等待所有的页面中的资源(DOM树、图片、视频、音频等外部资源)加载完毕之后,才会执行
jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行
jQuery 元素的尺寸
通过css()方法获取到的尺寸是字符串格式,使用起来不方便,所以使用特定的操作尺寸的方法,获取到的直接就是数字格式
-
width() 和 height() 方法
操作的大小仅仅是内容部分- 获取: 语法:jQuery 对象.width();
- 设置: 语法:jQuery 对象.width(数字);
-
innerWidth() 和 innerHeight() 方法
操作的大小是内容部分 + padding- 获取: 语法:jQuery 对象.innerWidth();
- 设置: 语法:jQuery 对象.innerWidth(数字);
增加或减少的大小设置给的是width,padding大小不变
-
outerWidth() 和 outerHeight() 方法
操作的大小是内容部分 + padding + border- 获取: 语法:jQuery 对象.outerWidth();
- 设置: 语法:jQuery 对象.outerWidth(数字);
增加或减少的大小设置给的是width,padding和border大小不变
jQuery 元素的位置
-
获取元素距离文档的位置
- 语法:jQuery 对象.offset();
console.log($('div').offset());得到的是一个对象{top: 100, left: 100}
- 返回一个对象,对象中包含了元素的位置,如果想使用需要用对象打点调用
$('div').offset().top;$('div').offset().left;
- 注意:offset() 方法获取的元素的位置,永远参照文档,和定位没有关系
- 语法:jQuery 对象.offset();
-
距离上级定位参考元素的位置
- 语法:jQuery 对象.position();
- 返回的一个对象,对象中包含了元素的位置
- 注意:position() 方法获取的元素的位置,参照最近的定位元素(和定位有关系)
-
操作卷去的页面间距
- 获取语法:jQuery 对象.scrollTop(); 返回数字
- 设置语法:jQuery 对象.scrollTop(数字);