[jQuery] 2. 셀렉터

 jQuery 2. 요소 선택 방법 - 셀렉터

 jQuery는 뭐?

선택하고 조작하고, 선택하고 조작하고...

그러니, 우선 선택하는 방법을 정리해봅니다.

셀렉터를 이용해서 HTML 태그 요소를 선택하는겁니다.

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']").

여기까지 내용은 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태그만이 선택됩니다.

이상! jqury 의 셀렉터에 대해 정리해봤습니다.

표로 아름답게 정리는 못 했지만, 필요할때 찾아볼 수 있는 용도로 포스팅합니다.

휴...