선택자는 HTML요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)은' 정적이다' 라고 표현합니다. 하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 정확하고 깊이 있게 공부하려면 문서 객체 모델에 대해 알아두는 것이 좋습니다
문서 객체 모델
문서 객체 모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말합니다. HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있습니다. <body> 태그는 문단태그, 테이블태그, 폼태그 등을 포함할 수 있습니다. 이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있습니다. 예를 들어<img>태그는 이미지를 출력하는 기능이 있고 src, alt, width, height와 같은 속성을 포함하고 있습니다.
직접 선택자
직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자 입니다. 직접 선택자의 종류로는 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있습니다.
전체 선택자
전체 요소를 선택할 때 사용합니다. 즉, 현재 HTML의 모든 태그를 선택합니다.
기본형)
$("*")
아이디 선택자
아이디 선택자는 아이디 속성에 지정한 값을 포함하는 요소를 선택합니다.
기본형)
$("#아이디명")
클래스 선택자
클래스 선택자는 클래스 속성에 지정한 값을 포함하는 요소를 선택합니다.
기본형)
$(".클래스명")
요소명 선택자
지정한 요소명(Tag Name)과 일치하는 요소를 모두 선택합니다.
기본형)
$("요소명")
그룹 선택자
그룹 선택자는 한 번에 여러 개의 요소를 선택할 때 사용합니다.
기본형)
$("요소 선택 1, 요소 선택 2, 요소 선택 3, ... 요소 선택 n");
종속 선택자
종속 선택자는 선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용합니다.
기본형)
$("요소명#id 값")
$("요소명.class 값")
인접 관계 선택자
인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용합니다. 인접 관계 선택자를 자유자재로 사용하려면 문서 객체 구조와 관계를 잘 이해하고 있어야 합니다. 아래를 보며 알아봅시다.
제이쿼리 전체/아이디/클래스/그룹/종속 선택자에 대해 알아보았습니다.
'[Javascript] 자바스크립트' 카테고리의 다른 글
| [Javascript] 자바스크립트 제이쿼리 위치 탐색 선택 (0) | 2024.12.13 |
|---|---|
| [Javascript] 자바스크립트 제이쿼리 부모선택자, 자식선택자, 인접요소선택자 (0) | 2024.12.12 |
| [Javascript] 자바스크립트 제이쿼리 기본 선택자 종류 (2) | 2024.12.09 |
| [Javascript] 자바스크립트 제이쿼리 라이브러리 연동하기 (5) | 2024.11.15 |
| [Javascript] 자바스크립트 프로토타입, 내장함수 사용법 (0) | 2024.11.14 |