jQuery offset()源码解析
首先是原型上的offset方法,根据arguments判断到底是取值还是设值。如果是设置,就遍历调用静态方法jQuery.offset.setOffset
如果是取值。那么就是从"var docElem,win"这里开始了。
jQuery.fn.offset = function( options ) { if ( arguments.length ) {//设置元素坐标 return options === undefined ?//如果传入的参数是undefined,直接返回 this : this.each(function( i ) {//遍历然后调用jQuery.offset.setOffset jQuery.offset.setOffset( this, options, i ); }); } var docElem, win, elem = this[ 0 ], box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument;//当前文档 if ( !doc ) { return; } docElem = doc.documentElement; // Make sure it‘s not a disconnected DOM node if ( !jQuery.contains( docElem, elem ) ) {//如果元素没有被documentElement包含,就返回 0 0 return box; } // If we don‘t have gBCR, just use 0,0 rather than error // BlackBerry 5, iOS 3 (original iPhone) if ( typeof elem.getBoundingClientRect !== core_strundefined ) {//如果元素有getBoundingClientRect方法 box = elem.getBoundingClientRect();//调用该方法 } win = getWindow( doc );//如果是window就返回window,如果是document,返回document.defaultView return { //元素相对于视窗的距离+滚动距离-边框宽度 top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft }; };
取值中,它考虑了元素没有被documentElement包含的情况,没有渲染,自然是没有offset的,于是它很神奇的返回了{"top":0,"left":0}。
因为看的是jQuery 2.x的版本,这里它用到了getBoundingClientRect方法,从名字就可以看出,它返回的是相对于视窗的距离,这不是我们需要的offset,jQuery.offset返回的是相对于文档的距离,所以还要做进一步的计算:
return { //元素相对于视窗的距离+滚动距离-边框宽度 top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft };
关于getWindow,看看函数声明:
function getWindow( elem ) { return jQuery.isWindow( elem ) ? elem : elem.nodeType === 9 && elem.defaultView; }
如果elem是window,直接返回window,如果是document,则返回document.defaultView。
不是很理解为什么要使用document.defaultView,群里的小伙伴说可能是多frame的情况
然后我在stackoverflow上找到的帖子 http://stackoverflow.com/questions/9183555/whats-the-point-of-document-defaultview 也有类似的答案,然后另一种可能是为了修复Firefox 3.6中getComputedStyle的bug(⊙o⊙)…
接下来是静态方法设置offset。。。
jQuery.offset = { setOffset: function( elem, options, i ) { var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition, position = jQuery.css( elem, "position" ),//获取当前元素的position属性 curElem = jQuery( elem ),//缓存当前元素 props = {}; // Set position first, in-case top/left are set even on static elem if ( position === "static" ) {//如果原元素是静态定位的,改成相对定位 elem.style.position = "relative"; } curOffset = curElem.offset();//获取当前元素的offset curCSSTop = jQuery.css( elem, "top" ); curCSSLeft = jQuery.css( elem, "left" ); //如果元素的position为absolute或者fixed,而且其top和left属性中至少有一项的值是auto,calculatePosition为true calculatePosition = ( position === "absolute" || position === "fixed" ) && ( curCSSTop + curCSSLeft ).indexOf("auto") > -1; // Need to be able to calculate position if either top or left is auto and position is either absolute or fixed if ( calculatePosition ) { curPosition = curElem.position();//获取元素相对于父元素的偏移位置 curTop = curPosition.top; curLeft = curPosition.left; } else {//如果calculatePosition为false,元素相对定位或者原本就有top、left值 curTop = parseFloat( curCSSTop ) || 0; curLeft = parseFloat( curCSSLeft ) || 0; } if ( jQuery.isFunction( options ) ) {//如果options是函数,遍历调用 options = options.call( elem, i, curOffset ); } //计算props值,因为offset是相对文档定位,新的css的top/left值 //需要根据原来的offset和css的top/left值计算 if ( options.top != null ) { props.top = ( options.top - curOffset.top ) + curTop; } if ( options.left != null ) { props.left = ( options.left - curOffset.left ) + curLeft; } //如果有using这个参数,可以调用using方法 if ( "using" in options ) { options.using.call( elem, props ); } else {//如果没有,设置css偏移。 curElem.css( props ); } } };
关于using这个选项,之前在jQuery API中没有看到过。发现隐藏技能了(⊙o⊙)…??
好吧,刚在百度上试了下
$(‘#page‘).offset({"top":1000,"left":100,"using":function(prop){console.log(prop)}}); //Object {top: -302, left: 100}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。