본문 바로가기
jQuery

[jQuery] 2. 셀렉터

by 똑똑한 영장류 2013. 1. 9.

 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 의 셀렉터에 대해 정리해봤습니다.

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


휴...




'jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08

댓글