2. 선택자(Selector)

1) 제어 대상 지정

$( 선택자 )

ex. $("#big")

$( element )

ex. $("body")

단, $는 jQuery로 대체될 수 있다.

2) 선택자 지정

Lv1:기본

#아이디

.클래스명

Lv2:필터

<ul id="list">
    <li> index[0] </li>
    <li> index[1] </li>
    <li> index[2] </li>
    <li> index[3] </li>
    <li> index[4] </li>
</ul>    

#list li:eq(2) ~> index[2] 선택됨

#list li:gt(1) ~> index[2~4] (greater than)

#list li:lt(2) ~> index[0~1] (less than)

#list li:even ~> index[0,2,4] (짝수)

#list li:odd ~> index[1,3] (홀수)

#list li:first ~> index[0]

Lv3:속성

<ul>
    <li name="abcd"> index[0] </li>
    <li name="bcde"> index[1] </li>
    <li name="cdef"> index[2] </li>
    <li name="defg"> index[3] </li>
    <li name="efgh" id="index4"> index[4] </li>
</ul>

[name] : 속성 중 name이 있는 것

[name*="bc"] : 속성값이 bc 포함

[name="defg"] : defg와 일치

[name!="defg"] : defg가 아닌 것 모두

[name^="d"] : d로 시작하는 것

[name$="d"] : d로 끝나는 것

[name~="bc"] : 속성값 중 value가 단어로 있는 것 예) class="box bc"

[name][id] : target, id 속성을 모두 갖고 있는 것

Lv4:입력폼

<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"] ~> input 폼 선택

[type="text"]:disabled  ~> disabled 속성값이 disabled인 것

input:checked ~> input 태그 중 체크가 된 것

lv5:기타

is() 해당 선택자가 있는지 확인(true 반환) <-> not()
hasClass() 해당 클래스가 있는지
    
**후손 선택자**
find(): 후손
    
**자신을 포함한 후손 선택자**
filter()
 
**부모 선택자**
parent(): 부모
parentsUntil(): 특정 부모 찾을 때까지
    
**형제 선택자**
siblings(): 형제 선택자 모두
prev(): 이전 형제
prevUntil(선택자): 특정 형제 찾을 때까지
$(a).prevUntil(b,c): a 형제 이전부터 b 중 c 요소
prevAll(): 이전 형제 모두 선택

<TIP>

class 속성은 띄어쓰기로 여러 선택자 만들 수 있다.

예)main container contents(선택자 3개)