操作元素尺寸和入口函数

元素尺寸和入口函数

入口函数

• 原生的 window.onload，一个页面只能书写一次，后写的会覆盖先写的
• jQuery 中的入口函数，一个页面可以多次书写，执行顺序按照书写顺序执行
• 语法1：$(document).ready(function(){
  // 获取元素
  });
• 语法2：$(function(){
  // 获取元素
  });
• 注意：
  onload 事件，等待所有的页面中的资源（DOM树、图片、视频、音频等外部资源）加载完毕之后，才会执行
  jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行

jQuery 元素的尺寸

通过css()方法获取到的尺寸是字符串格式，使用起来不方便，所以使用特定的操作尺寸的方法，获取到的直接就是数字格式

1. width() 和 height() 方法
   操作的大小仅仅是内容部分

   • 获取： 语法：jQuery 对象.width();
   • 设置： 语法：jQuery 对象.width(数字);

2. innerWidth() 和 innerHeight() 方法
   操作的大小是内容部分 + padding

   • 获取： 语法：jQuery 对象.innerWidth();
   • 设置： 语法：jQuery 对象.innerWidth(数字);
     增加或减少的大小设置给的是width，padding大小不变

3. outerWidth() 和 outerHeight() 方法
   操作的大小是内容部分 + padding + border

   • 获取： 语法：jQuery 对象.outerWidth();
   • 设置： 语法：jQuery 对象.outerWidth(数字);
     增加或减少的大小设置给的是width，padding和border大小不变

jQuery 元素的位置

1. 获取元素距离文档的位置

   • 语法：jQuery 对象.offset();
     console.log($('div').offset());得到的是一个对象{top: 100, left: 100}
   • 返回一个对象，对象中包含了元素的位置，如果想使用需要用对象打点调用
     $('div').offset().top;$('div').offset().left;
   • 注意：offset() 方法获取的元素的位置，永远参照文档,和定位没有关系

2. 距离上级定位参考元素的位置

   • 语法：jQuery 对象.position();
   • 返回的一个对象，对象中包含了元素的位置
   • 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）

3. 操作卷去的页面间距

   • 获取语法：jQuery 对象.scrollTop(); 返回数字
   • 设置语法：jQuery 对象.scrollTop(数字);