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

**다음과 같이 css 파일에서 사용했던 표현식이 바로 CSS 셀렉터
**
<code css>
div p {
    font-color:red;
}

#loginID {
    font-weight:bold;
    background:yellow;
}

.Columns {
    padding:10px;
    background:white;
}
</code>
div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며, \\ 
#loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용

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

jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에, \\
위의 3가지 셀렉터를 다음과 같이 사용할 수 있다. 
<code css>
$("div p") 혹은 jQuery("div p")
$("#loginID") 혹은 jQuery("#loginID")
$(".Columns") 혹은 jQuery(".Columns")
</code> 


또한, jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원한다. \\
  * 계층 셀렉터 
  * 일반 필터 셀렉터
  * 어트리뷰트 필터 셀렉터 등

**계층 셀렉터 예**

<code>
p > a : p 요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제 p 요소와 일치된다.
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치된다. 
</code>
$("p a")와 $("p > a")의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면, \\ 
후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이이다. 

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

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

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

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

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

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

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

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

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

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