jquery - 탐색 선택자

*first/last (첫 번째/마지막) 선택자

<ul id="menu">
  <li>내용1</li>
  <li>내용2</li>
  <li>내용3</li>
  <li>내용4</li>
</ul>


$(function(){
    $("#menu li:first").css({"background-color":"red"});   //빨간샌
    $("#menu li:last").css({"background-color":"blue"});    //파란색
});


결과
id menu를 가진 ul에 있는 li중 first 첫번째 요소인 내용1의 배경색이 빨간색됨

id menu를 가진 ul에 있는 li중 last 마지막 요소인 내용4의 배경색이 파란색이 됨

 

 

*even/odd (홀수/짝수) 선택자

※주의할 점 - even의 경우는 홀수번째의 내용을 바꾸지만 인덱스 번호로는 짝수로한다.(0번부터 시작)
                  odd의 경우는 짝수번째의 내용을 바꾸지만 인덱스 번호로는 홀수로한다.(1번부터 시작)

<ul id="menu">
  <li>내용1</li>
  <li>내용2</li>
  <li>내용3</li>
  <li>내용4</li>
</ul>

$(function(){ 
    $("#menu li:even").css({"background-color":"red"});  //인덱스번호 0번과 2번
    $("#menu li:odd").css({"background-color":"blue"});  //인덱스번호 1번과 3번
});


결과
even(홀수)에 해당하는 내용1과 내용3의 배경이 빨간색이 되고
odd(짝수)에 해당하는 내용2와 내용4의 배경이 빨간색이 된다

 

 

*eq(index)/lt(index)/gt(index) 탐색 선택자

1. eq(index) - index번호가 참조하는 요소를 불러옴
2. li:(index) - index번호보다 작은 요소를 불러옴
3. gt:(index) - index번호보다 큰 요소를 불러옴

<ul id="menu">
  <li>내용1</li>
  <li>내용2</li>
  <li>내용3</li>
  <li>내용4</li>
</ul>


$(function(){
    $("#menu li").eq(2).css({"background-color":"blue"});    //인덱스 2번에 해당하는것
    $("#menu li:lt(2)").css({"background-color":"red"});     //인덱스 2보다 작은것들
    $("#menu li:gt(1)").css({"background-color":"yellow"});  //인덱스 1보다 큰것들
});


결과
eq(2)는 인덱스 번호 2번에 해당하는 내용3의 배경이 파란색으로 바뀜

lt(2)는 인덱스 번호 2번보다 작은 인덱스 번째를 불러온다
즉 인덱스 번호 1번과 0번의 배경이 빨간색으로 바뀜

gt(1)은 인덱스 번호 1번보다 큰 인덱스 번째를 불러온다
즉 인덱스 번호 2번과 3번의 배경이 노란색으로 바뀜

 

 

*first-of-type/last-of-type (무리중 첫번째/무리중 마지막) 선택자

<h1>탐색 선택자</h1>
    <ul>
        <li>내용1-1</li>
        <li>내용1-2</li>
        <li>내용1-3</li>
    </ul>
    <ul>
        <li>내용2-1</li>
        <li>내용2-2</li>
        <li>내용2-3</li>
    </ul>


$(function(){
    $("li:first-of-type").css({"background-color":"red"});
    $("li:last-of-type").css({"background-color":"blue"});
});


결과
li:first-of-type는 ul 두개중 li요소 무리중에 첫번째 것들 선택
즉 내용1-1 과 내용2-1의 배경이 빨간색으로 바뀜

li:last-of-type는 ul 두개중 li요소 무리중에 마지막 것들 선택
즉 내용1-3 과 내용2-3의 배경이 파란색으로 바뀜

 

 

*nth-child(숫자n)/nth-last-of-type(숫자) 선택자

※인덱스 번호 아님

1. li:nth-child(2)는 선택한 요소 무리중 두번째 li 선택 (인덱스번호 아님)
2. li:nth-child(2n)은 선택한 요소 무리중 2의 배수 li 선택 (인덱스번호 아님)
3. li:nth-last-of-type(2)는 선택한 요소 무리를 뒤에서부터 선택 (인덱스번호 아님)

<ul id="menu">
  <li>내용1-1</li>
  <li>내용1-2</li>
  <li>내용1-3</li>
  <li>내용1-4</li>
  <li>내용1-5</li>
</ul>


$(function(){
    $("#menu li:nth-child(2)").css({"background-color":"red"});
    $("#menu li:nth-child(2n)").css({"background-color":"blue"});
    $("#menu li:nth-last-of-type(1)").css({"background-color":"yellow"});
});


결과
li:nth-child(2)는 li의 두번째가 선택됨 -- 내용1-2 배경이 빨간색이 됨
li:nth-child(2n)는 li의 2의 배수번째가 선택됨 -- 내용1-2와 내용1-4 배경이 파란색이 됨
li:nth-last-of-type(2)는 li를 뒤쪽부터 찾음 -- 뒤에서 2번째인 내용1-4 배경이 노란색이 됨

 

 

 

*only-child/slice(index) 선택자

1. only-child는 선택 요소가 부모 요소에게 하나뿐인 자식요소면 선택
2. silce(1, 4)일때 인덱스 번호 1번부터 4의 앞까지를 선택

<ul id="menu">
        <li>내용1-1</li>
        <li>내용1-2</li>
        <li>내용1-3</li>
        <li>내용1-4</li>
        <li>내용1-5</li>
    </ul>
    
    <ul>
        <li>자식1</li>
    </ul>
    
    <ul>
        <li>자식2</li>
    </ul>


$(function(){
    $("#menu li").slice(1, 4).css({"background-color":"blue"});    
    $("li:only-child").css({"background-color":"red"});
});


결과
slice(1,4)는 인덱스번호 1번과 4번앞까지가 선택됨
즉 내용1-2 내용1-3 내용1-4 의 배경이 파란색이 됨

li:only-child는 부모 요소에게 자식이 하나만 있을경우 선택
아래쪽 두개의 ul(부모)은 li(자식)이 하나 씩만 있기때문에 선택됨
즉 자식1 자식2 의 배경색이 빨간색이 됨