jQuery 선택자

모든 요소 선택하기

아래의 코드는 jQuery를 사용하여 웹페이지의 모든 요소를 선택하고 외각선을 1px solid blue로 설정하는 예제입니다.

$(function(){
    // * : 전체 선택자
    //  전체 태그를 선택해서 외곽선 1px solid blue로 변경
    $("*").css("border", "1px solid blue");
});

위 코드는 $("*")를 사용하여 페이지 내의 모든 요소를 선택하고, css("border", "1px solid blue")를 사용하여 선택한 모든 요소의 외곽선 스타일을 변경합니다.

id를 사용하여 요소 선택하기

$(function(){
    // id가 "tit"인 요소를 선택하고 스타일을 변경
    $("#tit").css("background-color", "#ff0")
              .css("border", "2px solid black");
});

위 코드에서는 $("#tit")를 사용하여 id가 "tit"인 요소를 선택하고, css("background-color", "#ff0" 와 css("border", "2px solid black")를 사용하여 배경색과 테두리 스타일을 변경합니다.

일치 선택자 사용

일치 선택자는 특정 조건을 충족하는 요소를 선택하는데 사용 됩니다.

$(function(){
    // class가 "tit"인 h1 요소를 선택하고 스타일 변경
    $("h1.tit").css("background-color", "#0ff")
              .css("border", "2px dashed #f00");
});

위 코드에서는 $("h1.tit")를 사용하여 class가 "tit"인 h1 요소를 선택하고, css("background-color", "#0ff" 와 css("border", "2px dashed #f00")를 사용하여 배경색과 테두리 스타일을 변경합니다.

인접 관계 선택자(부모)

인접관계 선택자는 특정 요소의 부모,자식,형제 요소 등과의 관계를 활용하여 요소를 선택하는데 사용 됩니다.

$(function(){
    // id가 "list_1"인 요소의 부모 요소를 선택하고 스타일 변경
    $("#list_1").parent().css("border", "2px dashed #f00");
});

위 코드에서 $("#list_1").parent()를 사용하여 id가 "list_1"인 요소의 부모 요소를 선택하고, 선택된 부모 요소에 css("border", "2px dashed #f00")를 적용하여 테두리 스타일을 변경합니다.

하위 요소 선택자(자식)

하위 요소 선택자를 사용하면 특정 부모 요소 아래에 있는 모든 하위 요소들을 선택할 수 있습니다.

$(function(){
    // id가 "wrap"인 요소의 하위 section 아래 자식 태그들 선택
    $("#wrap > section")
        .children()
        .css("background-color", "yellow")
        .css("border", "2px dashed #f00");
});

위 코드에서 $("#wrap > section").children()를 사용하여 id가 "wrap"인 요소의 하위 section 아래에 있는 모든 자식 요소들을 선택하고, 선택된 자식 요소들에 css() 함수를 사용하여 스타일을 변경합니다.

인접 관계 선택자(형제)

$(function(){
    // class가 "txt"인 요소 앞에 있는 형제 요소 선택
    $(".txt").prev()
        .css("background-color", "#0ff");

    // class가 "txt"인 요소 뒤에 있는 형제 요소 선택
    $(".txt").next()
        .css("border", "2px dashed #f00");
});

위 코드에서 .prev() 함수를 사용하여 class가 "txt"인 요소 앞에 있는 형제 요소를 선택하고, .next() 함수를 사용하여 뒤에 있는 형제 요소를 선택합니다. 선택된 형제 요소들에 css() 함수를 사용하여 스타일을 변경합니다.

prevAll()과 nextAll() 함수

prevAll() 함수는 특정 요소의 앞에 있는 모든 형제 요소를 선택합니다. 반면, nextAll() 함수는 특정 요소의 뒤에 있는 모든 형제 요소를 선택합니다. 

$(function(){
    // class가 "txt"인 요소 앞에 있는 모든 형제 요소 선택
    $(".txt").prevAll()
        .css("background-color", "#ff0")
        .css("border", "2px dashed #f00");

    // class가 "txt"인 요소 뒤에 있는 모든 형제 요소 선택
    $(".txt").nextAll()
        .css("border", "2px dashed #f00")
        .css("background-color", "#0ff");
});

위 코드에서 .prevAll() 함수를 사용하여 class가 "txt"인 요소 앞에 있는 모든 형제 요소를 선택하고, .nextAll() 함수를 사용하여 뒤에 있는 모든 형제 요소를 선택합니다. 선택된 형제 요소들에 css() 함수를 사용하여 스타일을 변경합니다.

siblings() 함수

siblings() 함수는 특정 요소의 모든 형제 요소를 선택합니다. 

$(function(){
    // class가 "txt"인 요소의 모든 형제 요소 선택
    $(".txt").siblings()
            .css("background-color", "#ff0")
            .css("border", "2px dashed #f00");
});

위 코드에서 .siblings() 함수를 사용하여 class가 "txt"인 요소의 모든 형제 요소를 선택하고, 선택된 형제 요소들에 css() 함수를 사용하여 스타일을 변경합니다.

prevUntil() 함수

prevUntil() 함수는 주어진 대상 요소(타겟 요소) 이전에 위치한 요소들을 선택합니다. 이 함수를 사용하면 주어진 요소와 대상 요소 사이의 요소들을 선택하고 조작할 수 있습니다. 

$(function(){
    // class가 "txt3"인 요소로부터 class가 "title"인 요소 이전의 요소 선택
    $(".txt3").prevUntil(".title")
            .css("background-color", "#ff0")
            .css("border", "2px dashed #f00");
})

nextUntil() 함수

nextUntil() 함수는 주어진 대상 요소(타겟 요소) 이후에 위치한 요소들을 선택합니다. 이 함수를 사용하면 주어진 요소와 대상 요소 사이의 요소들을 선택하고 조작할 수 있습니다. 

$(function(){
    // class가 "txt3"인 요소로부터 class가 "txt6"인 요소 이전의 요소 선택
    $(".txt3").nextUntil(".txt6")
            .css("background-color", "#0ff")
            .css("border", "2px dashed #f00");
})

parents() 함수

parents() 함수는 선택한 요소의 모든 상위 요소를 선택합니다. 이 함수를 사용하면 주어진 요소와 그 상위 요소 사이에 있는 모든 부모 요소를 선택하고 스타일을 변경할 수 있습니다.

$(function(){
    // class가 "txt1"인 요소로부터 모든 상위 요소 선택
    $(".txt1").parents()
            .css("border", "2px dashed #f00");
})

closest() 함수

closest() 함수는 선택한 요소에서 시작하여 가장 가까운 부모 요소를 선택합니다. 이것은 주어진 요소와 그 가장 가까운 부모 요소 간의 관계를 이해하고 특정한 조작을 수행하는 데 유용합니다.

$(function(){
    // 클래스가 "txt1"인 요소로부터 가장 가까운 상위 div 요소 선택
    $(".txt1").closest("div")
            .css("border", "2px solid #f00");
})

짝수 번째 요소 선택

:even 선택자를 사용하여 HTML 목록에서 짝수 번째 요소를 선택

$(function(){
    $("li:even").css("background-color", "#ff0");
})

홀수번째 요소 선택

:odd선택자를 사용하여 HTML 목록에서 홀수번째 요소를 선택

$(function(){
    $("li:odd").css("background-color", "#0ff");
})

특정 인덱스 번호의 요소 선택

$(function(){
    $("#menu li").eq(2)
                    .css("background-color", "#ff0");
})

위 코드에서 eq(2)는 목록 내에서 2번째 인덱스에 해당하는 요소를 선택합니다. 인덱스는 0부터 시작하므로 위 코드는 목록 내의 세 번째 요소를 선택하여 배경색을 노란색(#ff0)으로 변경합니다.

특정 범위의 요소 선택 

$(function(){
    $("#menu li").slice(1, 3)
                    .css("background-color", "#ff0");
})

위 코드에서 slice(1, 3)는 목록 내에서 두 번째(1)부터 네 번째(3) 요소까지를 선택합니다. 인덱스 번호는 0부터 시작하므로, 이 코드는 두 번째부터 네 번째 요소까지를 선택하여 배경색을 노란색(#ff0)으로 변경합니다.