JS和jQuery宽高详解（下篇）
jQuery相关的宽高
和JS相比，jQuery就像亲妈一样，JS就是后妈，哈哈哈哈哈～～～～～～总之，jQuery对很多有关兼容的问题进行封装，只有极少一部分属性需要考虑兼容，用起来非常滴方便～～
与jQuery相关的宽高：
.width()与.height()；
.innerWidth()与 .innerHeight();
.outerWidth() 与.outerHeight();
上边3对是jQuery里宽高相关的属性；下边3对是与宽高相关的属性。
.scrollTop() 与.scrollLeft();
.offset().top 与.offset().left;
.position().top 与position().left;
.width()与.height() 这一对属性如下图，对于window对象和document对象特殊元素只读不能写，而对于普通元素是可以传值也可以是函数。
width()的区别css('width')，前者反回的值是有单位的，而后者返回的值是没有单位的。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.innerWidth()与 .innerHeight(); 这两个属性是包括padding的值；用法和width()相同
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.outerWidth()与 .outerHeight(); 这两个属性包括border和margin的宽度；用法和width()相同
这两个属性通过设置true和false取得element是否包括margin，如果是true则包括margin，如果是false则不包括。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.scrollTop() 与.scrollLeft() 这两个属性和JS里scroll Top与scrollLeft相同都是指滚动条卷起的那部分
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
offset()里.offset().top 与.offset().left;
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.position()里 .position().top 与position().left;
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
jQuery里相关的宽高上边已介绍完毕，下边看一下使用jQuery实现可视区域、滚动条滚动到浏览器地段和顶端
jQuery实现可视区域,实现原理和JS的相同，只是在获取相关的值时有区别,这里只给出jQuery代码，CSS和HTML参考JS
<script>
$(window).scroll(function(){
var ks_arear_H = $(window).height();
var scroll_top = $(window).scrollTop();
var div_top = $('#show_div').offset().top;
//console.log(ks_arear_H);
//console.log(scroll_top);
//console.log(div_top);
if(ks_arear_H+scroll_top <= div_top){
$('#show_div').addClass('fadein_left');
}
});
</script>
jQuery滚动条滚动到浏览器地段和顶端
<script>
$(window).scroll(function(){
var ks_arear = $(window).height();
var scrollTop = $(window).scrollTop();
var wholeHeight = $(document).height();
if(ks_arear+scrollTop >= wholeHeight){
alert('滚动到低部哦～～');
}
if(scrollTop == 0){
alert('滚动到顶部了哦～～～');
}
});
</script>
_____________________________________________________________________________________________
JS和jQuery相关的宽高到此结束，虽然整理一些知识点需要花费一些时间和精力，但是在整理的同时也是一个系统学习的过程。所以还是有必要滴😊
最后的最后便是融汇贯通，常用的获取元素同一宽高，js和jQuery的使用
获取窗口可视区域的高：
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //JS获取窗口可视区域的高
var clientHeight = $(window).height(); //jQuery获取可视区域的高
获取元素（padding＋border）的高：
var elementHeight = elementId.offsetHeight; //JS获取某个元素的高度
var elementHeight = $(elementId).outerHeight(); //jQuery获取某个元素的高度
获取滚动条卷上去的高度：
var scrollHeight = document.body.scrollTop; //JS实现
var scrollHeight =$(window).scrollTop(); // jQuery实现
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
哈哈哈，以后有所感悟到的继续补充～～
