jquery 선택기 :first와 :first-child의 차이점에 대한 간략한 설명

예:

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

first는 첫 번째(모든 상위 요소를 병합한 후)를 의미하며, 첫 번째 하위 요소는 (각 상위 요소)를 의미합니다.

$('ul li:first')는 john이 위치한 li를 반환합니다. 모든 ul

$("ul li:first-child") 아래에서 첫 번째 li 요소를 찾습니다. John Glen을 반환합니다. 각 ul 아래에서 li 요소와 dom 요소인 첫 번째 요소를 찾습니다.

확장 사용법: $("body *:first")는 body 아래의 첫 번째 하위 요소를 나타냅니다. $("body *:first-child")는 body 아래의 각 요소가 첫 번째 하위 요소임을 나타냅니다.

또한 CSS 선택기는 오른쪽에서 왼쪽으로 진행됩니다. 그렇다면 :first-child")는 John만 반환합니다. 각각의 첫 번째 하위 요소를 찾습니다. li 요소인 경우 일치하지 않으면 일치하지 않습니다.

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 
<div>DIV</div>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

$('li:first')는 첫 번째 li 요소와 일치합니다. $("li:first-child")는 첫 번째 하위 요소인 첫 번째 li 요소와 일치합니다. 요소