jQuery 1.9.1源代码分析系列(十三)位置和大小操作

让我先向你表示感谢。

Jquery.fn.css (propertyname [，value] | object)(该函数用于设置或返回当前Jquery对象匹配的元素的css样式属性值。如果需要删除指定的css属性，请使用此函数将其值设置为空字符串(“”)。

注：1。如果省略value参数，则表示获取属性值；如果指定了此参数，则意味着设置属性值。2.css()函数的所有“设置”操作都是针对当前jQuery对象匹配的每个元素；所有“读取”操作仅针对第一个匹配元素。)

jquery . fn . offset([坐标obj])(设置或返回当前匹配元素(将内容填充边框作为一个整体)相对于当前文档的偏移量，即相对于当前文档的坐标。此函数仅对可见元素有效。该函数返回一个坐标对象，它有一个左侧属性和一个顶部属性。属性值都是数字，都是像素(px)。与position()不同，offset()返回相对于当前文档的坐标，而position()返回相对于当前文档定位的祖先元素的坐标。)

JQuery.fn.position()(返回当前匹配元素(将内容填充边框边距作为一个整体)相对于其定位的祖先元素的偏移量，即相对于定位的祖先元素的坐标。此函数仅对可见元素有效。所谓的‘定位元素’是指元素的CSS位置属性值是绝对的、相对的或者固定的(只要不是默认的静态)。该函数返回一个坐标对象，该对象有一个左侧属性和一个顶部属性。属性值都是数字，都是像素(px)。有关与失调的差异，请参见失调()。此外，position()函数不能用于设置操作。如果默认情况下当前元素的所有祖先都是静态的，那么该函数返回的偏移位置与offset()函数相同。

jquery . fn . scrolleft([value])(设置或返回当前匹配元素相对于水平滚动条左侧的偏移量。当元素的实际宽度超过其显示区域的宽度时，在某些设置下，浏览器将显示该元素对应的水平滚动条。此时，scrollLeft()返回可见滚动区域左侧元素隐藏部分的宽度(以像素为单位)。

如果水平滚动条在最左侧(即可见区域左侧没有隐藏内容)，或者当前元素不能水平滚动，scrollLeft()将返回0。对可见和隐藏元素都有效。)

JQuery.fn.scrollTop([ value])(设置或返回当前匹配元素相对于垂直滚动条顶部的偏移量。当元素的实际高度超过其显示区域的高度时，在某些设置下，浏览器将显示该元素对应的垂直滚动条。此时，scrollTop()返回可见区域上方元素隐藏部分的高度(以像素为单位)。如果垂直滚动条位于顶部(即可见区域上方没有隐藏内容)，或者当前元素不可垂直滚动，ScrollTop()将返回0。对可见和隐藏元素都有效)

JQuery.fn.height([ value])(设置或返回当前匹配元素的高度。高度值不包括元素的外部边距、内部填充、边框和其他部分的高度。下图

如果您想获得包括上述部分的高度，请使用innerHeight()和outerHeight()。该函数属于jQuery对象(实例)，对不可见元素仍然有效)。

JQuery.fn.innerHeight([ value])(设置或返回当前匹配元素的内部高度。高度值包括填充，但不包括元素的外部边距、边框和其他部分的高度。下图：

该函数属于jQuery对象(实例)，对不可见元素仍然有效)。

Jquery.fn .外部高度([包含边距])(设置或返回当前匹配元素的外部高度。高度值包括填充和边框，但不包括元素外边距部分的高度。您也可以将参数指定为true，以包括边距部分的高度，如下所示：

该函数属于jQuery对象(实例)，对不可见元素仍然有效)。

JQuery.fn.width([ value])(说明：略)

JQuery.fn.innerWidth ([ value])(说明：省略)。

Jquery.fn .外宽([包含边距])(说明：省略)。

一幅绘有孤月蓝风的细节图。

接下来，分析一些函数。

A.jQuery.fn.offset分析。

获取偏移量的方法如下(以top为例):

Offset.top=elem从浏览器窗口顶部开始的elem位置，即文档顶部的卷起部分elem距父元素上边框的高度为top。

jQuery处理变成：

box=elem . getboundingclientrect()；offset . top=box . top(win . pageyoffset | | docelem . scroll top)-(docelem . client top | | 0)；IE8-和IE9等现代浏览器有区别，IE9使用document . document element . getboundingclientect()；E8-的上/左值为-2px；其他现代浏览器的上/左值为0px；可以看出，IE8- browser以窗口的(2，2)坐标为原点坐标。

浏览器将默认主体和窗口之间的间隙为8px，因此使用document . body . getboundingclient()；获取8px的上/左值。

如下设置偏移量(以顶部为例):

请注意，在设置之前，如果当前elem的位置是静态的，则应在处理之前将其设置为相对位置。

首先获取要设置为elem的css特性top的值。计算方法如下：

SetTop=(要设置的偏移顶值当前元素的偏移顶值)元素的css顶特征值。

然后将setTop设置为elem的css顶级功能。

jQuery的处理变成了：

var curElem=jQuery(elem)，curOffset=curElem.offset()，curssTop=jQuery . CSS(elem，' top ')，props={}，curPosition={}，curTop//如果顶值为auto，位置为绝对或固定，则需要计算if(calculate position){ cur position=cure lem . position()；curTop=curPosition.top} else { curTop=parseFloat(curcstop)| |；} if (options.top！=null){ props . top=(options . top-curoffset . top)curTop；} curElem.css(道具)；b.jQuery.fn.position

位置只能获取，不能设置。获取方法如下(以top为例):

Position.top=的偏移量-elem的定位祖先元素的偏移量elem的marginTop值。

这个top真的是top的值，elem的css属性。对jQuery来说，这个elem把宽度填充边框边距看作一个整体，所以最终的顶部是elem的整个距离被确定为祖先元素顶部内边缘的距离。

jQuery的处理变成了：

var offsetParent，offset，parentOffset={ top: 0，left: 0 }，elem=this[0]；//当元素定位为固定时，其定位的祖先元素为window window(parent offset={ top :0，left:0} if (jquery.css (elem，' position '=' fixed '){//假设getboundingclient作为offset=elem.getboundingclient可用，} else {//get offset parent offset parent=this . offset parent()；//获取正确的偏移量偏移量=this . offset()；if(！jquery . nodename(offset parent[0]，' html '){ parent offset=offset parent . offset()；}//添加边框parent offset . top=jquery . CSS(offset parent[0]，' bordertopwidth '，true)；}返回{ top : offset . top-parentoffset . top-jquery . CSS(elem，' marginTop '，true)}；jQuery.fn.offsetParent()函数获取最近的祖先定位元素。

offsetParent:函数(){返回这个。map(function(){ var offset parent=this。偏移父| |文档。文档元素；while (offsetParent(！jQuery.nodeName(offsetParent，' html' ) jQuery.css(offsetParent，' position '=' static '){ offset parent=offset parent。偏移父级；}返回offsetParent | |文档。文档元素；});} c . jquery。fn。偷窃和jQuery.fn.scrollTop

这两个函数的获取和设置滚动条位置比较简单，以scrollTop为获取无非就只有两个函数窗口[页面设置]或elem [scrollTop]。而设置直接使用窗口[滚动至]或滚动顶端

以上内容是小编给大家介绍的关于jQuery 1.9.1源码分析系列（十三)之位置大小操作，希望大家喜欢。