8

下面我有两个 jQuery 选择器。

首先在缓存对象中搜索 DOM 元素，然后搜索其父级，然后在父级（表）中搜索另一个 dom 元素。（例如 2）

第二行（2 行）通过缓存元素进行搜索。 （例如 1）

    $('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2

    $('element', table.setting.body).on('blur focus', function); // ex 1
    $('another element', table.setting.body).on('click', function); // ex 1

哪一个更快/最佳实践？
前任。1毫无疑问会更快地引用jQuery函数，即。.hide().animate().show()但是，搜索 DOM 元素的时间是什么时候？

在此处输入图像描述

4

3 回答 3

1

在我看来，这不是速度问题，而是可维护性和良好编码风格的问题。

这就是示例 1 比示例 2 好得多的地方。

避免混淆并将事情分开。您想将 2 个事件附加到 2 个不同的元素 - 编写 2 个语句。这使您的代码更具结构化和可读性。

于 2012-09-28T13:56:28.353 回答
0

我看到的唯一区别是在您的第一种方法中使用了父母。jQuery.parents 使用函数目录中的循环查找所需的父级：

parents: function( elem ) {
    return jQuery.dir( elem, "parentNode" );
},

// ...

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

(http://code.jquery.com/jquery-1.8.2.js)

cur = elem[ dir ]意味着elem["parentNode"]并且对所有父母重复，因为直到未定义。如果将想要的父级作为参考，则没有捷径可走。

根据您要查找的第一个元素和文档的根之间的路径长度，第一种方法需要更多的 DOM 操作。

所以我推荐第二种方法。

于 2012-09-28T13:47:50.030 回答
0

看起来您正在尝试匹配来自这些后代的不同后代table.setting.body并对这些后代执行不同的任务，而无需指定table.setting.body两次。

您可以使用end()来实现这一点。例如，如果table.setting.body是一个 jQuery 对象，你可以这样写：

table.setting.body.find("element").on("blur focus", function).end()
                  .find("another element").on("click", function);

（如果table.setting.body是 DOM 元素，则必须先应用$()它）。

上面的代码只对缓存的对象进行一次评估，执行两次调用find()（根据我的经验，比您$()使用context参数调用稍快），两次调用on()（与您的相同）和一次调用end()（仅弹出一个项目）一个堆栈，应该很快）。

于 2012-09-28T14:05:02.353 回答