05. jQuery에서 children() vs find() 차이 정리

📌 jQuery에서 children() vs find() 차이 정리

$(document).ready(function(){
	$('button').click(function(){
			
		/* 자식 접근할 떄 .children함수 */
		$('div').children().css('border-bottom', '3px solid blue')
			
		/* 자손에 접근할 때 find, 자손의 클래스를 넣어야함 */
		$('div').find('.selected').css('color', 'orange')
			
		/* 모든자손 : * 작성 */
		$('div').find('*').css('color', 'orange')
	})
 })

 

 

✅ 정리

• .children() → 직계 자식만 선택
• .find(선택자) → 모든 자손 중에서 특정 요소 선택
• .find('*') → 모든 자손 요소 전부 선택

 

📌 jQuery에서 parent() vs parents() 차이 정리

$(document).ready(function(){
	$('button').click(function(){
		// span의 바로 위 부모에 빨간테두리
		$('span').parent().css('border-bottom', '2px solid red') 
		// 모든 조상 접근하여 폰트 바꿈
		$('span').parents().css('font-style', 'italic') 
	})
})

 

✅ 정리

• .parent() → 직계 부모만 선택
• .parents() → 모든 조상 선택