[그 외의 선택자 - 콘텐츠 탐색 선택자]
- 콘요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자.
- 콘텐츠 탐색 선택자의 종류
|
종류 |
사용법 |
설명 |
|
$("요소 선택":contains(텍스트)") |
$("li:contains('내용2')") |
<li> 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 |
|
$("요소 선택").contents() |
$("p").contents() |
선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 |
|
$("요소 선택:has(요소명)") $("요소 선택").has(요소명) |
$("li:has('span')") $("li").has('span') |
<li> 요소 중 <span>을 포함하는 요소만 선택 |
|
$("요소 선택:not(:제외 요소)") $("요소 선택").not("제외 요소) |
$("li:not(:first)") $("li") |
<li> 요소 중 첫 번째 요소만 제외하고 선택 |
|
$("요소 선택").filter(필터 요소) |
$("li").filter(".list2") |
<li> 요소 중 class 속성 값이 "list2"인 요소만 선택 |
|
$("요소 선택1").find("요소 선택2") |
$("li").find("strong") |
<li> 요소에 하위 요소인 <strong>만 선택 |
|
$("요소 선택1").closest("요소 선택2") |
$("strong").closest("div") |
<strong>을 감싸는 상위 <div> 요소 중 가장 가까운 상위 요소를 선택 |
|
end() |
$("li").children("a").end() |
필터링이 일어나기 이전의 요소인 <li>가 선택됨. |
1) contains() / has() / not() / find() / closest() 선택자
- contains() 선택자는 선택한 요소 중 지정한 텍스트(Text)를 포함하는 요소만 선택.
- has() 선택자는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택.
- not() 선택자는 선택한 요소 중 지정한 요소만 제외하고 선택.
- find() 선택자는 선택한 요소에서 지정한 요소를 다시 필터링(찾아)해 선택.
- closest() 선택자는 선택한 요소에 지정한 상위(조상) 요소 중 가장 가까운 상위 요소를 찾아 선택.
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<div id="wrap">
<div id="inner_wrap">
<ul id="menu">
<li>내용1</li>
<li>
<span>내용<strong>2</strong></span>
</li>
<li><a href="#">내용3</a></li>
<li>내용4</li>
<li>내용5</li>
</ul>
</div>
</div>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#menu li:contains('내용3')").css("border", "1px dashed red");
// 선택한 <li> 태그 중 "내용3"을 포함하는 <li> 태그에 1px의 빨간색 파선을 생성함.
$("#menu li:has('strong')").css("border", "2px solid blue");
// 선택한 <li> 태그 중 <strong> 태그를 포함한 <li> 태그에 2px의 파란색 선을 생성함.
$("#menu li").not(":first").css("background-color", "yellow");
// 선택한 <li> 태그 중 첫 번째 요소를 제외한 <li> 태그의 배경에 노란색을 적용함.
$("#menu li:eq(1)").find("strong").css("font-size", "22px");
// index가 1인 <li> 태그에 포함된 <li> 태그를 찾아 글자 크기를 22px로 적용함.
$("#menu").closest("div").css("border", "5px double green");
// id가 "menu"인 요소에 가장 가까운 상위 요소인 <div> 태그에 초록색 이중선을 생성함.
});
</script> |
cs |
2) filter() / contents() 선택자
- filter() 선택자는 선택한 요소에서 한 번 더 필터링하여 요소를 선택.
- contents() 선택자는 선택한 요소에 하위 콘텐츠 중 가장 근접한 콘텐츠를 선택.
- 예를 들어, '<div><span><strong>내용</strong></span></div>'에서 <div> 태그에 가장 가까운 하위 콘텐츠는 <span>.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul>
<li class="st1">내용1</li>
<li>
<span><strong>내용2</strong></span>
</li>
<li class="st1">내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("li").filter(".st1").css("background-color", "yellow");
// <li> 태그 중 class="st1"인 요소만 걸러서 배경에 노란색을 적용함.
$("li").contents().css("border", "1px solid red");
// <li> 태그 안에 포함된 요소만 1px의 빨간색 선을 생성함.
});
</script> |
cs |
3) end() 선택자
- 앞에 필터링이 일어나기 이전의 요소를 선택.
|
<div id="box"><span><strong><a href="#">내용</a></strong></span></div>
$("#box").find("span").find("strong").css("border", "1px solid red") .end()css("background-color", "yellow");// find 이전의 <span> 태그의 배경을 노란색으로 적용함. |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#menu").children("li:eq(1)").css("border", "1px cashed red")
// id="menu"인 요소의 자식 요소인 <li> 태그 중 index가 1인 요소에 1px의 빨간색 파선을 생성함.
.end().css("border", "5px double blue");
// children 필터링 이전 요소인 id="menu"인 요소에 5px의 파란색 이중선을 생성함.
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
|---|---|
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 위치 탐색 선택자 (0) | 2017.05.22 |
| 직접 선택자와 인접 관계 선택자 (0) | 2017.05.22 |
| 선택자 (Selector) (0) | 2017.05.22 |
