용어 뜻:
출처:
Selector(선택자)란 말 그대로 선택을 해주는 요소다.
이를 통해 특정 요소들을 선택해서 스타일을 적용할 수 있게 된다.
DOM(Document Object Model) 상에서의 객체를 선택하기 위해서라고도 할 수 있다.
Html은 트리 구조로 이루어져 있는데
html - head
- body
- tag1
- tag2
이러한 개념적 트리구조를 갖는 문서는 모두 DOM에 해당된다고 생각하면 될 것이다.
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
1. 기본 셀렉터
1) id 셀렉터
<tagname id = "abc"></tagname>
일 때 $("#abc")
2) element 셀렉터
<tagname> hello </tagname>
일 때 $("tagname")
이라고 쓰면 해당 태그에 해당하는 객체 전부를 선택한다.
3) class 셀렉터
<span class='cssClass'>일</span>
<div class='cssClass'>이</div>
일 때 $(".casClass")
라고 쓰면 지정한 css 클래스를 가진 모든 객체를 가져온다.
4) all 셀렉터
$("*")
*은 보통 모든 것을 의미하는데 JQuery에서는 Document를 의미한다.
5) 다중 셀렉터
$("#abc, tagname, .class")
셀렉터 표현 안에 여러 표현을 혼합해서 넣는 방법이다. ,로 구분한다.
2. 상속 셀렉터
1) 자손 셀렉터
<div id = "girl">
<p class = 'skirt'> 김소희 </p>
<div>
<p> 정준하 </p>
<span class = 'skirt'> 박소희 </span>
</div>
</div>
일 때
$("div.p") (1)
$("#girl.skirt") (2)
(1) 표현은 div 밑에 있는 자식 뿐 아니라 해당 div 밑으로 모든 자손들을 포함한다.
(2) 표현은 id가 girl인 객체 밑의 자손들 중에 class가 skirt인 것을 선택한다.
2) 자녀 셀렉터
<div id = "girl">
<p class = 'skirt'> 김소희 </p>
<div>
<p> 정준하 </p>
<span class = 'skirt'> 박소희 </span>
</div>
</div>
일 때
$("div > p ") (1)
$("#girl > .skirt") (2)
(1) 표현은 div 바로 밑의 자식들만 찾아서 p를 선택한다.
(2) 표현은 id가 girl인 객체 바로 밑에 있는 자식들중 class가 skirt인 것을 선택한다.
3) 바로 밑의 동생 셀렉터
<span>0</span>
<div>1</div>
<p>2</p>
<p>3</p>
<div>
<p>4</p>
</div>
<p>5</p>
일때
$("div + p")
이 표현은 div의 바로 밑 동생을 선택하라는 뜻이다.
4) 밑의 동생을 다 선택하는 셀렉터
$("div ~p")
이 표현은 div 이후의 동생들 중 p태그를 갖는 동생들을 모두 선택하라는 뜻이다.
3. 기본 셀렉터 필터
1) :first
<div>딸기</div>
<div>사과</div>
<div class=grape>포도</div>
<div>바나나</div>
일 때
$("div:first")
는 여러 개의 div 중 첫번째 것만 선택하라는 뜻이다.
2) :last
$("div:last")
여러개의 div중 마지막것만 선택하라는 뜻이다.
3) :not(셀렉터)
$("div:not(.grape)")
여러개의 div중 css클래스이름이 grape를 빼고 선택하라는 뜻이다.
4) :even
$("div:even")
여러개의 div중 짝수번째 것만 선택하라는 뜻이다.
이것은 table에서 홀짝수별로 tr색상을 바꿀때 편할 듯 싶다.
5) :odd
$("div:odd")
여러개의 div중 홀수번째 것만 선택하라는 뜻이다.
6) :eq(인덱스)
$("div:eq(2)")
여러개의 div중 인덱스가 2인 것 즉 3번째 것만 선택하라는 뜻이다.
첫 번째 인덱스 값이 0부터 시작한다.
7) :gt(인덱스)
$("div:gt(1)")
여러개의 div중 인덱스가 1보다 큰 것만 선택하라는 뜻이다.
gt = greater than
8) :lt(인덱스)
$("div:lt(2)")
여러개의 div중 인덱스가 2보다 작은 것만 선택하라는 뜻이다.
lt = less than
9) :header
<h1>머리1</h1>
<h2>머리2</h2>
$(":header")
태그중 헤더를 알리는 <h1>, <h2>, .. 등을 선택하라는 뜻이다.
10) :animated
$(":animated")
이펙트 부분에서 animate로 정의된 것들만 선택하라는 뜻이다.
4. 내용 셀렉터 필터
1) :contains(찾는문자열)
<span>남자의향기</span>
<span>여자의향기</span>
<span>남자의땀냄새</span>
$("span:contains('남자')") (1)
$("span:not(:contains('땀'))") (2)
(1) span 태그안에 '남자'라는 문자를 가지고 있는 것들을 선택하라는 뜻이다.
(2) span 태그안에 '땀'라는 문자를 제외한 것들을 선택하라는 뜻이다.
2) ::empty
<span>남자의향기</span>
<span>여자의향기</span>
<span></span>
$("span:empty")
span태그 안에 자식이 존재하지 않고 비어 있는 것들을 선택하라는 뜻이다.
3) :has(셀렉터)
$("div:has(span)")
자손들중 span을 가지고 있는 div를 선택하라는 뜻이다.
4) :parent
$("div:parent")
자식을 갖고 있거나 태그안이 비어있지 않은 div만을 선택하라는 뜻이다.
5. hidden/visible 셀렉터 필터
1) :hidden
$("span:hidden") (1)
$(":hidden","div") (2)
css스타일에서 display :none 으로 설정되거나
폼태그 <input type=hidden ~~/> 인 것들을 선택하라는 뜻이다.
(1) 은 span중에 에서 감추기로 된 것들을 가져오라는 뜻이다.
(2) 는 div의 자손들중 감추기 속성이 된 것들을 가져오라는 뜻이다.
주의사항은 visibility:hidden 인 스타일은 선택하지 못한다. ( 최소한 1.3.2버전까지는 )
2) :visible
$("span:visible") (1)
$(":visible","body") (2)
화면상에 보이는 객체들을 선택하라는 뜻이다.
(1) 은 span중에 에서 보이는 것들만 선택하라는 뜻이다.
(2) 는 body의 자손들중 보이는 것들을 가져오라는 뜻이다.
:hidden과 대조적으로 여기에서는 visibility:hidden 인 것은 선택되지 않았다.
| cs |
Developer Story, 2016-10-28, http://devx.tistory.com/entry/%EC%85%80%EB%A0%89%ED%84%B0Selector%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
Nextree, 2016-10-28, http://www.nextree.co.kr/p8468/
댓글
댓글 쓰기