children vs selector - jQuery

Question

为了简单起见，我将把问题缩小到下面。 我在click js函数中运行了一个大代码。 表示我已添加alert()

HTML

<ul>
  <li>Test li 1</li>
  <li>Test li 2</li>
  <li>Test li 3</li>
  <li>Test li 4</li>
  <li>Test li 5</li>
</ul>

JS

方法1

$('ul li').click(function(){alert('hi');});

方法2

$('ul').children().click(function(){alert('hi');});

方法1和方法2都工作正常。

哪一个更好？ 使用选择器或使用子方法更好吗？ 当我们可以使用选择器时，有一个子方法的目的是什么？

我只是抓住基础知识，希望不知道某些事情不是犯罪。 谢谢

Answer 1

虽然这两段代码在样本HTML上都能正常工作，但它们并不完全相同。

.children返回所有子元素（无论它们是否为“li”）。

"ul li"作为选择器返回"ul li"所有“li”后代，无论它们是否是孩子。

这两个是等价的，只选择“ul”父级的“li”子元素：

$('ul > li').click(function(){alert('hi');});
$('ul').children("li").click(function(){alert('hi');});

至于哪个更好（原始问题），我怀疑没有真正的答案，并将取决于你的实际要求和HTML（当你问哪个'更好'你是什么意思？表现？可维护性？）。

通常前者会使用浏览器的CSS选择器引擎，你所使用的选择器是支持的，后者总是使用jquery构建的代码（我想）所以在大多数情况下我会选择前者。

Answer 2

至于

哪一个更好？..

更新

实际上，这取决于HTML结构......如果是这样的话，你在ul （第一级）中有少量的<li>用于子项选择器更好

你可以在js.perf ... 链接这里查看

但如果你有大量的<li> （在第一级），子选择器会变慢..