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> （在第一級），子選擇器會變慢..