adminschool.net wiki

jQuery의 가장 강력한 부분은 HTML DOM을 마음대로 트래버스 즉, 순회 탐색할 수 있다는 것이다.
CSS 셀렉터를 사용하여 원하는 개체를 탐색할 수 있다.

다음과 같이 css 파일에서 사용했던 표현식이 바로 CSS 셀렉터

div p {
    font-color:red;
}
 
#loginID {
    font-weight:bold;
    background:yellow;
}
 
.Columns {
    padding:10px;
    background:white;
}

div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며,
#loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용

이러한 셀렉터를 그대로 jQuery에서 사용가능

jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에,
위의 3가지 셀렉터를 다음과 같이 사용할 수 있다.

$("div p") 혹은 jQuery("div p")
$("#loginID") 혹은 jQuery("#loginID")
$(".Columns") 혹은 jQuery(".Columns")

또한, jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원한다.

• 계층 셀렉터
• 일반 필터 셀렉터
• 어트리뷰트 필터 셀렉터 등

계층 셀렉터 예

p > a : p 요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제 p 요소와 일치된다.
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치된다. 

$(“p a”)와 $(“p > a”)의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면,
후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이이다.

즉, 다음과 같은 html이 존재한다면,

<p>
    <span>
        <a href="1.aspx">1.aspx</a>
    </span>
    <br />
    <a href="2.aspx">2.aspx</a>
 

</p>$(“p a”)는 1.aspx 링크와 2.aspx 링크 모두를 선택하지만, $(“p > a”)는 2.aspx 링크만을 선택한다는 것