jQuery 선택자
jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.
기본 선택자
| 선택자 종류 | 설명 | ||
|---|---|---|---|
| 태그 선택자 | $("p") | p 요소를 선택합니다. | |
| id 선택자 | $("#gnb") | #gnb 요소를 선택합니다. | |
| class 선택자 | #(".logo") | .logo인 요소를 선택합니다. | |
| 자식 선택자 | $("#gnb > ul > li") | #gnb의 자식 요소의 자식 요소 li를 선택합니다. | |
| 하위 선택자 | $("#gnb ul") | #gnb의 하위에 있는 모든 ul 요소를 선택합니다. | |
| 인접 선택자 | $("#visual + #content") | #visual 다음에 오는 #content요소를 선택합니다. | |
| 형제 선택자 | $("#visual ~ #footer") | #visual의 형제 요소 #footer를 선택합니다. | |
| 종속 선택자 | $("div.util") | div 요소 중 class가 util인 요소를 선택합니다. | |
| 그룹 선택자 | $(".left .right, #banner") | .left, .right, #banner 요소들을 선택합니다. | |
| 전체 선택자 | $("*") | 모든 요소를 선택합니다. | |
예제
상세한 코드는 아래 코드펜을 확인해주세요.