2016.12.12 Jquery

元素的尺寸

• width() height()
• innerWidth() innerHeight()
• outerWidth() outerHeight()
• 参数的作用(设置宽高)
• 与原生JS的区别

参数的作用(设置宽高)

<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
$('#div1').width(200);// width = 200
$('#div1').innerWidth(200);//width: 200 - padding
$('#div1').outerWidth(200);//width: 200 - padding - border
$('#div').outerWidth(200, true);//width: 200 - padding -border - margin
</script>

实际都是改变的是width值

与原生JS的区别

<div id="div1" style="width: 100px;"></div>
<script>

var oDiv = document.getElementById('div1');
alert(oDiv.offsetWidth);//100
</script>

当我们隐藏div之后(display: none) 我们就不能获取到div的值了

JQ实战小技巧

• 可视区的尺寸(可以理解为窗口的尺寸)
• 页面的尺寸(可以理解为文档的尺寸)

$(window).width();//可视区的尺寸
$(document).width();//页面的尺寸

滚动距离

• scrollTop()
• scrollLeft()
  一个公式 当滚动到底部的时候 滚动距离 + 可视区高度 = 页面的高度

$(document).scrollTop()+$(window).height() === $(document).height();//true
##元素距离

## offset()

元素相对于整个页面的距离

返回一个对象包含left和top属性
## position()

相对与最近的父级定位元素的距离


注意:  position() 是计算的margin的顶点到父级定位元素的距离, 其他跟位置相关的函数或属性都是以border的顶点为参考点