操作元素尺寸和入口函数

元素尺寸和入口函数

入口函数

  • 原生的 window.onload,一个页面只能书写一次,后写的会覆盖先写的
  • jQuery 中的入口函数,一个页面可以多次书写,执行顺序按照书写顺序执行
  • 语法1:$(document).ready(function(){
    // 获取元素
    });
  • 语法2:$(function(){
    // 获取元素
    });
  • 注意:
    onl oad 事件,等待所有的页面中的资源(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(数字);
上一篇:偏移量offset


下一篇:0720中午limit和offset