Question

有时可以通过使用分层选择器指定可以找到特定元素的范围，即：

$('#someParent .someChildren')

...或使用上下文，即：

$('.someChildren', $('#someParent'))

我知道有时候人们不能使用前者，所以显然后者很有用。但是在我提出的情况下，哪个更好，为什么？

Answer 1

此：

$('.someChildren', $('#someParent'))

简单地转换成了这个：

$('#someParent').find('.someChildren')

运行一些测试后。所以实际的考虑因素是：

$('#someParent .someChildren')

和

$('#someParent').find('.someChildren')

（考虑到分析和转换的工作）。

那么这两者中的哪一个更快可能会依赖于浏览器。我个人从不使用context参数。

如果你想要.find()，那么我只是直接使用它而不是让jQuery为你翻转它。

当需要将context设置为this的根目录时，人们通常会使用.find()。

$('.someChildren', this)

...所以在这种情况下，执行此操作会更快：

$(this).find('.someChildren')

......在我看来更容易理解。

Answer 2

    // HANDLE: $(expr, $(...))
} else if (!context || context.jquery) {
    return (context || rootjQuery).find(selector);
    // HANDLE: $(expr, context)
    // (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor(context).find(selector);
}

来自source

在这里我们可以看到使用

$("#foo .bar")缩减为$(document).find("#foo .bar")

$(".bar", $("#foo"))缩减为$("#foo").find(".bar")

很难说哪个更有效率。对于那个后代选择器来说，要么嘶嘶声很慢，要么两次调用$(..)要慢一些。这确实需要基准测试。另请注意，$(document)已缓存为rootjQuery

正如@patrick_dw所说，最好直接将它与$("#foo").find(".bar")进行比较。

jQuery中的上下文与选择器特异性

2 个答案: