[jQuery] 제이쿼리, 계층을 이용한 요소 접근1

jQuery에서는 4개의 계층 실렉터를 지원하고 있습니다.

 

다음은 jQuery에서 지원하고 있는 계층 실렉터들입니다.

셀렉터의 종류	셀렉터 표현식
자식(Child) 셀렉터	$(“parent > child”)
하위(Descendant) 셀렉터	$(“ancestor descendant”)
형제(Next Adjacent) 셀렉터	$(“prev + next”)
형제들(Next Siblings) 셀렉터	$(“prev ~ siblings”)

 

---

 

1. 자식(Child) 셀렉터 : $(“parent > child”)

부모 요소 바로 아래 자식 요소를 반환합니다.

jQuery를 적용하기 위한 소스코드

함수 안에 $("ul.name > li").css("border", "1px solid red") 를 작성해 줍니다.

HTML 문서에서 ul 요소 중 'name'이라는 class 명을 가진 요소를 찾고, 그 요소의 자식중에 'li'와 일치하는 요소를 찾아서 jQuery의 css 메소드를 이용해서 테두리 색을 빨간색으로 변경한다는 뜻입니다.

 

jQuery를 적용된 HTML 화면

ul의 class명이 name인 요소들의 자식들인 li요소에만 빨간색 테두리가 생기는 것을 볼수있고, 같은 계층이지만, class명이 달라서 아래의 ul요소의 자식인 li요소는 변경되지 않습니다.

---

 

2. 하위(Descendant) 셀렉터 : $(“ancestor descendant”)

상위의 요소에 포함되는 모든 후손의 요소를 반환합니다.

자식(Child) 셀렉터와 동일한 기능을 제공하지만, 상세한 부분의 차이가 있기 때문에 유의하여 공부하시면 좋을것 같습니다.

jQuery를 적용하기 위한 소스코드

함수 안에 $("ul.name1 > li").css("border", "1px solid red")와 $("ul.name2 li").css("border", "1px solid blue")를 작성해 줍니다.

첫번쨰 jQuery는 자식(Child) 셀렉터입니다. 위의 내용을 숙지하셨다면 자식(Child) 셀럭터는 쉽게 이해하셨을것 같습니다. 두번째 jQuery는 ul요소의 name2라는 class명을 가진 요소를 찾고, 그 하위에 있는 모든 li요소들을 찾아서 jQuery의 css 메소드를 이용해서 테두리 색을 파란으로 변경한다는 뜻입니다.

jQuery를 적용된 HTML 화면

자식(Child) 셀렉터는 ul -> li -> ul -> li 요소는 선택되지 않고 바로 아래에 있는 자식 요소만 선택을 하지만, 하위(Descendant) 셀렉터는 ul요소 아래의 모든 li요소들을 선택해서 적용한다는 점에서 차이가 있습니다.

---

오늘은 jQuery의 계층을 통해서 요소를 선택하는 Child, Descendant 셀렉터에 대해서 정리해보았습니다. 다음 포스팅에 Next Adjacent, Next Siblings 셀렉터에 대해서 정리하도록 하겠습니다.

jQuery를 처음 접하는 분들에게 가장 기본이 되는 부분이기때문에 잘 숙지하여 앞으로 코딩할때 많은 도움이 되셨으면 좋겠습니다.

 

미래의 개발자, 주니어 개발자 여러분들 화이팅입니다.!!

 

2021.11.09 - [jQuery] - [jQuery] 제이쿼리, 계층을 이용한 요소 접근2

[jQuery] 제이쿼리, 계층을 이용한 요소 접근2

↑↑↑↑↑↑↑↑↑↑↑Next Adjacent, Next Siblings 셀렉터에 관련된 내용↑↑↑↑↑↑↑↑↑↑↑