WEB开发网
开发学院网页设计JavaScript Jquery源码分析---DOM元素(中) 阅读

Jquery源码分析---DOM元素(中)

 2010-09-14 13:36:33 来源:WEB开发网   
核心提示: 上面的代码①采用IE内部提供了特有的方法来找到相对body的Offset,这样做肯定是提高在IE中效率,Jquery源码分析---DOM元素(中)(8),②③④⑤⑥⑦⑧处是采用通用的处理方法来计算,对于一个元素的offset,加上其所有offsetParent的offset和border,

上面的代码①采用IE内部提供了特有的方法来找到相对body的Offset。这样做肯定是提高在IE中效率。②③④⑤⑥⑦⑧处是采用通用的处理方法来计算。对于一个元素的offset,加上其所有offsetParent的offset和border。这样就能计算出相对于body的offset。但是这样在scroll的情况下是行不通的。因为有scroll的卷起来的部分也被计算了进去,对于每个元素都要减去这一部分的大小。

⑧处我们可以看出如果有元素是fixed的position。说明其会随着documentElement.scroll而改变位置。因此加上documentElement.scroll。得出其正确的位置。

Jquery中的position方法是计算当前元素相对于其offsetParent的offset值。与dom元素的offset不一样的地方,它是建立在jquery.offset的基础之上,同时还不包括其自身的margin。对于box的模式来讲,是margin是元素的最外边,而不是border。

jQuery.fn.extend({position: function() {
  var left = 0, top = 0, results;
  if ( this[0] ) {  
    var offsetParent = this.offsetParent(),// Get *real* offsetParent
     offset  = this.offset(),// Get correct offsets
    parentOffset = /^body|html$/i.test(offsetParent[0].tagName)
? { top: 0, left: 0 } : offsetParent.offset();
      offset.top -= num( this, 'marginTop' );
      offset.left -= num( this, 'marginLeft' );
      parentOffset.top += num( offsetParent, 'borderTopWidth' );
      parentOffset.left += num( offsetParent, 'borderLeftWidth' );
      results = {
       top: offset.top - parentOffset.top,
       left: offset.left - parentOffset.left
      };
    }
    return results;
  },

上一页  3 4 5 6 7 8 9 10  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接