jQuery 셀렉터

작성자  
   achor ( Hit: 4323 Vote: 570 )
홈페이지      http://empire.achor.net
분류      웹표준


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

본문 내용은 4,010일 전의 글로 현재의 관점과 다를 수 있습니다.

Post: https://achor.net/board/ae_scrap/35
Trackback: https://achor.net/tb/ae_scrap/35
RSS: https://achor.net/rss/ae_scrap

Share 밴드공유 Naver Blog Share Button


Tag

- 프로그래밍: 통하였느냐? (2016-04-03 10:54:22)- 프로그래밍: 오락실 (2016-10-20 01:03:55)

- 웹개발: OpenID 시험 지원 (2008-04-20 20:27:07)- 웹개발: IndieWeb 네이버 카페 연동 (2015-02-20 15:00:08)

- 웹개발: IndieWeb 한국모임 (2015-02-07 16:59:52)- 프로그래밍: 2주동안... (2010-02-16 02:48:57)

- 웹개발: 모바일 블로그 수정 2 (2015-05-05 03:15:03)- 웹개발: Twitter: send message from a PHP page (2010-03-22 05:27:44)

- 웹개발: prby.me 업그레이드 (2013-11-03 01:26:19)- 웹개발: PHP fsockopen을 활용한 Twitter message 전송 (2010-07-18 09:35:12)



 34   2   1
번호
분류
제목
작성일
조회수
34웹서버   G Suite Legacy free 300유저 무료 전환2023/04/026730
33휴대폰   갤럭시 S4 LTE-A 루팅 [1]2016/08/219835
32웹서버   딥웹 .onion 설정 [1]2015/09/0510007
31웹표준   jQuery 조작2013/11/166538
30웹표준   jQuery 셀렉터2013/11/164323
29웹표준   jQuery 기본2013/11/124424
28Display   화면 분할 프로그램2012/12/065172
27인터넷   도메인 등록 비교2011/02/259918
26PHP   Open API 사이트 모음2011/02/0610068
25플래시   loadMovie를 통한 swf resize2011/02/057316
24휴대폰   무료 문자 프로그램 - eXtremeSMS2011/01/187341
23PHP   PHP fsockopen을 활용한 Twitter message 전송2010/07/1815053
22Windows   Windows 2008 R2 IIS계정별 ftp 설정2010/07/1113873
21휴대폰   Smart Phone User Agent2010/04/1714231
20PHP   Twitter: send message from a PHP page2010/03/2210442
19웹서버   WebKnight 설정2010/03/2126051
18웹표준   body scrollTop2010/03/098090
17웹표준   span inline-block2010/03/088346
16Graphic   Open Sumo Paint (Web Photoshop) [1]2010/03/0310063
15동영상   WMV, FLV 간 파일 변환2009/09/2813739
1  2 

  당신의 추억

ID  

  그날의 추억

Date  

  Poll
Only one, 주식 or 코인?

주식
코인

| Vote | Result |
  Tags

Tag  

First Written: 12/01/2007 07:20:09
Last Modified: 08/23/2021 11:46:44
추천글closeopen