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. html5--5-2 绘制直线

    html5--5-2 绘制直线 学习要点 如何在HTML5文档中添加canvas元素 canvas的属性 了解canvas坐标系 了解script元素 绘制一条直线(准确的说是线段) 什么是canva ...

  2. [原创]Java开发在线打开编辑保存Word文件(支持多浏览器)

    Java调用PageOffice实现在线编辑保存Word文件(以jsp调用为例,支持SSM.SSH.SpringMVC等流行框架) 1. 下载PageOffice开发包:http://www.zhuo ...

  3. Linux 修改所属组与所属人

    1.chown work /test/* 修改test文件夹下所有文件的所属人(owner)为work 2.chgrp work /test/* 修改test文件夹下所有文件的所属组(group)为w ...

  4. Python: PS 滤镜-- 极坐标变换到平面坐标

    本文用 Python 实现 PS 中的一种滤镜 极坐标变换到平面坐标,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/de ...

  5. <十四>UML核心视图静态视图之类图和包图

    一:类图(行为类和实体类) --->类图用于展示系统中的类及其相互之间的关系 --->概念层类图 --->说明层类图   二:概念层类图 --->概念层的观点认为:在这个层次的 ...

  6. php之上传图片及传数据到mysql

    index.html <form action="php.php" method="post" enctype="multipart/form- ...

  7. linux网络编程中的超时设置

    1 下面是在网上找到的资料,先非常的感谢. 用setsockopt()来控制recv()与send()的超时 在send(),recv()过程中有时由于网络状况等原因,收发不能预期进行,而设置收发超时 ...

  8. 【eclipse插件开发实战】Eclipse插件开发3——OSGi、RCP

    Eclipse插件开发实战3--OSGi.RCP 一.OSGi 1. 什么是OSGi框架 OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环境里的服务 ...

  9. java集合框架之聚合操作stream

    参考http://how2j.cn/k/collection/collection-aggregate/702.html#nowhere 聚合操作 JDK8之后,引入了对集合的聚合操作,可以非常容易的 ...

  10. XML DOM 笔记

    一.概念理解: 关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型 ...