[jQuery] 선택자(Selector) :직접 선택자, 인접 관계 선택자
반응형
선택자(Selector)
선택자(Selector)를 사용하면 지정한 문서 객체를 선택할 수 있다.
jQuery 선택자는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계(부모,자식...)를
따져 선택하는 인접 관계 선택자, 선택된 요소 중 세밀하게 선택할 수 있는 탐색 선택자로 구분한다.
문서내 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기 위해서 jQuery에서 제공하는 기술이다.
기본 구조
$("selector") or jQuery("selector")
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Direct Select</title>
<!-- jquery를 사용하도록 선언 -->
<script type="text/javascript"
src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// jQery(function(){
$(function(){
// alert("jquery start");
// "*" - <모든 요소>의 속성 지정.
// $("*").css("border", "1px solid blue");
// # : 아이디 선택
// obj.style.background = "yellow";
$("#tit").css("background", "yellow")
.css("border", "2px solid red");
//. : 클래스 선택
$(".direct").css("background","orange");
// : 앞에 .이나#이 붙지 않으면 태그 선택
$("h3").css("border", "3px solid green");
// 여러개의 요소를 복합적으로 선택할 때 ,를 이용하여 선택.
$("h1,#tit2").css("background", "pink");
});
</script>
</head>
<body>
<h1>제이쿼리:h1</h1>
<h2 id="tit">직접 선택자 및 관계 선택자:h2-id(tit)</h2>
<h2 id="tit2">직접 선택자 및 관계 선택자:h2-id(tit2)</h2>
<h3 class="direct">직접 선택자 :h3 - class(direct)</h3>
<h3>관계 선택자 :h3</h3>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인접 관계 선택자</title>
<!-- jquery를 사용하도록 선언 -->
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// prev : 형 요소, next : 동생 요소
$(function() {
$("#second").prev()
.css("border", "1px solid red");
$("#second").next()
.css("border", "1px solid blue");
// obj.click() - 클릭 이벤트 만듦.
// obj.text() - 객체 안에 글자를 가져옴.
// 버튼을 클릭하면 글번호 출력
$("button").click(function() { // button 선택 4개가 선택
alert($(this).parent().prev().prev().text());
});
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
<table>
<tr>
<th>글번호</th>
<th>글제목</th>
<th>수정/삭제</th>
</tr>
<tr>
<td>1</td>
<td>java</td>
<td><button>수정</button>
<button>삭제</button></td>
</tr>
<tr>
<td>2</td>
<td>oracle</td>
<td><button>수정</button>
<button>삭제</button></td>
</tr>
</table>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인접 관계 선택자</title>
<!-- jquery를 사용하도록 선언 -->
<script type="text/javascript"
src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// li class="second"을 선택하고 기준으로 부모 요소(parent)를 선택
// ->ul->li->body->head
$(".second").parent().parent()
.css("border", "1px solid red");
// #wrap li : 아이디가 wrap인 요소 안에서 모든 li를 찾는다.
// sp를 이용하여 선언한다.
// 자손 요소 선택 -> parentd() 메서드를 사용할 수도 있다.
$("#wrap li").css("border", "1px solid red");
// ">" : 자식 요소 선택
$("#wrap li").css("background", "white");
$("#wrap>li").css("background", "#ccc");
// <body>,<children> body의 모든 자식 요소
// childred("h1") body의 자식 요소 모든 h1에 1px 파란선을 생성.
$("body").children("h1")
.css("border", "1px solid blue");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>내용1
<ul>
<li>내용2</li>
<li class="second">내용3</li>
</ul>
</li>
</ul>
</body>
</html> |
cs |
TEST
// div중에서 클릭한데까지 배경색을 오렌지 색으로 변경시킨다.
// div중에 하나를 클릭하면 클릭한 부분까지 배경색을 변경한다.
// 다시 div를 클릭하면 div 배경색을 흰색으로 전부 바꾸고, 클릭한 부분까지 배경색을 오렌지로
// 배경색을 바꿀때는 클릭한 div를 포함 시켜야 한다.
// .prevAll();
반응형
'Programming' 카테고리의 다른 글
| [jQuery] 선택자(Selector) :탐색 선택자, 속성 탐색 선택자(2) (0) | 2017.06.21 |
|---|---|
| [jQuery] 선택자(Selector) :탐색 선택자, 위치 탐색 선택자(1) (0) | 2017.06.20 |
| [Oracle] Insert와 commit (0) | 2017.06.14 |
| [Oracle] 사용자 및 테이블 생성,삭제 (0) | 2017.06.08 |
| [Javascript] 로또 번호 생성기 (0) | 2017.06.08 |
댓글