不要再问我js和jq中三大家族的区别了~~

最近一些小伙伴纷纷开了个人博客，鄙人也来凑个热闹，简单的记录一些个人学习、工作的心得体会和技术点。进驻掘金的第一篇，献给前端核心元老javascript！ 

                

一提到三大家族，不少小伙伴就头疼，这几天又碰到几个搞不清js和jq中三大家族区别的小伙伴，我只想说，都9102年了，怎么还在研究三大家族，不要再问我他们的区别和联系了。。。开个玩笑，基础毕竟是基础，还是要扎扎实实地掌握的。本文将常用的三大家族方法都列出来，并标出他们的区别和联系，不常用的直接略过。

      废话不多说，直接上代码和结论。

一、JS中的offset家族

J.1 offsetWidth与offsetHeight

这俩获取的是元素的实际宽高 即

width + border + padding复制代码

注意点：

1.可以获取行内及内嵌的宽高

2.获取到的值是一个number类型，不带单位

3.获取的宽高包含border

4.只能读取，不能设置

5.对应jq中outerWidth( )和outerHeight（）不传参时的用法

对应jq中：

Q.1.1 width()/height()方法：获取到的是不带边框以及内边距的宽高 

注意点：

1.获取到的就是内容的宽高,不带px的number类型的值

2.获取时不需要传参

3.传参代表的是设置内容的宽高。强调一下，可以设置！

Q.1.2  innerWidth()/innerHeight()

注意点：

1.获取到的是 内容content+padding的宽高,这是一个number类型的值

2.获取时不需要传参

3.传参代表的是设置内容的宽高，但是注意这里不会改变border的大小

Q.1.3 outerWidth ( true ) / outerHeight ( true ) 

注意点：

1.获取到的是 

width+padding+border+margin 复制代码

的宽高

2.不传参代表的是获取。获取到的是内容+padding+border 的宽高. 此时等于js中的offsetWidth或者offsetHeight

3.传的参数是true，获取到的是内容+padding+border+margin 的宽高

J.2   js中offsetLeft与offsetTop

offsetLeft:获取自己左外边框与offsetParent的左内边框的距离

offsetTop:获取自己上外边框与offsetParent的上内边框的距离

对应jq中：

Q.2.1  position方法

注意点：

1.获取的是元素距离有定位的父元素(offsetParent)的位置 

2.获取到的是一个对象,包含top和left值. 无单位

3.不能进行设置

4.可以分别获取position().left;和position().top;得到两个number类型值

J.3 js中offsetParent

获取最近的定位父元素 （自己定位参照的父元素）

注意点：
1.如果元素自身是固定定位（fixed），则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
3.body的定位父级是null

对应jq中：

Q.3 offsetParent（）

二、JS中的scroll家族 

一、scrollwidth与scrollHeight:

获取元素内容的真实宽高，这里是内容，不包括内边距以及border

1、scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

2、scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

3、scrollTop：onscroll事件发生时，元素向上卷曲出去的距离。常用

4、scrollLeft：onscroll事件发生时，元素向左卷曲出去的距离。常用

简单的封装一段新老浏览器中获取屏幕卷曲距离的兼容代码：

function getScroll() {
  var obj = {
      top:  document.documentElement.scrollTop || window.pageYOffset || 
            document.body.scrollTop || 0, 
      left: document.documentElement.scrollLeft || window.pageXOffset || 
            document.body.scrollLeft      
  };    
  return obj; 
}   
 // 验证：
window.onscroll = function () { 
   console.log(getScroll().top);
 };复制代码

其中window.pageYOffset是目前新式浏览器普遍支持的主流写法。

在9102年，jq都要过时的年代，前端工程师们实在不应该再在以ie6为代表的一些低版本浏览器的兼容性上浪费生命。借用一句话，人生苦短，我用jquery。

jQuery中scrollTop()与scrollLeft()

jQuery中的scrollLeft与scrollTop的方法和原生的js中老版本的一样。

注意点：

1、获取页面被卷曲的高度

$(window).scrollTop();//可以获取和设置复制代码

2、获取页面被卷曲的宽度

 $(window).scrollLeft();//可以获取和设置复制代码

3. 有时候需要给页面设置滚动动画，不可以给window设置，要给html和body设置，例如

$('html,body').animate({scrollTop:0},400)//兼容不同浏览器的写法复制代码

三、JS中的client家族

1、clientWidth/clientHeight：获取可视区域或者元素的width/height+padding。常用。配合resize事件。

2、clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top。

既然为scroll家族封装了兼容代码，不好厚此薄彼，给client家族也封装一套吧：

获取页面可视区域的宽高

getClientSize = function () {
      return {  
          clientWidth : window.innerWidth || document.documentElement.clientWidth ||
                        document.body.clientWidth || 0,  
          clientHeight : window.innerHeight || document.documentElement.clientHeight ||
                         document.body.clientHeight || 0
      }
}
 复制代码

其中新版浏览器获取，常用window.innerWidth

对应jq中：

宽度 (window).innerWidth()

高度(window).innerHeight()

以上。至此，三大家族给了一个简单的总结，写的不对的地方，恳请指出，感谢。