[제이쿼리] - ★ 탐색 선택자 / 위치 탐색 선택자 (first , last , even , odd )

  ★ 탐색 선택자  

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 
더 정확하게 선택할 수 있다.
대표적인 탐색 선택자는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 
지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다.  
이 외에도 컨텐츠의 포함 여부로 다시 선택할 수 있는 '컨텐츠 탐색 선택자'와 '필터링 선택자'도 있다. 

---

 위치 탐색 선택자 

 

: 기본 선택자로 태그 요소를 선택하면 이 요소들은 배열에 담긴다.☆ 
이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다. 

 1. first / last 선택자
: first 선택자는 선택된 요소 중 첫 번째 요소만 선택하고, last 선택자는 요소 중 마지막 요소만 선택한다. 

 [기본형]
$('요소 선택:first') 또는 $('요소 선택').first()
$('요소 선택:last') 또는 $('요소 선택').last()

인수를 넘겨줘야한다던가 함수를 동작시켜야한다면 두번째 매서드 형태를 사용한다.
           

 2. even/odd 선택자
: even 선택자는 선택한 요소 중 홀수번째에 위치한 요소를 선택할 때 쓴다. 
odd 선택자는 선택한 요소 중 짝수번째에 위치한 요소를 선택할 때 쓴다. 

 [기본형]
$('요소선택:even') : 홀수번째(인덱스번호로는 짝수 인덱스)
$('요소선택:even') : 짝수번째(홀수인덱스)

 <ul id="menu">

      <li>내용1</li>

      <li>내용2</li>

      <li>내용3</li>

      <li>내용4</li>

    </ul>

 //li의 첫번째와 마지막 요소 선택

        $("li:first").css("color", "blue");

        $("li").last().css("color", "green");

        //li중 홀수번째와 짝수번째 선택

        $("li:even").css("background-color", "lightblue");

        $("li:odd").css("background-color", "beige");