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()相同

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" }
span.s1 { }

这两个属性通过设置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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #4663cc }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #289c97 }
span.s1 { color: #4f5d66 }
span.s2 { color: #000000 }
span.s3 { color: #060606 }
span.s4 { color: #4a8a01 }
span.s5 { color: #e48b00 }
span.s6 { color: #4663cc }
span.s7 { color: #698906 }
span.s8 { color: #289c97 }
span.Apple-tab-span { white-space: pre }

<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滚动条滚动到浏览器地段和顶端

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #4663cc }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #060606 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #289c97 }
span.s1 { color: #4f5d66 }
span.s2 { color: #000000 }
span.s3 { color: #060606 }
span.s4 { color: #4a8a01 }
span.s5 { color: #e48b00 }
span.s6 { color: #4663cc }
span.s7 { color: #698906 }
span.s8 { color: #ad42ef }
span.s9 { color: #289c97 }
span.Apple-tab-span { white-space: pre }

<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相关的宽高到此结束，虽然整理一些知识点需要花费一些时间和精力，但是在整理的同时也是一个系统学习的过程。所以还是有必要滴??

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" }
span.s1 { }