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相当给力啊,其他的回答明天再看好了,滚回去碎觉。。。)

时间: 2024-09-30 16:40:52

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

jQuery.attr() 源码解读

我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后调用了这个jQuery.attr方法. 所以,关键是看jQuery.attr这里怎么走了~~ 源码如下: attr: function( elem, name, value ) { var hooks, ret, nType = elem.nodeType; //如果elem不存在,或者是文本.注释

jQuery toggleClass 源码解读

toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === "boolean" && type === "string" ) {//如果第二个参数为bool值 return stateVal ? this.addClass( value ) : this.removeClass( value );//如果第二个参为t

jQuery position() 源码解读

position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, elem = this[ 0 ], parentOffset = { top: 0, left: 0 }; // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only

jQuery addClass() 源码解读

addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = typeof value === "string" && value; if ( jQuery.isFunction( value ) ) { return this.each(function( j ) { jQuery( this ).addClass( value.c

jQuery prop() 源码解读

prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeType; // don't get/set properties on text, comment and attribute nodes //标签不存在或者是文本.属性.注释节点 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } notxml =

jQuery.extend()源码解读

// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = function() { /* *target被扩展的对象 *length参数的数量 *deep是否深度操作 */ var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = ar

jQuery源码解读第5章---对Callbacks的解读

jQuery.Callbacks() 是一个多用途的回调函数列表对象 提供了一种强大的方法来管理回调函数队列 先来看看Callbacks的常见的用法 1-------不带参数 先看看不用回调函数的例子 eq function a1(){ console.log('a1') } (function(){ function a2(){ console.log('a2') } })() a1() // a1 a2() //就不行了 这时候我们就可以使用回调函数Callbacks 了 var dfd1

jQuery源码解读第4章---对extend的解读

为什么我们一开始就说extend呢 其实我读源码的过程中,发现其实我们方法就在源码中都调用了extend Callbacks Deferred这些工具方法 所以我们很有必要先学习这些,,,,,,,,,,,这样对我们后续的学习很有帮助 对extend的学习,,,,,首先看下extend我们平时是怎么用的 1...合并对象 extend(dest,src1,src2,,,,,) 它的含义就是将src1,src2......合并到dest中 然后放回的结果就是合并后的dest eq: var dest

vue源码解读预热-0

vueJS的源码解读 vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访问地址为Github 代码整体介绍与函数介绍预览 代码模块分析 代码整体思路 总体的分析 从图片中可以看出的为采用IIFE(Immediately-Invoked Function Expression)立即执行的函数表达式的形式进行的代码的编写 常见的几种插件方式: (function(,){}(,))或(function(,){})(,)或!function(){}()等等,其中必有