-
jQuery 셀렉터(Selector) 예제Web/jQuery 2018. 9. 5. 10:53
자바스크립트에서도 css와 같이 원하는 태그만을 취사선택 해 각기 다른 디자인을 할 수 있다. css 포스팅에서 말했었던 Cascading( > ) , 클래스, id에 대해 각각 다른 디자인을 부여할 수 있다.
다음과 같이 태그, id, class에 대해 $("셀렉터명") 을 통해 접근할 수 있다.
다음 명령어는 destinations 라는 id를 가진 태그의 하위에 있는 모든 li를 가리킨다.
바로 아래 단계의 li 태그들만 탐색하고 싶다면 css와 마찬가지로 '>' 기호를 사용한다.
예제를 통해 확인해보자.
※모든 예제는 아톰(atom)으로 코드 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문)<!DOCTYPE html> <html> <head> <title>jQuery Adventures</title> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".promo").text("Japan"); }); </script> </head> <body> <h1>Where do you want to go?</h1> <h2>Travel Destinations</h2> <p>Plan your next adventures</p> <ul id='destinations'> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li> </ul> </body> </html>"promo" 클래스를 가진 li 태그에만 text Setter 함수를 통해 값을 변경하도록 했다.
기존 Rio에서 Japan으로 수정된 것을 확인할 수 있다.
'Web > jQuery' 카테고리의 다른 글
jQuery 마우스(mouse), 키보드(keyboard) 이벤트 제어 (0) 2018.09.05 jQuery 클릭이벤트 다루기 (this, parent, closest) (0) 2018.09.05 jQuery append, prepend, after, before (0) 2018.09.05 jQuery PSEUDO Classes, Dom Traversing (0) 2018.09.05 jQuery 예제 및 기본 패턴 (0) 2018.09.05
