jQuery 자식 선택자
이번에는 자식 선택자를 알아보겠다. 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 |
댓글
이 글 공유하기
다른 글
-
필터(FILTER) 3
필터(FILTER) 3
2017.10.03 -
필터(FILTER) 1
필터(FILTER) 1
2017.10.03 -
jQuery 선택자 (selector)
jQuery 선택자 (selector)
2017.09.18 -
jQuery 명칭 충돌 (noConflict)
jQuery 명칭 충돌 (noConflict)
2017.09.18