프로그래밍/jQuery
[제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자)
pupu91
2023. 1. 24. 20:46
반응형
제이쿼리 선택자
- css 선택자뿐만 아니라 몇몇 비표준 선택자도 사용할 수 있다.
- 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.
1. 선택한 요소 저장
선택한 요소들을 변수에 저장하여 사용할 수 있다.
<script>
$(function(){
var items = $("li");
$("#len").text("저장된 <li> 총 개수는" + items.length + "개입니다.")
.css("backgroundColor", "skyblue")
});
</script>
<body>
<h1>변수에 요소 저장하기</h1>
<ul>
<li>아이템 1 </li>
<li>아이템 2 </li>
<li>아이템 3 </li>
<li>아이템 4 </li>
<li>아이템 5 </li>
</ul>
<p id="len"> </p>
</body>
▼
2 - 1 . 선택한 요소의 필터링
필터링을 사용하면 선택한 요소의 더 세분화된 선택이 가능하다.
<script>
$(function() {
$("button").on("click", function() {
$("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
});
});
</script>
<body>
<h1>선택한 요소의 필터링</h1>
<ul>
<li>첫 번째 아이템이에요!</li>
<li><span>두 번째</span> 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
</ul>
<button>필터링</button>
</body>
▼
2 - 2 .필터링에서 사용할 수 있는 선택자
| 선택자 | 설명 |
| :eq(n) | 선택한 요소 중에서 인덱스가 n인 요소를 선택함. |
| :gt(n) | 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함. |
| :lt(n) | 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함. |
| :even | 선택한 요소 중에ㅔ서 인덱스가 짝수인 요소를 모두 선택함. |
| :odd | 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함. |
| :first | 선택한 요소 중에서 첫 번째 요소를 성택함 |
| :last | 선택한 요소 중에서 마지막 요소를 선택함. |
| :animated | 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함. |
| :header | 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함. |
| :lang(언어) | 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함. |
| :not(선택자) | 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함. |
| :root | 선택한 요소 중에서 최상위 루트 요소를 선택함. |
| :target | 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함 |
| :contains(텍스트) | 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함. |
| :has(선택자) | 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함. |
| :empty | 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함. |
| :parent | 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함. |
3 - 1. input 요소의 선택
입력 양식에 관련된 특정 요소를 손쉽게 선택할 수 있다.
<script>
$(function(){
$("button").on("click", function(){
$(":checked").next().text("체크되어 있는 요소 선택!").css("backgroundColor", "skyblue");
});
});
</script>
<body>
<h1>Form 요소 선택</h1>
<form>
<input type="checkbox" name="test"><span>제이쿼리</span><br>
<input type="checkbox" name="test"><span>form</span><br>
<input type="checkbox" name="test"><span>요소선택</span><br>
<input type="checkbox" name="test" checked > <span>test입니다</span> <br>
</form>
<button>필터링</button>
</body>
▼
3 - 2. input 요소 선택자
| 선택자 | 설명 |
| :button | type 속성값이 "button"인 요소를 모두 선택함. |
| :checkbox | type 속성값이 "checkbox"인 요소를 모두 선택함. |
| :file | type 속성값이 "file"인 요소를 모두 선택함. |
| :image | type 속성값이 "image"인 요소를 모두 선택함. |
| :password | type 속성값이 "password"인 요소를 모두 선택함. |
| :radio | type 속성값이 "radio"인 요소를 모두 선택함. |
| :reset | type 속성값이 "reset"인 요소를 모두 선택함. |
| :submit | type 속성값이 "submit"인 요소를 모두 선택함. |
| :text | type 속성값이 "text"인 요소를 모두 선택함. |
| :input | <input>, <textarea>, <select>, <button>요소를 모두 선택함. |
| :checked | type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함. |
| :selected | <option>요소 중에서 선택된 요소를 모두 선택함. |
| :focus | 현재 포커스가 가지고 있는 요소를 선택함. |
| :disabled | 비활성화되어있는 요소를 모두 선택함. |
| :enabled | 활성화되어있는 요소를 모두 선택함. |
반응형