검색결과 리스트
글
jQuery 선택자
개발/jQuery
2017. 7. 12. 09:23
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Element Selection</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$("button").on("click", function() {
$("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
});
});
</script>
</head>
<body>
<h1>선택한 요소의 필터링</h1>
<ul>
<li>첫 번째 아이템이에요!</li>
<li><span>두 번째</span> 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
</ul>
<button>필터링</button>
</body>
</html>
위 소스에서 필터링 이란 버튼을 클릭하면 li 태그 중 span을 가지고 있는 두번째 아이템의 텍스트가 변경 된다.
| 선택자 | 설명 |
|---|---|
| :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 | 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함. |
출처 : tcp스쿨
'개발 > jQuery' 카테고리의 다른 글
| 대표적인 getter 메소드와 setter 메소드 (0) | 2017.07.12 |
|---|---|
| input 요소 선택 (0) | 2017.07.12 |
| 비슷한 ID 가져오기 (0) | 2017.07.07 |
| jQuery - select box 선택값 가져오기 (0) | 2017.01.18 |
| jQuery - serialize()란? 사용방법 (0) | 2017.01.18 |
