jQuery的BOM

jQuery的BOM

1 原生js的BOM

• client
  • 元素可视宽高：元素.clientWidth/Height content+padding
  • 屏幕的可视宽高：document.documentElement.clientWidth/height
• offset
  • 元素的占位宽高：元素.offsetWidth/Height content+padding+border
  • 元素在页面位置：元素.offseTop/Left 当前元素到定位父元素的位置，没有定位父元素到boby的位置
• scroll
  • onscroll
  • 页面滚动距离：document.documentElement.scrollTop || document.body.scrollTop

2 jQuery的BOM

• 获取元素的宽高

  //元素内容宽高 content
  console.log($("div").width()); //100
  
  //元素可视宽高  content+padding
  console.log($("div").innerWidth()); //120
  
  //元素占位宽高  content+padding+border
  console.log($("div").outerWidth(false)); //140  false:默认，不包含margin
  console.log($("div").outerWidth(true)); //340   true：包含margin
  
  //屏幕宽
  console.log($(window).height());
  //文档宽高
  console.log($(document).height());
  

• 获取元素的位置

  //1.在页面中的位置   当前元素到body
  var offset = $(".inner").offset();
  console.log(offset); //top: 130, left: 118}
  console.log(offset.top);
  
  
  //2.获取定位距离
  var pos = $(".inner").position(); 
  console.log(pos); //{top: 20, left: 0}
  
  //3.滚动距离
  $(window).scroll(function(){
      console.log($(window).scrollTop());
  })