Jquery 使用find（）和end（）函数链接代码是否更好？

假设我的HTML代码如下所示：

<div class="body">
    <div class="head">xxx</div>
    <div class="menu">xxx</div>
    <div class="content">
        <div class="main">xxx</div>
    </div>
</div>

脚本B

$('.body .head').show()
$('.body .menu').show()
$('.body .content .main').show()

---

我已经编写了脚本A和B来显示所有元素，但是哪一个更好，或者每个元素的优点是什么？

这是主观的，我发现

end

可读性较差一些人可能不同意。
没有正确或错误的答案。

我更喜欢缓存样式，因为它更可读，甚至更快

脚本C

var $body = $('.body');
$body.find('.head').show();
$body.find('.menu').show();
$body.find('.content .main').show();

请注意：

$body.find('.head').show();
$body.find('.menu').show();

可缩短为：

$body.find('.head, .menu').show();

end（）方法主要在利用jQuery的链接属性时有用。当不使用链接时，我们通常可以通过变量名调用前面的对象，因此不需要操纵堆栈。但是，使用end（），我们可以将所有方法调用串在一起

---

这里建议通过将

$（'.body'）

的值存储在变量中或使用

.end（）

来缓存该值

此代码还将

'.head'

和

'.menu'

选择器组合在一个

.find（）中：

结果表明，这比方案A慢约5%

当然，您也可以使用本机并直接使用
queryselectoral（）
：

[].forEach.call(document.body.querySelectorAll('.head, .menu, .content .main'), function(node) {
    node.style.display = 'block';
});

这并不适用于所有浏览器，但性能的提高是巨大的

如果
.body
中没有其他元素，我只需调用
.show（）
或
上的
.hide（）

$('.body').show();

或者，如果只有
.body
div的部分子项，则可以只写一行：

$('.body').find('.head,.menu,.content .main').show();

// or provide the second parameter as the context
$('.head,.menu,.content .main', '.body').show();

我知道我们可以在
$（xxx）
中添加更多选择器，但我想知道它们的区别或优点，或者使用
find（）
和
end（）
，谢谢。@CharlesYeung，这是主观的，我发现
end
可读性较差一些人可能不同意。答案没有对与错。@CharlesYeung，这种方法的重点不是组合选择器，而是将初始选择器保存在一个变量中，并根据需要使用该变量。在这一点上，我与gdoron是一致的，我认为用这种方式理解代码要容易得多。@gdoron，一个建议：如果你把
'.head、.menu'
选择器分成两行，可能会有助于说明问题？这将使它在结构上更类似于脚本A和脚本B的方法。所以你的意思是脚本A比脚本B运行得更快？谢谢，我相信我的会是最快的。你能加上它吗？（不知什么原因，我的代理块jsperf）@gdoron我刚做了，速度和我的一样快：）我想
，
选择器没有很好地实现。@杰克，嗯，实际上那些测试不是真正的测试，因为它们不是针对真正的文档HTML结构运行的。+1。很好，看来我们有了一个新的
$('.body').show();

$('.body').find('.head,.menu,.content .main').show();

// or provide the second parameter as the context
$('.head,.menu,.content .main', '.body').show();