티스토리 뷰

jQuery

[jQuery] 기본 필터 선택자

기본 필터 선택자

필터는 선태자 앞에 :(콜론)을 붙어 표현을 하며, 필터를 사용해 다양한 조건에 따라 선택할 수 있습니다.


기본 필터 선택자(Basic Filters)

기본 필터 선택자
종류 설명
:animated show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다.
:eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다.
:gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다.
:lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다.
:header 제목 요소(h1~h6) 태그들을 선택합니다.
:first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다.
:last 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다.
:odd 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다.
:even 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다.
:not() 현재 선택한 요소의 반대 요소를 선택합니다.
:root() 문서의 가장 기본 루트 태그를 선택합니다.
:lang() 선택된 요소 중에서 언어 속성을 선택합니다.
Sample : 기본 필터 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){        
            //$(".list li:eq(6)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" }); 
			//$(".list li:gt(5)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" }); 
			//$(".list li:lt(5)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" }); 
			//$(".list li:first").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			//$(".list li:last").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			//$(".list li:even").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			//$(".list li:odd").css({ backgroundColor:"#00c8c3", border:"1px dashed #01584d" });
			$(".list li:not(:eq(7))").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });  
        }); 
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul class="list2">
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li id="one10">one9</li>
			</ul>
			<ul class="list3">
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
			</ul>
		</div>   
	</body>
</html> 
댓글
댓글쓰기 폼