이번에는 자식 선택자를 알아보겠다. css의 선택자와 같은 문법을 사용한다.


간단하게 p > c는 바로 아래의 자식 엘리먼트만 선택하는 것이고,


p c는 모든 후손 엘리먼트를 선택하는 것이다.


예제를 봐야지


 <body> <h2>문단 안에 <a>링크</a> 태그가 있다. 두 번째 <span><a>링크</a></span>는 손자이다.</h2> <script> $('h2'>a).css('border', 'solid'): $('h2 a').css('background', 'blue'); </script> </body>  

실행 시켜 보면 첫번째 링크에는 테두리에 굵은선이 표시되는것을 볼수있다.  

위에 나와있듯이 $('h2 > a') 선택자는 h2의 직접 자식만을 선택하기 때문에 두번째 span에 둘러쌓여져있는 손자 태그는 선택되지 않는다. 
하지만 $('h2 a')는 h2 후손의 모든 a태그에 영향을 주므로 배경색이 변경된다.

두번째 예제

 <body> <p>형제 선택자에 대해 알아 봅시다.</p> <h3>텔레토비 가족을 소개합니다.</h3> <p>보라돌이</p> <p>뚜비</p> <p>나나</p> <p>뽀</p> <script> $('h3 + p').css('font-weight', 'bold'); $('h3 ~ p').css('background', 'yellow'); </script> </body>  

이것또한 실행 시켜보면 보라돌이만 굵은글씨로 나타나게 된다.


$('h3 + p') 선택자는 h3의 바로 다음 형제문단 하나만 선택하게 된다. 

$('h3 ~ p') 선택자는 h3의 모든 문단에게 영향을 준다. 


 이렇게 > , + , ~ 등을 통해서 다양한 자식클래스를 선택해줄수 있다.



'JavaScript > jquery' 카테고리의 다른 글

필터(FILTER) 3  (0) 2017.10.03
필터(FILTER) 1  (0) 2017.10.03
jQuery 선택자 (selector)  (0) 2017.09.18
jQuery 명칭 충돌 (noConflict)  (0) 2017.09.18
jQuery 소개  (0) 2017.09.06