[jQuery] 선택자 (Selectors)

jQuery는 엘리먼트 오브젝트를 전달하는 것보다 CSS스타일 선택자를 전달하는 경우가 많다. 
-> 효과적으로 엘리먼트를 선택할 수 있기 때문.

 

- Basic

<ul id="tutorials">
	<li class="tutorial  id="HTML"> HTML </li>
	<li class="tutorial" id="CSS"> CSS </li>
	<li class="tutorial" id="javascript"> javascript </li>
	<li class="tutorial" id="jquery"> jQuery </li>
	<li class="tutorial" id="PHP"> PHP </li>
	<li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>

$('#jquery') : id 선택자
$('.tutorial') : class 선택자
$('li') : 엘리먼트 선택자
$('#jquery, #MYSQL') : 다중 선택자

 

 

- filter

<ul id="list">
    <li> HTML </li>
    <li> CSS </li>
    <li> javascript </li>
    <li> PHP </li>
    <li> MYSQL </li>
</ul>

#list li:eq(2) : 인자와 인덱스가 동일하 엘리먼트를 찾아내는 선택자
#list li:gt(1) : 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
#list li:lt(2) : 인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
#list li:even : 홀수의 인덱스 값을 가진 엘리먼트에 대한 선택자
#list li:odd : 짝수의 인덱스 값을 가진 엘리먼트에 대한 선택자
#list li:first : 첫번쨰 인덱스 엘리먼트에 대한 선택자
#list li:last : 마지막 인덱스 엘리먼트에 대한 선택자

 

 

- 속성

<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"] : 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자
[target="DEFG"] : 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자
[target!="DEFG"] : 주어진 문자열이 일치하지 않는 엘리먼트를 찾아해는 선택자
[target^="B"] : 주어진 문자열이 처음 등장하는 얼리먼트를 찾아내는 선택자
[target$="H"] : 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자
[target] : 속성이 존재하는 엘리먼트를 찾아내는 선택자
[target] [id] : 속성들이 존재하는 엘리먼트를 찾아내는 선택자

 

 

- Form

<div class="live">
    <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>
</div>

[type="text"] : 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. type이 text인 엘리먼트를 찾아내는 선택자
[type="text"]:disabled : type이 text고 disabled 속성이 disabled인 엘리먼트를 찾아내는 선택자
[type="text"]:enabled : type이 text고 disabled 속성이 enabled인 엘리먼트를 찾아내는 선택자
input:checked : 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자