study:php:jquery

jQuery 셀렉터 : 기본

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 링크만을 선택한다는 것

다음과 같은 html 있다고 가정할 경우에, div + p 및 div ~ p오 ㅏ같은 경우는 자식이 아니라 형제 요소와 연관이 있다.

<div>앨범 목록</div>
<p>노라조</p>
<span>수퍼맨</span>
<p>이적</p>
<span>다행이다</span>
<p>현진영</p>
<span>Break me down</span>

$(“div + p”)는 div 바로 다음에 나오는 형제 수준의 p 요소, 즉, “노라조”를 선택하게 되는 반면,
$(“div ~ p”)는 div 요소 다음에 나오는 형제 요소들 중 모든 p 요소, 즉, “노라조”, “이적”, “현진영”과 일치된다.

더불어, a[title]이나 a[href^=“mailto:”]와 같이 어트리뷰트를 기반으로 하는 필터링도 가능하다.
특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지 비교해서 선택할 수 있다.

다음은 이러한 어트리뷰트 필러의 예

a[title] : title 어트리뷰트를 갖는 하이퍼 링크와 일치된다.
a[href^="mailto:"] : href 값이 mailto로 시작하는 하이퍼 링크와 일치된다.
a[href$=".pdf"] : pdf 파일에 링크가 걸린 모든 하이퍼링크와 일치된다.
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 모든 하이퍼 링크와 일치된다.
input[type="text"] : text 형식의 입력 컨트롤과 일치된다.

이러한 선택이 가능한 것은 시작부분(^) 혹은 끝부분($)을 가리키는 정규 표현식을 jQuery가 지원하기 때문이다.

출처 : http://www.taeyo.pe.kr/Columns/View.aspx?SEQ=354&PSEQ=29&IDX=0