728x90
jQuery 선택자
jQuery 선택자는 CSS 선택자와 의미가 같은 것이 많습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.
01. jQuery 선택자 형식
$("선택자")
$("#gnb")
02. 기본 선택자 종류
| 선택자 종류 | 설명 | |
|---|---|---|
| 태그 선택자 | $("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 요소들을 선택합니다. |
| 전체 선택자 | $("*") | 모든 요소를 선택합니다. |
03. 기본 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").css("border", "4px solid red");
$("#gnb").css("border", "4px solid orange");
$(".logo").css("border", "4px solid yellow");
$("#gnb > ul > li").css("border", "4px solid green");
$("#gnb ul").css("border", "4px solid blue");
$("#visual + #content").css("border", "4px solid navy");
$("#visual ~ #footer").css("border", "4px solid purple");
$("div.util").css("border", "4px solid pink");
$(".left, .right, #banner").css("border", "4px solid gray");
});
</script>
728x90
반응형
'jQuery' 카테고리의 다른 글
| [jQuery]클래스 관련 메서드 (1) | 2022.09.02 |
|---|---|
| [jQuery]탐색 선택자 (3) | 2022.08.30 |
| [jQuery]필터 선택자 (2) | 2022.08.30 |
| [jQuery]속성 선택자 (3) | 2022.08.30 |
| [jQuery]소개 (5) | 2022.08.29 |
댓글