[jQuery기초] 선택자(Selector)

 

Javascript VS jQuery

Javscript API에 비해 jQuery는 선택자를 사용하여 DOM(Document Object Model) 요소에 쉽고 편리하게 접근할 수 있다.

// Javascript
document.getElementById('container');
document.querySelector('#container');

// jQuery
$('#container')

 

아래는 기초적인 선택자만 작성하였으므로 모든 선택자를 확인하려면 jQuery 사이트 참조

 

 

직접 선택자

아이디 (#) 

id는 페이지내에서 유일해야한다.

// Html
<div id="container">
    <div class="nav"></div>
</div>
 
// jQuery
$('#container')

 

클래스 (.)

동일한 클래스를 가진 복수의 요소가 될 수 있다.

// Html
<div class="box">
    <div class="items">
    <div class="items">
</div>
 
// jQuery
$('.box')
$('.items') // 복수의 요소가 됨

 

태그

동일한 태그를 가진 복수의 요소가 될 수 있다.

// Html
<div id="container"></div>
<div class="footer">
    <a href=".."></a>
</div>
 
// jQuery
$('div') // 복수의 요소가 됨
$('a')

 

속성 ([])

동일한 태그의 속성에 접근 할 경우 복수의 요소가 될 수 있다.

// Html
<div data-type="number">
    <a href="./main/index.html"></a>
</div>
 
// jQuery
$('a[href]')
$('div[data-type]')

 

속성 일치 (=)

// Html
<form>
    <input type="tel" name="phoneNumber">
    <input type="text" data-type="desc">
</form>
 
// jQuery
$('input[name="phoneNumber"]')
$('input[data-type"desc"]')

 

속성 불일치 (!)

// Html
<form>
    <input type="tel" name="phoneNumber">
</form>
 
// jQuery
$('input[name!="phoneNumber"]')

 

속성 선택 값으로 시작 (^)

// Html
<form>
    <input type="tel" name="phoneNumber">
</form>
 
// jQuery
$('input[name^="phone"]')

 

속성 선택 값으로 종료 ($)

// Html 
<form> 
    <input type="tel" name="phoneNumber"> 
    <input type="tel" name="userNumber"> 
</form> 
  
// jQuery 
$('input[name$="Number"]')

 

속성 선택 값과 일치하거나 선택 값 뒤에 '-'를 붙여 시작하는 값 (|)

// Html
<form>
    <input type="tel" name="phone-number">
    <input type="tel" name="phone-type">
</form>
 
// jQuery
$('input[name|="phone"]') // 복수의 요소가 됨

 

속성 선택 값을 포함하고 있음 (*)

// Html
<img src="./assets/image/@sample.png">
<img src="../@today.png">
 
// jQuery
$('img[src*="@"]') // 복수의 요소가 됨

 

속성 선택 값 중에 일치하는 단어가 있음 (~)

// Html
<div class="header nav"></div>
<div class="footer nav last_container"></div>
 
// jQuery
$('div[class~="nav"]') // 복수의 요소가 됨

 

복수 속성

// Html
<input type="text" data-value="C0808" name="userID">
<input type="text" data-value="C0824" name="userID">
 
// jQuery
$('input[data-value][name="userID"]') // 복수의 요소가 됨

 

 

인접관계 

선택자자식 선택자 (>)

// Html
<div id="header">
    <div>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
 
// jQuery
$('#header > div')
$('ul > li') // 복수의 요소가 됨

 

자식, 후손 선택자

해당하는 태그 아래 일치하는 모든 태그

// Html
<div id="header">
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>
 
// jQuery
$('#header div') // 복수의 요소가 됨

 

형제자매 선택자 (+, ~)

선택자 + 선택자 : 다음에 오는 하나의 태그

선택자 ~ 선택자 : 형제 자매 중 일치하는 모든 것

// Html
<div>
    <div class="box"></div>
    <div></div>
    <div></div>
</div>
 
// jQuery
$('.box + div')
$('.box ~ div') // 복수의 요소가 됨

 

가상선택자(pseudo selector) (:)

input type

// Html
<input type="input">
<input type="button">
<input type="image">
<input type="radio">
<input type="checkbox">
 
// jQuery
$(':input')
$(':button')
$(':image')
$(':radio')
$(':checkbox')

 

순서(형제, 자매, 부모)

구문

$(':odd') // 홀수 (index의 시작 = 0)
$('.box > :even') // 짝수 (index의 시작 = 0)
$(':gt(인덱스)') // 해당하는 인덱스 초과 (index의 시작 = 0)
$(':lt(인덱스)') // 해당하는 인덱스 미만 (index의 시작 = 0)
$(':eq(인덱스)') // 해당 인덱스에 맞는 번째 (index의 시작 = 0)
$(':first') // 선택자를 기준으로 첫번째
$(':last') // 선택자를 기준으로 마지막
$(':first-child') // 첫번째*
$(':last-child') // 마지막*
$(':nth-child(인덱스)') // 해당 인덱스에 맞는 번째* (index의 시작 = 1)
$(':nth-of-type(인덱스)') // 해당 인덱스에 맞는 번째 (index의 시작 = 1)

*표시는 형제, 자매 태그들이 순서 기준에 영향을 줌을 뜻하므로 예제 참고

 

예제

// Html
<div class="box">
    <div>
        1번
        <div>1-1번</div>
        <div>1-2번</div>
    </div>   
    <p>p다</p>
    <div>2번</div>
    <div>
        3번
        <div>3-1번</div>
        <div>3-2번</div>
    </div>
</div>
 
// jQuery
$('.box > div:odd') // 2번
$('.box > div:even') // 1번, 3번
$('.box > div:gt(1)') // 3번
$('.box > div:lt(1)') // 1번
$('.box div:eq(1)') // 1-1번
$('.box > div:eq(1)') // 2번
 
$('.box div:first') // 1번
$('.box div:last') // 3-2번
 
$('.box > div:first-child') // 1번
$('.box div:first-child') // 1번, 1-1번, 3-1번
 
$('.box > div:last-child') // 3번
$('.box div:last-child') // 1-2번, 3번, 3-2번
 
$('.box div:nth-child(1)') // 1번, 1-1번, 3-1번
$('.box div:nth-child(2)') // 1-2번, 3-2번
$('.box div:nth-child(3)') // 2번
 
$('.box div:nth-of-type(1)') // 1번, 1-1번, 3-1번
$('.box div:nth-of-type(2)') // 1-2번, 2번, 3-2번
$('.box div:nth-of-type(3)') // 3번

 

그외

// jQuery
$(':selected') // select박스 선택
$(':checked') // check박스 선택
 
$(':has(선택자)')
$(':contains(텍스트)')
 
$(':focus') // 포커스
$(':visible') // 투명상태가 아닌
$(':enabled') $(':disabled') // 활성화, 비활성화
$(':hidden') // 감춰진 상태

 

조합 예시

$('#header ul[class~="nav"] li')
$('.box .items > button:focus')
$('.box + .box')
$('section#container > .slide:nth-of-type(3)')