1

为简单起见，我将缩小问题范围，如下所示。我在 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

方法一

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

方法二

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

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

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

测试小提琴

我只是在掌握基础知识，希望不知道某事不是犯罪。谢谢

4

2 回答 2

2

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

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

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

这两个是等效的，并且只选择“ul”父级的“li”子级：

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

至于哪个更好（原始问题），我怀疑没有真正的答案，这将取决于您的实际需求和 html（当您询问哪个“更好”时，您的意思是什么？性能？可维护性？）。

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

于 2013-02-18T09:48:09.503 回答
1

至于

哪一个更好 ？..

更新

实际上，这取决于 HTML 结构...如果以防万一，您在（第一级）中有少量<li>'sul与子选择器一起使用会更好

你可以在 js.perf 中检查这个...链接在这里

but if you have large number of <li> (in first level) the children selector gets slower ..

于 2013-02-18T09:52:15.150 回答