Karll 블로그

[Web] jQuery 셀렉터





#jquery         // id 선택자 
.tutorial // class 선택자
li // 엘리먼트 선택자
#jquery, #MYSQL // 다중 선택자

<ul id='list'>
    <li> HTML </li>
    <li> CSS </li>
    <li> javascript </li>
    <li> PHP </li>
    <li> MYSQL </li>
</ul>
#list li:eq(2)  // 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자    -> javascript
#list li:gt(1)  // 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자      -> javascript.PHP,MYSQL  
#list li:lt(2)  // 인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자    -> HTML,CSS
#list li:even   // 홀수의 인덱스 값을 가진 엘리먼트에 대한 선택자       -> HTML,javascript,MYSQL
#list li:odd    // 짝수의 인덱스 값을 가진 엘리먼트에 대한 선택자       -> CSS,PHP
#list li:first  // 첫번째 인덱스 엘리먼트에 대한 선택자                 -> HTML
#list li:last   // 마지막 인덱스 엘리먼트에 대한 선택자                 -> MYSQL

<ul id='attribute'>
    <li target='ABCD'>ABCD</li>
    <li target='BCDE'>BCDE</li>
    <li target='CDEF'>CDEF</li>
    <li target='DEFG'>DEFG</li>
    <li target='EFGH'>EFGH</li>
    <li id='FGHI' target='FGHI'>FGHI</li>
</ul>
[target*='BC']      // 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자                 -> ABCD,BCDE
[target='DEFG']     // 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자                 -> DEFG
[target!='DEFG']    // 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자            -> ABCD,BCDE,CDEF,EFGH,FGHI
[target^='B']       // 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자          -> BCDE
[target$='H']       // 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자    -> EFGH
[target]            // 속성이 존재하는 엘리먼트를 찾아내는 선택자                                   -> ABCD,BCDE,CDEF,DEFG,EFGH,FGHI
[target][id]        // 속성들이 존재하는 엘리먼트를 찾아내는 선택자                                 -> FGHI

<div>
    <input type='text' disabled='disabled' value='disabled'>
    <input type='text' value='enabled'>
</div>
<div><input type='checkbox' checked='checked'/></div>
<div><input type='checkbox'/></div>
[type='text']               // 폼 엘리먼트를 선택할때는 속성 셀렉터를 사용한다
[type='text']:disabled      // disabled 속성 값이 disabled인 엘리먼트를 찾아내는 선택자
[type='text']:enabled       // disabled 속성 값이 enabled인 엘리먼트를 찾아내는 선택자
input:checked               // 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자