-
[제이쿼리] jQuery 직접 선택자(selector)Front/jquery 2020. 3. 21. 12:59
jQuery 직접 선택자(selector)
안녕하세요? 장장스입니다.
제이쿼리(jQuery) 존재의 이유인 선택자(selector)에 대해서 포스팅해보려고 합니다.
자바스크립트 제이쿼리 라이브러리에서는 다양한 선택자를 제공합니다. 선택자의 개념을 간단하게 정리하고, 직접 선택자에 대해 자세히 설명하겠습니다.
선택자란?
선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 '정적이다'라고 표현합니다.
하지만, 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 깊이있게 공부하려면 document 객체 모델에 대해 알아두면 좋습니다.
DOM (문서 객체 모델)
문서 객체 모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말합니다. HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>,<body>가 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html><html5 파일 생성시 head와 bdoy 태그를 확인 할 수 있습니다>
<body>는 또다른 여러 태그를 포함하고 있습니다.
이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며 , 태그에는 기능과 속성이 포함되어 있습니다. 예를들어 <img> 태그는 이미지를 출력하는 기능이 있고 src, alt, width, height와 같은 속성을 포함하고 있습니다.
<body> <img src="js/images/sample_image01" alt="샘플 이미지" width="" height=""> </body>제이쿼리 선택자(기본형)
제이쿼리는 아래 박스와 같은 꼴을 기본으로 합니다.
① 선택한 요소에 지정한 스타일을 적용합니다.$("CSS선택자").css("스타일 속성명", "값");
② 선택한 요소에 지정한 속성을 적용합니다. $("CSS선택자").attr("속성명", "값");여기서 말하는 CSS 선택자는 id, class를 가리키는 말입니다. 아래 코드처럼 사용됩니다.
<script> $(function(){ $("#title").css("color","red"); }); </script>① 아이디 선택자: $("#아이디명")
② 클래스 선택자: $(".클래스명")id에는 '#', class '.' 을 접두어로 붙여 사용합니다.
기본 선택자
<body> 영역에 있는 문서 객체를 선택할 수 있는 선택자입니다. 직접 선택자와 인접 관계 선택자로 나뉩니다.
종류
사용법
설명
전체 선택자
$("*")
모든 요소를 선택합니다.
아이디 선택자
$("#아이디명")
id 속성에 지정한 값을 가진 요소를 선택한다.
클래스 선택자
$(".클래스명")
class 속성에 지정한 값을 가진 요소를 선택한다.
요소 선택자
$("요소명")
지정한 요소명과 일치하는 요소들만 선택한다.
그룹 선택자
$("선택1, 선택2,...")
지정된 요소들을 한 번에 선택한다.
종속 선택자
$("요소.클래스명")
$("요소#아이디명")
요소들중 클래스(아이디)인 요소를 선택한다.
○전체 선택자 $("*")
▼javascript
$(function(){ $("*").css("border", "1px solid blue"); });▼html
<body> <h1>제이쿼리</h1> <h2>선택자</h2> <h3>직접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
○
$(function(){ $("#tlt").css("background-color","#ff0").css("border", "2px solid #f00"); });▼html
<body> <h1>제이쿼리</h1> <h2 id="tlt">선택자</h2> <h3>직접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
○클래스 선택자 $(".클래스명")
▼javascript
$(function(){ $(".tlt").css("background-color","#ff0").css("border", "2px solid #f00"); });▼html
<body> <h1>제이쿼리</h1> <h2 class="tlt">선택자</h2> <h3>직접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
○요소 선택자 $("요소명")
▼javascript
$(function(){ $("h2").css("background-color","#ff0").css("border", "2px solid #f00"); });▼html
<body> <h1>제이쿼리</h1> <h2>선택자</h2> <h3>직접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
○그룹 선택자 $("선택1, 선택2,...")
▼javascript
$(function(){ $("#tlt3, h1").css("background-color","#ff0").css("border", "2px solid #f00"); });▼html
<body> <h1>제이쿼리</h1> <h2 >선택자</h2> <h3 id="tlt3">직접 선택자</h3> <h3>인접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
인접 선택자
○종속 선택자 $("요소.클래스명") / $("요소#아이디명")
▼javascript
$(function(){ $("h1.tit").css("background-color","#ff0").css("border", "2px dashed #f00"); });▼html
<body> <h1 class="tit">제이쿼리</h1> <h2 >선택자</h2> <h3 class="tlt">직접 선택자</h3> </body>▼실행결과
제이쿼리
선택자
직접 선택자
Post
References
잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)
'Front > jquery' 카테고리의 다른 글
[제이쿼리] jQuery 콘텐츠 탐색 선택자(selector) (0) 2020.03.29 [제이쿼리] jQuery 속성 탐색 선택자(selector) (0) 2020.03.27 [제이쿼리] jQuery 위치 탐색 선택자(selector) (0) 2020.03.25 [제이쿼리] jQuery 인접 관계 선택자(selector) (0) 2020.03.23 [제이쿼리] 제이쿼리(jQuery) 라이브러리 설치하기 (0) 2020.03.19