1. 태그 셀렉터
$("h1").
html 문서내의 <h1>...</h1> 을 선택합니다.
<h1>헤드라인</h1>
2. id 셀렉터
$("#title").
html 태그요소중에 id="title" 인 요소를 선택합니다.
<h1 id="title">헤드라인</h1>
만약 h1 태그중에 id가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다.
$("h1#title").
3. class 셀렉터
$(".title").
html 태그요소중에 class="title" 인 요소를 선택합니다.
<h1 class="title">헤드라인</h1>
만약 h1 태그중에 class가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다.
$("h1.title").
4. 자손 셀렉터
자손이라고 하는 것은 특정 태그 내에 포함되어 있는 모든 태그 요소를 의미합니다.
<ul id="grand">
<li>아들 1</li>
<li>딸 1</li>
<li>
<ul id="parent">
<li>손자1</li>
<li>손녀1</li>
<ul>
</li>
</ul>
위 구조에서 아들1, 딸1, 손자1, 손녀1 모두 최상위 ul의 자손인거죠..ㅡ.ㅡ
위의 모든 li 요소들을 선택하기 위한 셀렉터는 아래와 같이 작성할 수 있습니다.
$("ul#grand li").
아이디가 grand 인 ul 의 하위에 있는 모든 li 요소를 선택한다는 의미입니다.
5. 자식 셀렉터
자식은 바로 아래에 있는 요소들을 의미합니다.
$("ul#parent > li").
이렇게 셀렉터를 작성하면, 바로 아래 단계의 손자1, 손녀1만 선택할 수 있습니다.
이건 예가 그닥 좋지는 않군요..ㅡ.ㅡ
5. 그룹 셀렉터
그룹은 여러개를 묶어놓으면 그룹인거죠.
쉽게 콤마(,)를 이용해서 나열해 주는 방법으로 선택할 수 있습니다.
$("h1, h2").
7. 유니버설 셀렉터
특정 요소 하위의 모든 요소를 선택할 수 있는 방법입니다.
$("ul#grand *").
8. 인접 셀렉터
인접은 바로 옆이라는 의미죠. 가장 가까이 있는 요소를 말합니다.
$("#first + li").
위와 같이 작성하면, id가 first 인 요소 다음에 가장 먼저 오는 li 요소를 선택할 수 있습니다.
9. first-child 셀렉터
말그대로 첫번째 자식을 선택할 수 있습니다.
$("li:first-child").
li는 ul의 자식요소인데, li가 여러개 있을 경우, 첫번째 li 요소를 선택합니다.
10. 간접셀렉터
특정 요소 뒤에 나타나는 모든 요소를 선택할 수 있습니다.
$("#second ~ li").
11. only-child 유사클래스 셀렉터
$("li span:only-child")
예)
<li><span>제이쿼리</span></li>
li 요소 안에 span 요소가 온리 하나뿐이면 선택됩니다. 자식이라곤 span 밖에 없는 li요소..
12. nth-child 유사클래스 셀렉터
$("li:nth-child(2)").
ul 하위 li들 중에 2번째 li를 선택합니다.
$("li:nth-child(even)").
ul 하위 li들 중에 짝수째 li를 선택합니다.
$("li:nth-child(odd)").
ul 하위 li들 중에 홀수째 li를 선택합니다.
$("li:nth-child(3n)").
ul 하위 li들 중에 3의 배수번째 li들을 선택합니다.
13. last-child 유사클래스 셀렉터
마지막 자식, 막내를 선택합니다.
$("li:last-child").
14. not 유사클래스 셀렉터
$("li:not(:first-child)").
not 으로 지정한 특성을 제외한 li요소들을 선택합니다.
15. empty 유사클래스 셀렉터
$("li:empty").
<li></li> 처럼 속 내용이 빈 요소를 선택합니다.
속성은 html 태그에 더해진 id, class 등을 의미합니다.
<li id="first" class="number" >블라블라</li>
id도 속성이고 해당 value는 first, class도 속성이고 해당 value 는 number 인거죠.
$("[속성]").
$("[id]").
html 태그 요소중에 id 라는 속성을 가진 요소들을 선택합니다.
$("[속성='값']").
$("[id='first']").
html 태그 요소중에 id값이 first 인 요소들을 선택합니다.
$("[속성!='값']").
$("[id=!'first']").
html 태그 요소중에 id값이 first 가 아닌 요소들을 선택합니다...만, 위와 같이 사용할 수 없고 반드시 해당 html태그를 명시해줘야합니다.
$("li[id=!'first']").
위 예는 li 요소중에 id가 first가 아닌 것들을 선택합니다.
$("[속성^='값']").
속성이 특정 문자열로 시작되는 요소들을 선택합니다.
$("[title^='f']").
태그중에 title 속성의 값이 f로 시작하는 태그 요소들을 선택합니다.
<li title='first'>블라블라</li>
$("[속성$='값']").
속성이 특정 문자열로 끝나는 요소들을 선택합니다.
$("[title$='d']").
태그중에 title 속성의 값이 d로 끝나는 태그 요소들을 선택합니다.
<li title='second'>블라블라</li>
$("[속성*='값']").
속성이 특정 문자열을 포함하는 요소들을 선택합니다.
$("[title*='u']").
태그중에 title 속성의 값이 u를 포함하는 태그 요소들을 선택합니다.
<li title='fourth'>블라블라</li>
위 속성 셀렉터를 중복으로 사용할 수 있습니다.
title속성이 f 로 시작하고, u를 포함하는 요소를 선택하고 싶으면 아래와 같이 할 수 있습니다.
$("[title^='f'][title*='u']").
class속성 중에 or 를 써서 사용하고 싶을때
$("[class*=info][class*=line]").
class속성 중 info와 line 두가지를 가지고 있는 element를 선택하고 싶을때
여기까지 내용은 CSS 에서 요소를 선택하는 방법과 같습니다. CSS 작성할 때 위와 같은 방법으로 요소들을 지정해 줄수 있습니다. 아! CSS3까지 포함된 내용입니다.
jQuery 자체 필터
그리고, jquery 자체 필터라는게 있습니다. jquery 가 지원하는 셀렉팅 방법이지요.
- first / last 필터
$("li:first") / $("li:last")
위와 같이 첫번째 li 요소와 마지막 li 요소를 선택할 수 있습니다.
first-child, last-child 와 의미가 비슷하죠? 하지만, 같은 방법을 굳이 만들었을리가..ㅡ.ㅡ
first-child와 last-child는 공통된 부모 요소 내에서 첫번째, 마지막을 골라내주는 것이고,
first, last 필터는 부모와 관계없이 페이지내에 존재하는 모든 태그들 중에서 첫번째, 마지막을 골라내주는 것입니다.
- even, odd 필터
$("li:even") / $("li:odd")
nth-child에서 even, odd 를 사용하는 것과 비슷하지만, 이 필터 역시 공통 부모의 의미가 없이 전체 태그들을 대상으로해서 짝수번째, 홀수번째를 골라내줍니다.
- eq, gt, lt 필터
eq 는 같다, gt는 뭐보다 크다, lt는 뭐보다 작다...의미입니다.
같은 종류의 태그가 여러개 있을 경우,
eq 는 몇번째 태그를 지정해주거나,
gt 는 몇번째 태그보다 큰것들을 모두 골라내거나,
lt 는 몇번째 태그보다 작은것들을 모두 골라내줍니다.
크고 작음을 어떻게 구분할까요?
같은 태그가 여러개 있을 경우, 첫번째 태그는 0번, 그 이후 1,2,3... 등으로 인덱스가 붙습니다. 인덱스가 0번부터 시작함에 주의해야합니다.
이 필터를 사용할 때는 이 인덱스 번호를 이용합니다.
$("li:eq(2)")
여러개의 li 요소중에 3번째 li요소를 선택합니다.
$("li:gt(2)")
여러개의 li 요소중에 인덱스 번호가 2보다 큰 li요소를 선택합니다. 4번째, 5번째...등등 골라내주는거죠.
$("li:lt(2)")
여러개의 li 요소중에 인덱스 번호가 2보다 작은 li요소를 선택합니다. 1번째, 2번째 li요소를 골라내주는거죠.
이 세가지 필터 모두 역시 공통 부모와 무관하게 전체 태그요소들을 대상으로 동작합니다.
- header 필터
$(":header") 로 사용해서 h1~h6 태그를 선택할 수 있습니다.
- contains / has 필터
contains 는 특정 문자열을 포함하고 있는지를 확인해서 선택하고, has 는 특정 태그를 포함하고 있는지를 확인해서 선택합니다.
<li>제이쿼리</li>의 경우, $("li:contains("제이")") 로 선택할 수 있습니다.
<li><strong>제이쿼리</strong></li> 는 strong이라는 태그를 포함하고 있으니까, 태그를 기준으로 선택하려면, 아래와 같이 has를 사용할 수 있습니다.
$("li:has(strong)").
- parent 필터
값을 가지고 있는 자식태그를 선택해 줍니다.
$("li:parent") 라고 작성하면, li 들 중에, 값을 가지고 있고, 어떤 태그의 자식 태그인 요소를 선택해줍니다.
li는 무조건 ul 태그의 자식 태그니까, 자식 태그라는 요건은 만족하고, 값을 가지고 있느냐를 더 확인을 하겠지요.
<ul>
<li>아들 1</li>
<li>딸 1</li>
<li></li>
</ul>
위 예에서는 아들1을 포함한 li 태그와 딸1을 포함한 li태그만이 선택됩니다.
http://chan7ee.tistory.com/192 
