Question

有没有人知道如何在没有JavaScript库的情况下获得jQuery .offset()和.closest()的等效内容？

对于.closest()，如果我知道爬上DOM树的距离，我可以使用那么多.parentNode s，但如果我不知道要走多远，我就是卡住。

Answer 1

jQuery的核心是javascript。您可以使用此jQuery source viewer来查找任何方法的实现。

例如，以下是closest的实施方式：

closest: function( selectors, context ) {
    var ret = [], i, l, cur = this[0];

    if ( jQuery.isArray( selectors ) ) {
        var match, selector,
            matches = {},
            level = 1;

        if ( cur && selectors.length ) {
            for ( i = 0, l = selectors.length; i < l; i++ ) {
                selector = selectors[i];

                if ( !matches[selector] ) {
                    matches[selector] = jQuery.expr.match.POS.test( selector ) ? 
                        jQuery( selector, context || this.context ) :
                        selector;
                }
            }

            while ( cur && cur.ownerDocument && cur !== context ) {
                for ( selector in matches ) {
                    match = matches[selector];

                    if ( match.jquery ? match.index(cur) > -1 : jQuery(cur).is(match) ) {
                        ret.push({ selector: selector, elem: cur, level: level });
                    }
                }

                cur = cur.parentNode;
                level++;
            }
        }

        return ret;
    }

    var pos = POS.test( selectors ) ? 
        jQuery( selectors, context || this.context ) : null;

    for ( i = 0, l = this.length; i < l; i++ ) {
        cur = this[i];

        while ( cur ) {
            if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
                ret.push( cur );
                break;

            } else {
                cur = cur.parentNode;
                if ( !cur || !cur.ownerDocument || cur === context ) {
                    break;
                }
            }
        }
    }

    ret = ret.length > 1 ? jQuery.unique(ret) : ret;

    return this.pushStack( ret, "closest", selectors );
}

以下是offset：

的实现

jQuery.fn.offset = function( options ) {
    var elem = this[0], box;

    if ( options ) { 
        return this.each(function( i ) {
            jQuery.offset.setOffset( this, options, i );
        });
    }

    if ( !elem || !elem.ownerDocument ) {
        return null;
    }

    if ( elem === elem.ownerDocument.body ) {
        return jQuery.offset.bodyOffset( elem );
    }

    try {
        box = elem.getBoundingClientRect();
    } catch(e) {}

    var doc = elem.ownerDocument,
        docElem = doc.documentElement;

    // Make sure we're not dealing with a disconnected DOM node
    if ( !box || !jQuery.contains( docElem, elem ) ) {
        return box || { top: 0, left: 0 };
    }

    var body = doc.body,
        win = getWindow(doc),
        clientTop  = docElem.clientTop  || body.clientTop  || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        scrollTop  = (win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop ),
        scrollLeft = (win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft),
        top  = box.top  + scrollTop  - clientTop,
        left = box.left + scrollLeft - clientLeft;

    return { top: top, left: left };
};

Answer 2

为什么不使用图书馆？我想可能有一个写自己的理由，但它可能不会像jQuery那样好。

我糟糕的小五分钟偏移量实现如下：

function getOffset(elem) {
    var offset = null;
    if ( elem ) {
        offset = {left: 0, top: 0};
        do {
            offset.top += elem.offsetTop;
            offset.left += elem.offsetLeft;
            elem = elem.offsetParent;
        } while ( elem );
    }
    return offset;
}

Answer 3

走近一棵深的树的最简单的方法，你不知道n是递归，而不是循环。然后再一次走到树上而不知道它的根似乎是一个奇怪的情况，而不是你在走DOM时可能会遇到的情况。

在某些时候你会点击body标签，然后你无处可去，除非你在iframe里面，在这种情况下你想要寻找顶部窗口并找到它的document.body

Answer 4

阅读jQuery的源代码：

对于.closest（），您可以在parentNode上循环，并停止下一个父级等于window的位置。

如何使用vanilla JavaScript获取这些jQuery结果？

4 个答案: