最近一些小夥伴紛紛開了個人部落格，鄙人也來湊個熱鬧，簡單的記錄一些個人學習、工作的心得體會和技術點。進駐掘金的第一篇，獻給前端核心元老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);
};複製程式碼在9102年，jq都要過時的年代，前端工程師們實在不應該再在以ie6為代表的一些低版本瀏覽器的相容性上浪費生命。借用一句話，人生苦短，我用jquery。
jQuery中scrollTop()與scrollLeft()
jQuery中的scrollLeft與scrollTop的方法和原生的js中老版本的一樣。
注意點：
1、獲取頁面被捲曲的高度
$(window).scrollTop();//可以獲取和設定複製程式碼
2、獲取頁面被捲曲的寬度
$(window).scrollLeft();//可以獲取和設定複製程式碼三、JS中的client家族
1、clientWidth/clientHeight：獲取可視區域的寬高。常用。配合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.innweWidth
對應jq中：
寬度 (window).width()
高度(window).height()
以上。至此，三大家族給了一個簡單的總結，寫的不對的地方，懇請指出，感謝。