offsetParent: function() {
return this.map(function() {
var offsetParent = this.offsetParent || docElem; while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
offsetParent = offsetParent.offsetParent;
} return offsetParent || docElem;
});
}

代码比较简单,首先它return this.map(function(){}) 所以返回的是一个数组。。。

获取当前元素的offsetParent,如果没有的话就是documentElement

jQuery.nodeName("offsetParent","html")是为了判断当前的offsetParent是否是html,然后jQuery.css( offsetParent, "position") === "static" ) 判断offsetParent是否是static...

但是问题来了,什么时候while为true呢?

( !jQuery.nodeName( offsetParent, "html" )排除了html,但是还有一个body我们不能忽略。

然后我发现。。
console.log(document.getElementById('div').offsetParent);
console.log($('#div').offsetParent());

原生返回body而jQuery返回html

原因,刚在stackoverflow上问了一下,确实,不管jquery返回html或者body都不重要,反正都是说明当前元素没有一个有定位的祖先元素,而jquery返回html的原因,可能就是想做一下标准化吧。。

(PS~stackoverflow相当给力啊,其他的回答明天再看好了,滚回去碎觉。。。)

jquery offsetParent()源码解读的更多相关文章

  1. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  2. jQuery toggleClass 源码解读

    toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...

  3. jQuery attr() 源码解读

    我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...

  4. jQuery position() 源码解读

    position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, el ...

  5. jquery.fileupload源码解读笔记

    基础编程风格 新建 test.html  和 test.js和 main.js和 无论哪种顺序 <body> <script src="/Sandeep/js/jquery ...

  6. jQuery.extend()源码解读

    // extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = funct ...

  7. jQuery框架源码解读

    1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...

  8. jQuery addClass() 源码解读

    addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = ...

  9. jQuery removeAttr() 源码解读

    removeAttr比attr的代码要简单很多~~~ removeAttr: function( name ) { return this.each(function() { jQuery.remov ...

随机推荐

  1. RBAC打造通用web管理权限

    https://www.cnblogs.com/lamp01/p/6576432.html https://www.imooc.com/learn/799

  2. BestCoder3 1001 Task schedule(hdu 4907) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4907 题目意思:给出工作表上的 n 个任务,第 i 个任务需要 ti 这么长的时间(持续时间是ti ~ ...

  3. codeforces C. Cows and Sequence 解题报告

    题目链接:http://codeforces.com/problemset/problem/284/C 题目意思:给出3种操作:t = 1:在前 a 个数中每个数都加上x: t= 2:在数组末尾增加一 ...

  4. hdu-5754 Life Winner Bo(博弈)

    题目链接: Life Winner Bo Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 131072/131072 K (Java/ ...

  5. [HNOI 2010] 弹飞绵羊

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  6. 无向图hash

    一个效果还行的 无向图hash判同构的方法 求出每个点向其它点的最短路,然后排序,然后按字符串拼接起来,再按每个点的字符串 排序后的rank 作为每一个点的初始hash值 然后每一轮,把每个点的相邻点 ...

  7. codevs 1046 旅行家的预算

    传送门 1046 旅行家的预算 1999年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold题解   题目描述 Des ...

  8. javascript之创建对象的方式

    1.object构造函数创建 var obj=new Object(); obj.name='xue'; 2.对象字面量创建 var obj={ name:'xue' } 3.构造函数创建 funct ...

  9. netty学习2

    一.Netty分层设计 Netty 采用了比较典型的三层网络架构进行设计,逻辑架构图如下所示: #第一层,Reactor 通信调度层,它由一系列辅助类完成,包括 Reactor 线程 NioEvent ...

  10. bzoj 3745 [Coci2015]Norma——序列分治

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3745 如果分治,就能在本层仅算过 mid 的区间了. 可以从中间到左边地遍历左边,给右边两个 ...