jquery offsetParent()源码解读
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()源码解读的更多相关文章
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- jQuery toggleClass 源码解读
toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...
- jQuery attr() 源码解读
我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...
- jQuery position() 源码解读
position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, el ...
- jquery.fileupload源码解读笔记
基础编程风格 新建 test.html 和 test.js和 main.js和 无论哪种顺序 <body> <script src="/Sandeep/js/jquery ...
- jQuery.extend()源码解读
// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = funct ...
- jQuery框架源码解读
1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...
- jQuery addClass() 源码解读
addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = ...
- jQuery removeAttr() 源码解读
removeAttr比attr的代码要简单很多~~~ removeAttr: function( name ) { return this.each(function() { jQuery.remov ...
随机推荐
- html5--5-2 绘制直线
html5--5-2 绘制直线 学习要点 如何在HTML5文档中添加canvas元素 canvas的属性 了解canvas坐标系 了解script元素 绘制一条直线(准确的说是线段) 什么是canva ...
- [原创]Java开发在线打开编辑保存Word文件(支持多浏览器)
Java调用PageOffice实现在线编辑保存Word文件(以jsp调用为例,支持SSM.SSH.SpringMVC等流行框架) 1. 下载PageOffice开发包:http://www.zhuo ...
- Linux 修改所属组与所属人
1.chown work /test/* 修改test文件夹下所有文件的所属人(owner)为work 2.chgrp work /test/* 修改test文件夹下所有文件的所属组(group)为w ...
- Python: PS 滤镜-- 极坐标变换到平面坐标
本文用 Python 实现 PS 中的一种滤镜 极坐标变换到平面坐标,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/de ...
- <十四>UML核心视图静态视图之类图和包图
一:类图(行为类和实体类) --->类图用于展示系统中的类及其相互之间的关系 --->概念层类图 --->说明层类图 二:概念层类图 --->概念层的观点认为:在这个层次的 ...
- php之上传图片及传数据到mysql
index.html <form action="php.php" method="post" enctype="multipart/form- ...
- linux网络编程中的超时设置
1 下面是在网上找到的资料,先非常的感谢. 用setsockopt()来控制recv()与send()的超时 在send(),recv()过程中有时由于网络状况等原因,收发不能预期进行,而设置收发超时 ...
- 【eclipse插件开发实战】Eclipse插件开发3——OSGi、RCP
Eclipse插件开发实战3--OSGi.RCP 一.OSGi 1. 什么是OSGi框架 OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环境里的服务 ...
- java集合框架之聚合操作stream
参考http://how2j.cn/k/collection/collection-aggregate/702.html#nowhere 聚合操作 JDK8之后,引入了对集合的聚合操作,可以非常容易的 ...
- XML DOM 笔记
一.概念理解: 关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型 ...