2

假设我的 HTML 代码如下：

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

脚本 A

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

脚本 B

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

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

4

3 回答 3

3

这是主观的，我发现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()，我们可以将所有方法调用串在一起。

从文档

于 2013-04-16T06:43:05.623 回答
3

如果 里面没有其他元素.body，我会调用.show()or .hide()on .body。

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

或者如果只有部分.bodydiv 的孩子，你可以只写一行：

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

// or provide the second parameter as the context
$('.head,.menu,.content .main', '.body').show();
于 2013-04-16T06:46:50.483 回答
2

建议在此处缓存 的值，$('.body')方法是将其存储在变量中或使用.end().

此代码还将'.head'and'.menu'选择器组合在一个.find():

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

事实证明，这比选项 A 慢约 5%。

当然你也可以原生querySelectorAll()直接使用：

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

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

jsperf 结果

于 2013-04-16T06:44:45.257 回答