[ JQuery ] 제이쿼리 셀렉터 ( Selector ) ID, CLASS로 찾기

 

 

셀렉터(Selector)란?

이전 포스팅에서 JQuery 를 사용하는 이유가 엘리먼트를 쉽게 선택하고 이를 제어하기 위함이라 언급했다.

 

여기서 말한 엘리먼트를 쉽게 선택할 수 있도록 해주는 녀석이 바로 Selector 이다.

 

JQuery 를 사용하는 가장 큰 이유가 이 Selector 라는 놈을 사용하기 위해서라고 해도 손색이 없다.

 

서론은 그만하고, 본론으로 넘어가보자.

 

 

 

HTML 에선 태그들에게 id, class 등을 아래와 같이 선언하곤 하는데,

<div>
    <div id="testId">AAAAA</div>
    <div class="testClass">BBBBB</div>
</div>

 

기존의 JavaScript 로 위의 엘리먼트들의 html 값을 뽑아내고 싶다면

 

getElementById, getElementsByClassName 등을 이용했을 것이다.

 

 

 

 

하지만 JQuery 는 저렇게 할 필요 없이 id 는 "#" 으로, class 는 "." 으로 선택할 수 있게 해준다,

 

Selector 는 $( ) 형태로 사용되며, 이를 사용한 아래의 예제를 보면 이해가 갈 것이다.

$(function() {

    //Id 로 찾기
    var idHtml = $("#testId").html();
    
    //Class 로 찾기
    var classHtml = $(".testClass").html();
    
    console.log(idHtml); //AAAAA
    console.log(classHtml); //BBBBB
    
});

 

또한 name 으로 찾고 싶다면? 아래와 같이 선언해 찾을 수 있다.

$(function() {

    //name "A" 를 가진 input 태그를 찾아 html 값 가져오기
    var aHtml = $("input[name=A]").html();
    
    //name "B" 를 가진 div 태그를 찾아 html 값 가져오기
    var bHtml = $("div[name=B]").html();

});

 

 

다음으로, 이러한 Selector 를 어떤 기반에 맞춰 사용하냐에 따라 능동적으로 사용이 가능한데,

 

어떤 식으로 사용할 수 있는지 여러 방법들을 살펴보자.

 

 

 

관계에 기반한 Selector

엘리먼트 간에 부모, 자식, 형제와 같은 관계에 기반해 사용할 수 있다.

// 선택한 엘리먼트의 부모 엘리먼트 선택
$('선택자').parent();

// 선택한 엘리먼트의 자식 엘리먼트 선택
$('선택자').children();

// 선택한 엘리먼트의 바로 다음 차례에 위치한 엘리먼트 선택
$('선택자').next();

// 선택한 엘리먼트의 바로 이전 차례에 위치한 엘리먼트 선택
$('선택자').prev();

 

 

 

조건에 기반한 Selector

엘리먼트를 찾을 때 해당 조건을 충족하는 엘리먼트만 선택할 수 있다.

//선택한 엘리먼트의 컨텐츠 내 값이 "AAAAA" 이면 엘리먼트 선택
$('A element: contains("AAAAA")')

//선택한 엘리먼트의 아이디가 "testId" 가 아니면 엘리먼트 선택
$('A element: not("#testId")')

 

 

 

인덱스에 기반한 Selector

복수의 엘리먼트들을 가지고 0 인덱스부터 시작해 인덱스를 가지고 선택할 수 있다.

//선택한 엘리먼트 중 해당 인덱스에 해당하는 엘리먼트 선택
$('선택자: eq(index)')

//선택한 엘리먼트 중 제일 첫 번째 인덱스에 해당하는 엘리먼트 선택
$('선택자: first')

//선택한 엘리먼트 중 제일 마지막 인덱스에 해당하는 엘리먼트 선택
$('선택자: last')

//선택한 엘리먼트 중 인덱스보다 큰 인덱스에 해당하는 엘리먼트 선택
$('선택자: gt(index)')

//선택한 엘리먼트 중 인덱스보다 작은 인덱스에 해당하는 엘리먼트 선택
$('선택자: lt(index)')

 

이 외에도 input 등 속성으로도 선택할 수 있고, find( ) 등을 통해서도 가능하다.

 

참고자료야 인터넷에 워낙 많이 올라와있으니 jquery selector 라고 검색만 해도 쉽게 참고할 수 있다.

 

이러한 Selector 를 이용하면 이벤트를 달기도 수월할 뿐더러 보다 간결하게 엘리먼트에 접근도 가능하다.

 

이상으로 Selector 포스팅을 마친다.