jQuery尺寸与位置操作

jQuery的尺寸与位置操作都是一些方法，那么就一定会有参数，如果括号内有数据，那么修改为括号内的数据，如果括号内没数据，则返回当前的数据（数字型）

width()：取得匹配元素的宽度

height()：取得匹配元素的高度

innerWidth()：取得匹配元素的宽度（包含padding）

innerHeight()：取得匹配元素的高度（包含padding）

outerWidth()：取得匹配元素的宽度（包含padding、border）

outerHeight()：取得匹配元素的高度（包含padding、border）

outerWidth(true)：取得匹配元素的宽度（包含padding、border、margin）

outerHeight(true)：取得匹配元素的高度（包含padding、border、margin）

offset()：距离文档的位置（与父级没有关系），有数值修改，没有数值获取

console.log($("#son").offset())//获得对象
console.log($("#son").offset().top)//获得数值

 

postition()：返回被选元素相对于有定位的父级偏移坐标（父级没定位以文档为准【该方法只能获取不能设置】）

scrollTop()：设置或获取元素被卷曲的头部（可以设置，如果单纯设置为100没有其他操作的话，那么一打开页面该元素就被卷曲了100像素）

scrollLeft()：设置或获取元素被卷曲的左侧

 小例子——返回顶部：

$("div").click(function(){
    $("body,html").stop().animate({
        scrollTop:0
    })
})

这里我们还使用了一个动画方法，可以较为缓慢的返回顶部，而不是一下子就跳到了顶部