[jQuery] 선택자(Selector) :탐색 선택자, 속성 탐색 선택자(2)
반응형
탐색 선택자(2)
직접 선택자로 선택한 요소 중 원하는 요소를 한번더 탐색하여 정확이 선택한다.
위치 탐색 선택자, 소성 탐색 선택자, 콘텐츠 탐색 선택자, 필터링 선택자 등이 존재.
속성 탐색 선택자
선택해 온 요소를 기준으로 일치하는 속성의 포함여부를 따져서
요소를 선택해 오는 선택자.
$("요소 선택[속성]")
<li> 요소 중 입력된 값 속성이 포함된 요소 선택
$("요소 선택[속성^=값]")
<li> 요소 중 title 속성값이 입력된 값인 요소 선택
$("요소 선택[속성^=텍스트")
<li> 요소 중 href 속성값이 입력된 텍스트로 시작하는 요소 선택
$("요소 선택[속성$=텍스트]")<li> 요소 중 href 속성값이 입력된 값으로 끝나는 요소 선택
$("요소 선택[href*=속성]")<li> 요소 중 href 속성값 중에서 입력된 값을 포함하는 요소 선택
|
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 |
<script type="text/javascript">
$(function() {
// title 속성이 있는 요소 선택
$("a[title]").css("background", "navy").css("color", "white");
// href - nate.com
$("a[href='http://nate.com']").css("background", "pink");
// mailto로 시작하는 요소 - ^
$("a[href^='mailto']").css("background", "deeppink").css("color","white");
// net으로 끝나는 요소 - $
$("a[href$='net']").css("background", "purple");
// google이라는 글자가 포함이 된 요소 - *
$("a[href*='google']").css("background", "orange");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li><a href="http://naver.com" title="네이버로 이동">네이버</a></li>
<li><a href="mailto:ch_hood9@naver.com">관리자 메일</a></li>
<li><a href="http://nate.com" title="네이트로 이동">네이트</a></li>
<li><a href="http://daum.net" title="다음으로 이동">다음</a></li>
<li><a href="http://google.com" title="구글로 이동">구글</a></li>
</ul>
</body> |
cs |
$("요소 선택:hidden") / $("요소 선택:visible")
<li> 요소 중 숨겨져 있는 것만 선택 / <li> 요소 중 보이는 것만 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<title>탐색 선택자 : 속성 탐색 선택자</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("p:visible").css("border", "1px solid red");
$("p:hidden").css("display", "block");
// block - 태그를 블록형식으로 지정
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<p>131zip</p>
<!-- display:none - 화면상 없어지게 만드는 속성 -->
<p style="display:none;">일삼일</p>
</body> |
cs |
$(":text")
<input> 요소 중 type 속성값이 입력된 값인 요소만 선택
$(":selected")
selected 속성이 적용된 요소만 선택
$(":checked")
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
31
32
33
34
35
36
37
38
39
40 |
<title>탐색 선택자 : 속성 탐색 선택자</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
// input tag 중에서 type="text" 인 것을 선택
$(":text").css("border", "1px dashed #f00");
// check 되어져 있는 요소를 선택 - > 체크를 해제시킨다.
$(":checked").attr("checked", false);
$(":selected").attr("selected", false);
});
</script>
</head>
<body>
<h1>속성 선택자</h1>
<form action="">
<!-- 한개의 입력 단위 별로 p태그를 만듭니다. -->
<p>
<label for="user_name">이름</label> <input type="text" name="user_name"
id="user_name" />
</p>
<p id="feb">
<!-- 관심사에 대한 선택 -->
<input type="checkbox" name="feb" checked="checked" /> <label>JAVA</label>
<input type="checkbox" name="feb" checked="checked" /> <label>Oracle</label>
<input type="checkbox" name="feb" checked="checked" /> <label>HTML</label>
<input type="checkbox" name="feb" checked="checked" /> <label>Spring</label>
<input type="checkbox" name="accept" id="accept" checked="checked" />
<label for="accept">사용자 동의</label>
</p>
<p>
<select name="rel_site" id="rel_site">
<option>네이버</option>
<option selected="selected">네이트</option>
</select>
</p>
<p>
<button>전송</button>
</p>
</form> |
cs |
반응형
'Programming > HTML-CSS' 카테고리의 다른 글
| [jQuery] 자주 사용하는 함수 모음 (0) | 2017.06.27 |
|---|---|
| [jQuery] HTML 테스터 (0) | 2017.06.23 |
| [jQuery] 선택자(Selector) :탐색 선택자, 위치 탐색 선택자(1) (0) | 2017.06.20 |
| [jQuery] 선택자(Selector) :직접 선택자, 인접 관계 선택자 (0) | 2017.06.19 |
| [Javascript] 로또 번호 생성기 (0) | 2017.06.08 |
댓글