jQuery 선택자(ID, CLASS, TAG, 속성)

jQuery 선택자(ID, CLASS, TAG, 속성)

1. 아이디 이름으로 노드 찾기

2. 클래스 이름으로 노드 찾기

3. 태그 이름으로 노드 찾기

4. 속성으로 노드 찾기

노드 찾기 예제를 위해 아래 HTML코드가 있습니다.

<div id="samplePage" class="page" >
    샘플 페이지(div, id=samplePage, class=page)
    <div id="header">               
        헤더 영역(div, id=header)
    </div>
    <div id="content" class="sample-content">
        노드 찾기(div, id=content, class=sample-content)
        <ul class="menu">
            일반 노드 찾기(ul, class=menu)
            <li data-value="1">id로 찾기(li, data-value=1)</li>
            <li class="select">tag로 찾기(li, class=select)</li>
            <li data-value="2">class로 찾기(li, data-value=2)</li>
            <li class="test1">속성으로 찾기(li, class=test1)</li>
        </ul>
        <div class="content-data">
            자식 노드 찾기(div, class=content-data)
            <p class="test1">1. 모든 자식 노드 찾기(p, class=test1)</p>
            <p>2. 특정 자식 노드만 찾기(p)</p>
            <p class="test2">3. 마지막 자식 노드 찾기(p, class=test2)</p>
        </div>
    </div>
    <div id="footer">               
        푸터 영역(div, id=footer)
    </div>      
</div>

---

1. 아이디 이름으로 노드 찾기

아이디 이름으로 노드를 찾을 때에는 #을 사용하여 아이디를 찾을 수 있습니다. 방법은 $("#아이디 이름")으로 노드를 찾습니다. 

예를들어 id가 samplePage인 노드를 선택하려면 아래와 같이 코드를 작성해야 합니다.

$("#samplePage")

---

2. 클래스 이름으로 노드 찾기

클래스 이름으로 노드를 찾을 때에는 .(점)을 사용하여 아이디를 찾을 수 있습니다. 방법은 $(".클래스 이름")으로 노드를 찾습니다.

예를들어 클래스가 sample-content인 노드를 선택하려면 아래와 같이 코드를 작성해야 합니다.

$(".sample-content")

---

3. 태그 이름으로 노드 찾기

태그 이름으로 노드를 찾을 때에는 아이디와 클래스를 찾을 때 # 또는 .(점) 과 같은 특수문자를 사용하는 것이 아니라 바로 태그 이름을 넣으면 됩니다. 즉 $("태그 이름") 으로 노드를 찾습니다. 예를 들어 li인 태그를 찾으려면 아래와 같이 코드를 작성해야 합니다.

$("li")    

주의해야 할 점은 태그 이름에 해당하는 노드가 1개 이상일 수가 있습니다. 위의 예제와 같이 li태그는 여러개가 있을 수 있다. 위 예제처럼 찾게 되면 li태그를 다 선택하게 됩니다.

---

4. 속성으로 노드 찾기

속성으로 노드를 찾을 때에는 속성 옵션을 이용하여 해당 노드를 찾을 수가 있습니다. 

$("E[A]")	속성 A를 포함한 모든 E노드 찾기
$("E[A=V]")	속성 A의 값이 V인 모든 E노드 찾기
$("E[A^=V")	속성 A값이 V로 시작하는 모든 E노드 찾기
$("E[A$=V")	속성 A값이 V로 끝나는 모든 E노드 찾기
$("E[A*=V")	속성 A값이 V를 포함하고 있는 모든 E노드 찾기

//클래스가 적용된 모든 노드를 찾아 CSS 변경
$("[class]").css("border", solid #f00);
 
//클래스 이름에 test라는 단어가 포함된 모든 노드를 찾아 CSS 변경
$("[class*=test]").css("border", solid #f00);