Jquery源码分析－－-DOM元素（中）

核心提示： Jquery针对于offsetParent提供了一个改进的方法，它还是在浏览器的offsetParent基础之上多加了一个判断的处理，Jquery源码分析－－-DOM元素（中）(7)，筛选其有可能会是static的节点，觉得这样做的意义不大，//会重复加上body offset，Mozil

Jquery针对于offsetParent提供了一个改进的方法。它还是在浏览器的offsetParent基础之上多加了一个判断的处理，筛选其有可能会是static的节点。觉得这样做的意义不大。除了table,tr,td之外，浏览器的offsetParent是body的可能性很大。这是一个不确定的。在使用中是要注意的。

//找到this[0]中元素第一个能根据CSS中的top,left能设定位置的父辈节点。
　　offsetParent: function() {
　　　 var offsetParent = this[0].offsetParent || document.body;
　　while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName)
&& jQuery.css(offsetParent, 'position') == 'static') )
　　　 offsetParent = offsetParent.offsetParent;
　　　 return jQuery(offsetParent);
}

其实觉得最好的方法还是直接相对于body的来定位。这样的定位是确定的。但是浏览器在计算这个值会有点问题，而且每种浏览器的实现方式不一样，很难兼容。Jquery提供了一个相对于文档的起始位置的offset方法。

//元素相对于文档的起始位置的offset
jQuery.fn.offset = function() {
　　var left = 0, top = 0, elem = this[0], results;
　　if ( elem ) with ( jQuery.browser ) {
　　　 var parent　　= elem.parentNode,　　offsetChild　= elem,
　　　　 offsetParent = elem.offsetParent,
　　　　doc　　　 = elem.ownerDocument,
　　 safari2　 = safari && parseInt(version) < 522
&& !/adobeair/i.test(userAgent),
　　　 css　　　　　= jQuery.curCSS,
　　　 fixed　　　　= css(elem, "position") == "fixed";
　　
//在IE中有的元素可以通过getBoundingClientRect来获得元素相对于client的rect.
if ( !(mozilla && elem == document.body) && elem.getBoundingClientRect ) {//IE　http://msdn.microsoft.com/en-us/library/ms536433.aspx　　①
　　var box = elem.getBoundingClientRect();
　　// 加上document的scroll的部分尺寸到left,top中。
　　add(box.left + Math.max(
doc.documentElement.scrollLeft, doc.body.scrollLeft),
　　　 box.top　+ Math.max(
doc.documentElement.scrollTop,　doc.body.scrollTop));
　　　　　　//IE中会自动加上2px的border,这里是去掉document的边框大小。
　　　　　 //http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx
　　/The difference between the offsetLeft and clientLeft properties
// is the border of the object
　　add( -doc.documentElement.clientLeft,
-doc.documentElement.clientTop );
　　} else {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ②
//通过遍历当前元素offsetParents来计算其在文档中的位置（相对于文档的起始位置）
　　add( elem.offsetLeft, elem.offsetTop );//初始化元素left,top　　③　　//很多浏览器的offsetParent是直接指向body。不过有的是指向最近的可视的父节点。
　　while ( offsetParent ) { //加上父节点的偏移　　　　　　　　　　　
　　　 add( offsetParent.offsetLeft, offsetParent.offsetTop ); ④　　 // Mozilla系列offsetLet或offsetTop不包含offsetParent的边框。要加上
　　 //但在在table中又会自动加上。
　　　 if ( mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName)
|| safari && !safari2 )
　　　 border( offsetParent );//增加offsetParent的border　　　　　⑤
　　　// 对于CSS设定为fixed相对于client的定位，加上document.scroll.
　　　if ( !fixed && css(offsetParent, "position") == "fixed" )
　　　　　　　　　fixed = true;
　　　//改变子节点变量offsetChild，再改变offsetParent变量的指向。
　　　 offsetChild　= /^body$/i.test(offsetParent.tagName) ?
offsetChild : offsetParent;　　　　　　
　　　　　　offsetParent = offsetParent.offsetParent;
　　　 }
　　// 减去处理每一层不显示的scroll的部分。
　　// 因为一个元素的size(CSS中指定的）是scroll之前的。
　　// 如果scroll，offsetLet或offsetTop会包含这部分被卷起的。　　　　
　　while ( parent && parent.tagName
&& !/^body|html$/i.test(parent.tagName) ) {　　　 ⑥
　　// 如果parent的display的属性不为inline|table，减去它的scroll.　　　　　 if ( !/^inline|table.*$/i.test(css(parent, "display")) )
　　　 // 减去 parent scroll offsets
　　　 add( -parent.scrollLeft, -parent.scrollTop );
　　　 // 如果overflow != "visible.在Mozilla 中就不会加上border.s
　　　 if ( mozilla && css(parent, "overflow") != "visible" )
　　　　　　　border( parent );　　　　　
　　　　　 parent = parent.parentNode;
　　　　　 }
　　//Safari <= 2，在CSS中position为fiexed或者body的position==absolute，
　　//会重复加上body offset。Mozilla在Position！=absolute的时候也会重复
if ( (safari2 && (fixed || css(offsetChild, "position") == "absolute"))
||　(mozilla && css(offsetChild, "position") != "absolute") )
　　add( -doc.body.offsetLeft, -doc.body.offsetTop );　　　　　　　⑦
　　//fixed 加上document scroll。
//因为fixed是scroll的时候也是相对于client不变。所以要加上
　　if ( fixed )　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ⑧
　　add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
　　　 Math.max(doc.documentElement.scrollTop,　doc.body.scrollTop));　}　　　
　　results = { top: top, left: left };
}
function border(elem) {
　　　 add( jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true) );
　　}
function add(l, t) {
　　　 left += parseInt(l, 10) || 0;
　　　 top += parseInt(t, 10) || 0;
　　}
return results;
};