언어공부/JavaScript&jQuery

제이쿼리(jQuery) 기초 문법 - 선택자 (1) 기본 선택자 종류

yeony 2021. 7. 31. 22:53

제이쿼리(jQuery) 기초 문법

선택자

선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다. 

 

문서 객체 모델

문서 객체 모델(DOM, Doucument Object Model)이란 HTML 문서 객체 구조를 말한다. 문서 객체 모델(DOM)은 HTML 문서구조를 말한다. HTML문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있다.

 

문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수 있다. 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다.

 

선택자 사용하기

선택자를 사용하기 위해서는 문서 객체를 불러와야 한다. 보통 <body>영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 작성해야 한다.

 

잘못된 예

<head>
<script src="js/jquery.js"></script>
<script>
$("#cont").css("color","red");
</script>
</head>
<body>
<p id="cont">내용</p>
</body>

 

제이쿼리가 먼저 실행되고 그 다음 <body>영역에 문서 객체를 불러온다. 이렇게 되면 <body>가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서 객체를 선택할 수 없다.

 

정상적 예

<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
	("#cont").css("color","red");
});
</script>
</head>
<body>
<p id="cont">내용</p>
</body>

 

<head>
<script src="js/jquery.js"></script>
<script>
$(function(){
	("#cont").css("color","red");
});
</script>
</head>
<body>
<p id="cont">내용</p>
</body>

 

제이쿼리 선택자로 스타일이나 속성을 적용하는 방법은 아래와 같다.

 

<script>
//선택한 요소에 지정한 스타일을 적용
$("CSS 선택자").css("스타일 속성명","값");

//선택한 요소에 지정한 속성을 적용
$("CSS 선택자").attr("속성명","값");
</script>

 

선택자는 $()에 문자형 데이터로 CSS 선택자를 입력하면 된다.

 

기본 선택자

<body>영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다.

 

기본 선택자 종류

구분 종류 사용법 설명
직접 선택자 전체 선택자  $("*") 모든 요소를 선택한다.
아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택한다.
클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택한다.
요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택한다.
그룹 선택자 $("선택 1, 선택 2, .. ") 선택, 선택 2,.. 선택 n에 지정된 요소들을 한 번에 선택한다.
종속 선택자 $("p.txt_1")
$("p#txt_1")		 <p>요소 중 class 값이 txt_1인 요소 또는 id값이 txt_1인 요소를 선택한다.
인접 관계 선택자 부모 요소 선택자 $("요소선택").parent( ) 선택한 요소의 부모 요소를 선택한다.
상위 요소 선택자 $("요소선택").parents( ) 선택한 요소의 상위 요소를 모두 선택한다.
가장 가까운 상위
요소 선택자		 $("요소선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운 
<div>만 선택한다.
하위 요소 선택자 $("요소선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.
자식 요소 선택자 $("요소선택 > 자식 요소")
$("요소선택").children
("자식 요소 선택")
 선택한 요소를 기준으로 자신 관계에 지정한
요소만 선택한다.
자식 요소들 선택자 $("요소선택").children( ) 선택한 요소의 모든 자식 요소를 선택한다.
형(이전) 요소 선택자 $("요소선택").prev( ) 선택한 요소의 바로 이전 요소를 선택한다.
형(이전) 요소들
선택자		 $("요소선택").prevAll( ) 선택한 요소의 이전 요소 모두를 선택한다.
지정 형(이전) 요소
선택자		 $("요소선택").prevUntil
("요소명")		 선택한 요소부터 지정한 요소의 이전 요소까지
모두 선택한다.
동생(다음) 요소
선택자		 $("요소선택").next( )
$("요소선택+다음 요소")		 선택한 요소의 다음 요소를 선택한다.
동생(다음) 요소들
선택자		 $("요소선택").nextAll( ) 선택한 요소의 다음 요소 모두를 선택한다.
지정 동생(다음)
요소들 선택자		 $("요소선택").nextUntil("h2") 선택한 요소부터 지정한 요소의 다음 요소까지
모두 선택한다.
전체 형제 요소
선택자		 $(".box_1").siblings( ) class 값이 box_1인 요소의 형제 요소 전체를
선택한다.
저작자표시 비영리 변경금지