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都工作正常。

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

的 Test Fiddle 的

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

Answer 1

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

.children会返回所有子元素（无论它们是＆＃34; li＆＃34;还是没有）。

"ul li"作为选择器返回所有＆＃34; li＆＃34; ＆＃34; ul＆＃34;的后代他们是否是孩子。

这两个是等效的，只选择＆＃34; li＆＃34; ＆＃34; ul＆＃34;的孩子父：

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

至于哪个更好（原始问题），我怀疑没有真正的答案，这将取决于你的实际要求和HTML（当你要求哪个更好＆＃39;你是什么？意味着什么？性能？可维护性？）。

通常前者会使用浏览器的CSS选择器引擎来支持您使用的选择器，后者将始终使用jquery构建的代码（我认为），所以在大多数情况下我会选择前者。

Answer 2

至于

哪一个更好？..

<强>更新

实际上，它取决于HTML结构...如果包含，<li>（第一级）中ul的数量很少，那么带有子选择器会更好

你可以在js.perf ... link here

中查看

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