[제이쿼리/jQuery] 필터셀렉터(:) . :first :last :even :odd :eq :gt :lt :has :not

요약

 :fitst

첫번째로 일치하는 요소를 가져온다.

 :last

마지막으로 일치하는 요소를 가져온다.

 :even

짝수번째 요소를 모두 가져온다 ( first index : 0 )

 :odd

홀수번째 요소를 모두 가져온다 ( first index : 0 )

 :eq(index)

 인자로 전달된 index에 해당하는 요소를 가져온다. ( first index : 0 )

 :gt(index)

인자로 전달된 index 보다 큰 index를 가진 요소를 모두 가져온다.

 :lt(index)

인자로 전달된 index 보다 작은 index를 가진 요소를 모두 가져온다.

 :has(selector)

인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져온다.

 :not(selector)

인자로 전달된 selector 와 일치하지 않는 모든요소를 가져온다.

  

HTML

	
	

		

			
1-0
			
1-1
			
1-2
			
		
	
	

		

			
2-0
			
2-1
			
2-2
		
	

첫번째 일치하는 요소 찾기(":first")

---

아래 예제는 .middle >ul > li 요소중 첫번째 요소를 가져옵니다.

				$(".middle>ul>li:first").css("border","1px solid #ff0000")

결과

마지막으로 일치하는 요소 찾기(":last")

---

아래 예제는 .top > ul > li 요소중 마지막 요소를 가져옵니다.

				$(".top>ul>li:last").css("border","1px solid #ff0000")

결과

짝수번째 요소 찾기 (":even")

---

아래 예제는 li 요소중 짝수번째 요소를 모두 가져옵니다.

index는 0부터시작하여 0, 2, 4, 6 ... 번째 요소를 가져옵니다.

				$("li:even").css("border","1px solid #ff0000")

결과

홀수번째 요소 찾기 (":odd")

---

아래 예제는 li 요소중 홀수번째 요소를 모두 가져옵니다.

index는 0부터시작하여 1, 3, 5, 7 ... 번째 요소를 가져옵니다.

				$("li:odd").css("border","1px solid #ff0000")

결과

인덱스에 위치한 요소 찾기 (":eq(index)")

---

아래 예제는 li 3번째 요소를 가져옵니다.

index는 0부터시작합니다.

				$("li:eq(3)").css("border","1px solid #ff0000")

결과

인덱스 보다 큰 요소 찾기 (":gt(index)")

---

아래 예제는 index가 2보다 큰 요소를 가져오며,  inex는 0부터시작합니다.

( index > 2) 즉 3, 4, 5 번째 요소를 가져옵니다. 

				$("li:gt(2)").css("border","1px solid #ff0000")

결과

인덱스 보다 작은 요소 찾기 (":lt(index)")

---

아래 예제는 index가 2보다 작은 요소를 가져오며,  inex는 0부터시작합니다.

( index < 2 ) 즉 0, 1 번째 요소를 가져옵니다. 

				$("li:lt(2)").css("border","1px solid #ff0000")

결과

selector 요소를 하나이상 포함한 요소 찾기 (":has(selector)")

---

아래 예제는 div 의 전체하위속성중 class="el" 이 하나이상 포함된 div요소를 찾습니다.

따라서 class="el" 은 #top div 가 가지고 있기 때문에 #top div 에 css 가 적용됩니다.

				$("div:has('.el')").css("border","1px solid #ff0000")

결과

selector 와 일치하지 않는 요소 찾기 (":not(selector)")

---

아래 예제는 li 요소중 class="el" 이 아닌 모든 요소를 가져옵니다.

따라서 #top>ul>li 의 첫번째 요소를 제외한 전체 요소에 css 가 적용됩니다.

				$("li:not(.el)").css("border","1px solid #ff0000") 

결과