선택자
선택자는 HTML 요소를 선택하여 가져온다.
제이쿼리 선택자는 CSS선택자와 마찬기지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다.
이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한
스타일(CSS)은 '정적이다'라고 표현한다.
하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다.
선택자를 좀 더 정확하고 깊이 있게 공부하려면 문서 객체 모델에 대해 알아 두는 것이 좋다.
문서객체 모델
문서객체모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말한다.
HTML문서의 기본 객체 구존느 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있다.
<body>태그는 문단태그, 테이블태그, 폼태그 등을 포함할 수 있다.
문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다.
다음 HTML의 문서 객체 구조를 살펴 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1>선호하는 음식</h1>
<section id="food_1">
<h2>한식</h2>
<ul>
<li>김치</li>
<li>불고기</li>
</ul>
</section>
<section id="food_2">
<h2>양식</h2>
<ul>
<li>피자</li>
<li>파스타</li>
</ul>
</section>
</body>
</html>
위 HTML의 문서 객체 구조를 그림으로 표현하면 트리구조가 된다. 이때 가장 상위에 위치하는 <html>은
뿌리(root)라고 부르고, 뿌리로부터 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다.
노드의 종류에는 요소노드(Element Node), 텍스트 노드(Text Node), 속성 노드(Attribute Node)가 있다.
선택자 사용하기
선택자를 사용하기 위해서는 문서 객체를 불러와야 한다.
다음은 선택자를 사용하는 방법이다.
| 방법1(잘못된 적용) |
방법 2(정상 적용) |
방법 3(정상 적용) |
<head>
…
<script src=”js/jquery.js”></script>
<script>
$(“#txt”).css(“color”,”red”);
</script>
</head>
<body>
<p id=”txt”>내용</p>
</body> |
<head>
…
<script src=”js/jquery.js”></script>
<script>
$(document).ready(function() {
$(“#txt”).css(“color”,”red);
});
</script>
</head>
<body>
<p id=”txt”>내용</p>
</body> |
<head>
…
<script src=”js/jquery.js”></script>
<script>
$(function() {
$(“#txt”).css(“color”,”red”);
});
</script>
</head>
<body>
<p id=”txt”>내용</p>
</body> |
다음은 제이쿼리 선택자로 스타일이나 속성을 적용하는 기본형이다.
선택자는 $()에 문자형 데이터로 css선택자를 입력하면 된다.
1. 선택한 요소에 지정한 스타일을 적용.
$("CSS 선택자").css("스타일 속성명", "값");
2. 선택한 요소에 지정한 속성을 적용.
$("CSS 선택자").attr("속성명","값");
다음은 제이쿼리의 아이디 선택자를 적용하여 글자 색상을 바꾸는 예제이다.
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#title").css("color","red");
});
</script>
</head>
<body>
<h1 id="title">제목</h1>
</body>
기본 선택자
<body>영역에 있는 문서 객체를 선택할 수 있는 선택자를 살펴 볼것이다.
제이쿼리의 기본 선택자는 직접 선택자와 인접 관계 선택자로 나눌 수 있다.
| 구분 |
종류 |
사용법 |
설명 |
직접
선택자 |
전체 선택자 |
$(“*”) |
모든 요소를 선택 |
| 아이디 선택자 |
$(“#아이디명”) |
id속성에 지정한 값을 가진 요소를 선택 |
| 클래스 선택자 |
$(“.클래스명”) |
class속성에 지정한 값을 가진 요소를 선택 |
| 요소 선택자 |
$(“요소명”) |
지정한 요소명과 일치하는 요소들만 선택 |
| 그룹 선택자 |
$(“선택 1, 선택 2, 선택3,
…선택 n”) |
선택1, 선택2, 선택3, …선택n에 지정된 요소들을 한번에 선택 |
| 종속 선택자 |
$(“p.txt_1”)
$(“p#txt_1”) |
<p> 요소 중 class갑싱 txt_1인 요소 또는 id값이 txt_1인 요소를 선택 |
인접 관계
선택자 |
부모 요소 선택자 |
$(“요소 선택”).parent() |
선택한 요소의 부모 요소를 선택 |
| 상위 요소 선택자 |
$(“요소 선택”).parents() |
선택한 요소의 상위 요소를 모두 선택 |
가장 가까운 상위
요소 선택자 |
$(“요소 선택”).closest(“div”) |
선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택 |
| 하위 요소 선택자 |
$(“요소 선택 하위 요소”) |
선택한 요소에 지정한 하위 요소를 선택 |
| 자식 요소 선택자 |
$(“요소 선택>자식 요소”) |
선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택 |
| 자식 요소들 선택자 |
$(“요소 선택”).children() |
선택한 요소의 모든 자식 요소를 선택 |
형(이전) 요소
선택자 |
$(“요소 선택”).prev() |
선택한 요소의 바로 이전 요소를 선택 |
형(이전) 요소들
선택자 |
$(“요소 선택”).prevAll() |
선택한 요소의 이전 요소 모두를 선택 |
지정 형(이전) 요소들
선택자 |
$(“요소 선택”).prevUntil
(“요소명”) |
선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 |
동생(다음) 요소
선택자 |
$(“요소 선택”).next()
$(“요소 선택+다음 요소”) |
선택한 요소의 다음 요소를 선택 |
동생(다음) 요소들
선택자 |
$(“요소 선택”).nextAll() |
선택한 요소의 다음 요소 모두를 선택 |
지정 동생(다음)
요소들 선택자 |
$(“요소 선택”).nextUntil(“h2”) |
선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택 |
전체 형제 요소
선택자 |
$(“.box_1”).siblings() |
class 값이 box_1인 요소의 형제 요소 전체를 선택 |
직접 선택자
직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다.
직접 선택자의 종류로는 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있다.
전체 선택자
전체(universal)요소를 선택할 때 사용한다. 즉, 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택한다.
전체 선택자의 기본형은 다음과 같다.
$("*")
다음은 전체 선택자를 사용한 예제이다.
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("*").css("border","1px solid blue");
//전체 요소 선택자로 두께가 1px인 파란색 실선을 생성한다
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
아이디 선택자
아이디 선택자는 아이디 속성에 지정한 값을 포함하는 요소를 선택한다.
아이디 선택자의 기본형은 다음과 같다.
$("#아이디명")
다음은 아이디 선택자를 사용하기 위한 예제이다.
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#tit").css("background-color","#ff0")
.css("border", "2px solid #f00");
// 체이닝 기법으로 선택한 요소의 css 메소드를 연속해서 2회 적용한다.
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
노란색 배경과 2px 두께의 빨간색 실선이 생성 된다.
체이닝 기법이란?
선택한 요소에는 메소드를 연속해서 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다고 하여 '체이닝 기법'
이라 한다. 제이쿼리에서는 한 객체에 다양한 메소드를 줄줄이 이어서 사용할 수 있다.
메소드 사용이 완료 되면 문장 마지막에는 세미콜론을 작성하여 마무리한다.
$(요소선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3);
클래스 선택자
클래스 속성에 지정한 값을 포함하는 요소를 선택한다.
기본형은 다음과 같다.
$("클래스명")
다음은 문단 태그 영역에 <h2> 태그의 tit이라는 class값을 지정하는 예제이다.
<script>
$(function(){
$(".tit").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
요소명 선택자
지정한 요소명(Tag Name)과 일치하는 요소를 모두 선택한다.
요소명 선택자의 기본형은 다음과 같다.
$("요소명")
다음은 문단 태그 영역에 요소명 선택자를 적용한 예제이다.
<script>
$(function(){
$("h2").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
그룹 선택자
그룹 선택자는 한번에 여러개의 요소를 선택할 때 사용한다.
그룹 선택자의 기본형은 다음과 같다.
$("요소 선택1, 요소 선택2, 요소 선택3, ...요소 선택n");
다음은 문단 태그 영역에 그룹선택자로 한번에 여러개의 요소를 선택하여 스타일(CSS)을 적용하는 예제이다.
<script>
$(function(){
$("#tit3, h1").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접 선택자</h3>
<h3>인접 선택자</h3>
</body>
종속 선택자
종속 선택자는 선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용한다.
종속 선택자의 기본형은 다음과 같다.
$("요소명#id 값")
$("요소명.class 값")
다음은 종속 선택자로 요소명과 class값이 일치하는 요소를 선택하여 스타일(CSS)을 적용하는 예제이다.
<script>
$(function(){
$("h1.tit").css("background-color","#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1 class="tit">제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit">직접 선택자</h3>
</body>
인접 관계 선택자
직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음요소)요소를 선택할 때
사용한다. 인접관계 선택자를 자유자재로 사용하려면 문서 객체 구조와 관계를 잘 이해하고 있어야 한다.
문서 객체 구조와 관계
<body>
<div id="wrap"> // a
<div id="inner_wrap"> // b
<h1>제목</h1> //d
<h2>제목</h2> //e
<p>내용1</p> //f
<p>내용2</p>
<p>내용3</p> //<h1>부터 여기까지 c
</div>
</div>
</body>
a는 c의 상위(closet)요소이고 c는 a의 하위 요소이다.
b는 c의 부모(parent) 요소이고 c는 b의 자식(children)요소이다.
d는 e의 형(prev)요소 이며 f는 e의 동생(next)요소이다.
1. $("h2").next().css("color", "green");
2. $("h2").parent().css("border", "1px solid #f00");
1은 동생 요소 선택자인 next()함수를 사용하여 <h2>의 동생요소인 <p>내용1</p>를 선택한 다음
글자색을 초록색으로 적용한다. 2는 부모 요소 선택자인 parent() 함수를 사용하여 <h2>의 부모 요소인
<div id="inner_wrap">을 선택한 다음 1px 두께의 빨간색 실선을 생성한다.
부모 요소 선택자
부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택한다.
기본형은 다음과 같다.
$("요소 선택").parent();
다음은 문단 태그 영역의 부모 요소 선택자를 적용한 예제이다.
<li id="list_1">의 부모요소는 안쪽에 있는 <ul>태그이다.
<script>
$(function(){
$("#list_1").parent() //<ul> <li id="list_1">제이쿼리</li>
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>리스트1
<ul>
<li id="list_1">리스트1-1</li> <!-- <ul>의 자식인 <li>태그 -->
<li>리스트1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
하위 요소 선택자
하위 요소 선택자는 기준 요소로 선택한 하위 요소만 선택한다.
기본형은 다음과 같다.
$("기준 요소 선택 1 요소 선택2")
ex) $("#wrap h1") //id="wrap"인 요소가 기준 요소가 된다.
다음은 하위 요소 선택자를 적용한 예제이다.
id값이 "wrap"인 요소가 감싸고 있는 <h1>을 모두 선택한다.
<script>
$(function(){
$("#wrap h1")
.css({
"background-color":"yellow",
"border":"2px dashed #f00"
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
자식 요소 선택자
자식 요소 선택자는 선택된 요소를 기준으로 지정한 자식 요소만 선택한다.
기본형은 다음과 같다.
1. $("요소 선택>자식 요소 선택")
2. $("요소 선택").children("자식 요소 선택")
3. $("요소 선택").children()
1,2 는 선택한 요소를 기준으로 지정한 자식 요소만 선택한다.
3은 선택한 요소를 기준으로 모든 자식 요소를 선택한다.
다음은 문단 태그 영역에 자식 요소 선택자를 적용한 예제이다.
<script>
$(function(){
$("#wrap > h1").css("border", "2px dashed #f00");
//1. <div id="wrap"> <h1>인접 관계 선택자</h1>
$("#wrap > section").children()
//2. <section> <h1>자식 요소 선택자</h1> <p>내용2</p> </section>
.css({
"background-color":"yellow",
"border":"2px solid #f00"
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>자식 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
1번은 인자값을 사용해 css속성과 값을 전달하는 방식이다.
$("요소 선택").css("속성명1","값1").css("속성명2","값2");
2번은 객체를 사용해 css속성과 값을 전달하는 방식이다.
$("요소 선택").css({"속성명1": "값1", "속성명2":"값2"...."속성명n":"값n"});
형(이전)/동생(다음) 요소 선택자
형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택한다.
그리고 동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다.
1. $("요소 선택").prev()
2. $("요소 선택").next()
3. $("요소 선택1 + 요소 선택2")
1. 선택한 요소를 기준으로 이전에 오는 형제 요소만 선택.
2. 선택한 요소를 기준으로 다음에 오는 형제 요소만 선택.
3. 선택한 요소를(요소 선택1) 기준으로 다음에 오는 선택한 요소(요소 선택2)만 선택.
다음은 문단 태그 영역에 형 요소 선택자와 동생 요소 선택자를 적용한 예제이다.
class값이 txt인 요소를 기준으로 이전 형제요소(<p>내용1</p>)와 다음 형제요소(<p>내용3</p>), 다음다음
형제 요소(<p>내용4</p>)를 선택한다.
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
var style_2={
"background-color":"#ff0",
"border":"2px dashed #f00"
}
$(".txt").prev()
.css(style_1);
//<p>내용1</p>
//<p class="txt">내용2</p>
$(".txt+p").css(style_2);
//<p class="txt">내용2</p>
//<p>내용3</p>
$(".txt").next(),next()
.css(style_2);
//<p class="txt">내용2</p>
//<p>내용3</p>
//<p>내용4</p>
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
전체 형(이전)/동생(다음)요소 선택자
전체 형 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소를 선택한다.
그리고 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음에 오는 전체 형제 요소를 선택한다.
$("요소 선택").prevAll()
$("요소 선택").nextAll()
다음은 문단 태그 영역에 전체 형 요소 선택자와 전체 동생 요소 선택자를 적용한 예제이다.
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
var style_2={
"background-color":"#ff0",
"border":"2px dashed #f00"
}
$(".txt").prevALl()
.css(style_1);
//<h1>인접 관계 선택자</h1>
//<p>내용1</p>
//<p class="txt">내용2</p>
$(".txt+p").nextAll()
.css(style_2);
//<p class="txt">내용2</p>
//<p>내용3</p>
//<p>내용4</p>
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
전체 형제 요소 선택자
전체 형제 요소 선택자는 선택하 ㄴ요소의 모든 형제 요소를 선택한다.
기본형은 다음과 같다.
$("요소 선택").siblings();
다음은 문단 태그 영역에 전체 형제 요소 선택자를 적용한 예제이다.
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt").siblings()
.css(style_1);
//<h1>인접 관계 선택자</h1>
//<p>내용1</p>
//<p class="txt">내용2</p>
//<p>내용3</p>
//<p>내용4</p>
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
범위 제한 전체 형/동생 요소 선택자
범위 제한 전체 형/동생 요소 선택자는 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는
전체 동생 요소를 선택한다.
기본형은 다음과 같다.
1. $("요소 선택").prevUntil("범위 제한 요소 선택")
2. $("요소 선택").nextUntil("범위 제한 요소 선택")
1. 선택한 요소를 기준으로 범위 제한 요소까지 전체 형 요소를 선택한다.
2. 선택한 요소를 기준으로 범위 제한 요소까지 전체 동생 요소를 선택한다.
다음은 범위 제한 전체 형/동생 선택자를 적용한 예제이다.
class값이 txt3인 요소를 기준으로 전체 형/동생 요소를 선택한다.
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt3").prevUntil(".title")
.css(style_1);
$(".txt3").nextUntil(".txt6")
.css(style_1);
//<h1 class="title">선택자</h1>
//<p>내용1</p>
//<p>내용2</p>
//<p class="txt3">내용3</p>
//<p>내용4</p>
//<p>내용5</p>
//<p class="txt6">내용6</p>
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
</body>
상위 요소 선택자
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소만
선택할 때 사용한다.
1. $("요소 선택").parents()
2. $("요소 선택").parents("요소 선택")
1. 선택한 요소를 기준으로 상위 요소를 모두 선택한다.
2. 선택한 요소를 기준으로 상위 요소 중 선택한 요소만 선택한다.
다음은 문단 태그 영역에 상위 요소 선택자를 적용한 예제이다.
<script>
$(function(){
$(".txt1").parents() //<p class="txt1">내용</p>의 전체 상위
//요소를 선택.
.css({
"border":"2px dashed #00f"
});
$(".txt2").parents("div") //<p class="txt2">내용</p>의 전체
//상위 요소 중 <div>만 선택
.css({
"border":"2px solid #f00"
});
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p> //전체 상위 요소 선택
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>. //상위 요소 중 <div>만 선택
</div>
</section>
</body>
가장 가까운 상위 요소 선택자
가장 가까운 상위 요소 선택자는 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 사용된다.
기본형은 다음과 같다.
$("요소 선택").closest("요소 선택")
다음은 가장 가까운 상위 요소 선택자를 적용한 예제이다.
<script>
$(function(){
$(".txt1").closest("div")
.css({
"border":"2px solid #f00"
});
//<div>
// <div>
// <p class="txt1">내용</p>
// </div>
//</div>
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</body>
(참고 : do it 자바스크립트+제이쿼리 입문)
