[속성 탐색 선택자]
- 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해오는 선택자.
- 속성 탐색 선택자 종류
|
종류 |
사용법 |
설명 |
|
$("요소 선택[속성]") |
$("li[title]") |
<li> 요소 중 title 속성이 포함된 요소만 선택 |
|
$("요소 선택[속성=값]") |
$("li[title='리스트']") |
<li> 요소 중 title 속성값이 '리스트'인 요소만 선택 |
|
$("요소 선택[속성^=텍스트]") |
$("a[href^='http://']") |
<li> 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 |
|
$("요소 선택[속성$=텍스트]") |
$("a[href$='.com']") |
<li> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 |
|
$("요소 선택[href*=텍스트]") |
$("a[href*='eas']") |
<li> 요소 중 href 속성값 중에서 'eas'를 포함하는 요소만 선택 |
|
$("요소 선택:hidden") |
$("li:hidden") |
<li> 요소 중 숨겨져 있는 것만 선택 |
|
$("요소 선택:visible") |
$("li:visible") |
<li> 요소 중 보이는 것만 선택 |
|
$(":text") |
$(":text") |
<input> 요소 중 type 속성값이 "text"인 요소만 선택 |
|
$(":selected") |
$(":selected") |
selected 속성이 적용된 요소만 선택 |
|
$(":checked") |
$(":checked") |
checked 속성이 적용된 요소만 선택 |
1) $("요소 선택[속성]") / $("요소 선택[속성=값]") 선택자
- 선택한 요소 중 지정한 속성과 일치하는 속서이 있는지 없는지 포함 여부를 따져 요소를 선택.
- 이 선택자는 특정 속성을 포함하는 요소를 선택할 때 주로 사용.
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul>
<li>
<a href="http://www.naver.com" title="네이버 이동">네이버</a>
</li>
<li><a href="mailto:ciycc@naver.com">관리자에게</a></li>
<li><a href="http://www.nate.com">네이트</a></li>
<li><a href="http://www.daum.net">다음</a></li>
<li><a href="http://www.google.com">구글</a></li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("a[title]").css("background-color", "yellow");
// "title" 속성을 포함한 <a>태그의 배경에 노란색을 적용함.
$("a[href='http://www.nate.com']").css("background-color", "pink");
// [속성="값"]을 포함한 <a> 태그의 배경에 분홍색을 적용함.
$("a[href$='net']").css("background-color", "purple");
// href의 값이 "net"으로 끝나는 <a>태그의 배경에 보라색을 적용함.
$("a[href*='google']").css("background-color", "orange");
// href의 값 중에 "google"을 포함하는 <a> 태그의 배경에 오렌지색을 적용함.
});
</script> |
cs |
2) $("요소 선택:hidden") / $("요소 선택:visible") 선택자
- $("요소 선택:hidden") 선택자는 선택한 요소 중 현재 숨겨져(display="none") 있는 요소만 선택.
- $("요소 선택:visible") 서낵자는 선택한 요소 중 현재 노출되어 있는 요소만 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<p>내용1</p>
<p style="display:none;">내용2</p>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("p:visible").css("border", "1px solid red");
// <p> 태그 중 보이는 요소에 1px의 빨간색 선을 생성함.
$("a:hidden").css("display", "block");
// <p> 태그 중 숨겨진 요소에 "display:block"을 적용함.
});
</script> |
cs |
3) $(":TYPE 속성 | 상태 속성") 선택자
- 입력 요소의 type 속성 또는 상태 속성값의 일치 여부를 따져 입력 요소를 선택해 옴.
- 예를 들어, $(":text")는 입력 요소(input) 중 type="text"인 요소만 선택함. $(":checked")는 체크 박스 중 체크가 되어 있는 요소만 선택함.
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" />
</p>
<p>
<input type="checkbox" name="accept" id="accept" checked="checked" />
<label for="accept">사용자 동의</label>
</p>
<p>
<select name="rel_site" id="resl_site">
<option value="네이버">네이버</option>
<option value="네이트" selected="selected">네이트</option>
</select>
</p>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$(":text").css("border", "1px dashed #f00");
// <input> 태그 중 type="text"인 요소에만 파선을 생성함.
$(":checked").attr("checked", "false");
// 체크된 <input> 요소의 체크를 해지함.
$(":selected").attr("checked", "false");
// 선택된 <select> 요소의 선택을 해지함.
});
</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 |
| 선택자 (Selector) (0) | 2017.05.22 |
| 제이쿼리란? (0) | 2017.05.22 |
