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 ...
随机推荐
- RBAC打造通用web管理权限
https://www.cnblogs.com/lamp01/p/6576432.html https://www.imooc.com/learn/799
- BestCoder3 1001 Task schedule(hdu 4907) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4907 题目意思:给出工作表上的 n 个任务,第 i 个任务需要 ti 这么长的时间(持续时间是ti ~ ...
- codeforces C. Cows and Sequence 解题报告
题目链接:http://codeforces.com/problemset/problem/284/C 题目意思:给出3种操作:t = 1:在前 a 个数中每个数都加上x: t= 2:在数组末尾增加一 ...
- hdu-5754 Life Winner Bo(博弈)
题目链接: Life Winner Bo Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/ ...
- [HNOI 2010] 弹飞绵羊
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...
- 无向图hash
一个效果还行的 无向图hash判同构的方法 求出每个点向其它点的最短路,然后排序,然后按字符串拼接起来,再按每个点的字符串 排序后的rank 作为每一个点的初始hash值 然后每一轮,把每个点的相邻点 ...
- codevs 1046 旅行家的预算
传送门 1046 旅行家的预算 1999年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold题解 题目描述 Des ...
- javascript之创建对象的方式
1.object构造函数创建 var obj=new Object(); obj.name='xue'; 2.对象字面量创建 var obj={ name:'xue' } 3.构造函数创建 funct ...
- netty学习2
一.Netty分层设计 Netty 采用了比较典型的三层网络架构进行设计,逻辑架构图如下所示: #第一层,Reactor 通信调度层,它由一系列辅助类完成,包括 Reactor 线程 NioEvent ...
- bzoj 3745 [Coci2015]Norma——序列分治
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3745 如果分治,就能在本层仅算过 mid 的区间了. 可以从中间到左边地遍历左边,给右边两个 ...