기본 선택자
제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 이번 시간부터 선택자에 대해서 낱낱이 파헤쳐보도록 하겠습니다. 오늘은 그 첫번째 시간으로 기본 선택자를 알아볼까요.
1. 기본 선택자
2. 속성 선택자 보러가기
3. 필터 선택자 보러가기
4. 탐색 선택자 보러가기
■ 선택자의 기본 형식
$("선택자")
$("#gnb")
■ 기본 선택자
선택자 종류 | 설명 | |
---|---|---|
태그 선택자 | $("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 요소들을 선택합니다. |
전체 선택자 | $("*") | 모든 요소를 선택합니다. |
■ 예시
코드펜을 이용해서 작업했습니다. CDN방식입니다만, 코드펜으로는 CDN활용법을 확인하긴 힘드니깐 CDN쓰는법만 보여드릴게요.
<script src="jquery-3.6.1.min.js"></script>
728x90
'JQuery' 카테고리의 다른 글
[제이쿼리] 클래스 관련 메서드 (7) | 2022.09.03 |
---|---|
[제이쿼리] 탐색 선택자에 대해 알아보자 (5) | 2022.08.30 |
[제이쿼리] 필터 선택자에 대해 알아보자 (3) | 2022.08.30 |
[제이쿼리] 속성 선택자에 대해 알아보자 (5) | 2022.08.30 |
[자바스크립트 라이브러리] 제이쿼리를 알아보자 (17) | 2022.08.29 |
댓글