前面的话
对于javascript来说，元素尺寸有、、三大属性，以及一个强大的方法。而jQuery有着对应的更为简便的方法。本文将详细介绍jQuery中的元素尺寸和位置操作
尺寸设置
在CSS中，宽高有三种表示，分别是content-box、padding-box和border-box里的三种宽高。可以分别对应于jQuery中height()/width()、innerHeight()/innerWidth()和outerHeight()/outerWidth()
[注意]对于原生javascript来说，offsetWidth类属性无法获取隐藏元的值，而jQuery这三个获取宽高的方法可以
【1】设置宽高
height()/width()
当height()/width()方法中不包含任何参数时，可以获取设置宽高值
css(width)和width()之间的区别在于width()返回一个没有单位的数值(如400)，而css(width)返回带有完整单位的字符串(400px)。当然，高度也类似
测试内容
这个方法同样能计算出window和document的宽高
$(window).width();$(document).width();$(window).height();$(document).height();
测试内容
height(value)/width(value)
当height()/width()方法中包含一个参数时，可以设置宽高值。这个参数可以是一个正整数代表的像素数，或是整数和一个可选的附加单位(默认是px)
测试内容
height(function(index,currentHeight))/width(function(index,currentWidth))
height()/width()方法也可以以一个函数作为参数，该函数接受两个参数，index参数表示元素在集合中的位置，currentHeight/currentWidth参数表示原来的宽高。在这个函数中，this指向元素集合中的当前元素，最终返回设置的宽高
12345
【2】客户区宽高
客户区宽高指设置宽高加上padding值。在javascript中，客户区宽高用clientWidth/clientHeight表示。而在jQuery中，用innerHeight()和innerWidth()方法表示
innerHeight()/innerWidth()
innerHeight()/innerWidth()方法不适用于window和document对象，可以使用height()/width()代替
测试内容
【3】全宽高
全宽高指设置宽高再加上padding、border、margin(可选)
如果获取border-box的宽高，javascript使用offsetwidth/offsetHeight获取。而在jQuery中，有着功能更强大的outerWidth()/outerHeight()方法
outerWidth()/outerHeight()
outerWidth()/outerHeight()方法用来获取元素集合中第一个元素的当前计算宽高值，包括padding，border和选择性的margin。返回一个整数(不包含px)表示的值
当参数为false或无参数时，表示不包括margin，否则包括margin
[注意]如果在一个空集合上调用该方法，则会返回null
outerWidth()/outerHeight()方法不适用于window和document对象，可以使用height()/width()代替
测试内容
位置设置
【1】offsetParent()
jQuery通过offsetParent()找到元素的定位父级
jQuery与javascript有些不同，规则如下
1、当元素本身不是fixed定位，且父级元素存在经过定位的元素，offsetParent()的结果为离自身元素最近的经过定位的父级元素
2、当元素本身具有fixed定位，或父级元素都未经过定位，则offsetParent()的结果为html
3、body元素的offsetParent()的结果也是html
【2】position()
position()方法不接受参数，用来获取匹配元素中第一个元素的相对于定位父级的坐标
position()返回一个包含top和left属性的对象，相当于javascript中的offsetTop和offsetLeft
【3】offset()
offset()
当offset()方法没有参数时，在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档
offset(coordinates)
offset()方法可以接受一个包含top和left属性的对象，用整数指明元素的新顶部和左边坐标
offset(function(index,coords))
offset()方法可以接受一个函数作为参数。在函数中，元素在匹配的元素集合中的索引位置作为第一个参数，当前坐标作为第二个参数。这个函数返回一个包含top和left属性的对象
【4】scrollTop()/scrollLeft()
scrollTop()/scrollLeft()
scrollTop()/scrollLeft()方法不带参数时，用来获取匹配元素集合中第一个元素的当前水平或垂直滚动条位置
内容
scrollLeft(value)/scrollTop(value)
scrollTop()/scrollLeft()方法可以接受一个用来设置滚动条水平或垂直位置的正整数
内容
最后
关于元素的位置和尺寸操作，jQuery把javascript中的scroll、offset、client和getBoundingClientRect()重新整合。对于常用的宽高尺寸设置了width/height、innerWidth/innerHeight、outerWidth/outerHeight这6个方法；而对于位置操作，则设置了position()、offset()/offsetParent()、scrollLeft()/scrollTop()这5个方法
欢迎交流