댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[강좌7] 제이쿼리 셀렉터 기초 강좌6 & 예제 007 빵
관계로 찾는 셀렉터
>, +, ~ 관련 강좌 입니다.

그리고 이전, 다음 찾기 메서드를 이용한 007빵(?) 예제도 있습니다.

이번 강좌는 좀 오랫만에 올리게 되었습니다.



그럼 시작해 볼까요 ㅎㅎ (웃자고 올려본 짤방인데요 살벌하군요)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

첫번째 계층의 자식을 찾아주는 > 셀렉터를 배워볼까요?

예제1
제이쿼리 : $('[name=zoo] > li')
명령 : 이름이 zoo 인것 안의 첫번째 자식인 li 만 찾아라
설명 : > 를 사용하여 첫번째 자식만 찾습니다.

<ul name="zoo">
        <li>
                
                <ul>
                        <li>계란</li>
                        <li>계란</li>
                        <li>계란</li>
                </ul>
        </li>
        <li>소</li>
        <li>
                돼지
                <ul>
                        <li>새끼 돼지</li>
                        <li>새끼 돼지</li>
                </ul>
        </li>
        <li>개</li>
        <li>고양이</li>
</ul>

닭과 돼지가 계란과 새끼를 가지고 있는데 찾지 않습니다.
하지만 결국 닭 돼지 안의 것들도 내용에 포함이 되기는 함니다. 그 안에 있는 자식들 이니까요.
자식은 찾지 않고 부모만 찾았을 뿐이지만 포함이 되어있으니 같이 따라오게 됩니다. 이점은 염두에 두어야 겠죠.

만약 $('[name=zoo] li') 한다면 위 모든 li를 전부다 찾게되겠죠.



예제2
제이쿼리 : $('[name=zoo] > li > ul > li')
명령 : 이름이 zoo 인것 안의 li 안의 ul 안의 li 를 찾아라.. ^^;
설명 : 여러개를 사용하여 순서대로 지정하면 원하는것을 찾을 수 있습니다.

<ul name="zoo">
        <li>
                닭
                <ul>
                        <li>계란</li>
                        <li>계란</li>
                        <li>계란</li>
                </ul>
        </li>
        <li>소</li>
        <li>
                돼지
                <ul>
                        <li>새끼 돼지</li>
                        <li>새끼 돼지</li>
                </ul>
        </li>
        <li>개</li>
        <li>고양이</li>
</ul>

위 셀렉터는 계층 구조인 html 에서 하나의 자식만 찾을때 아주 유용한 방법입니다.



이번에는 인접한 것중 바로 다음것을 찾아주는 + 셀렉터 입니다.
부모자식 관계를 찾는것이 아닙니다.

예제3
제이쿼리 : $('[name=div1] + div')
명령 : 이름이 div1 다음의 div 를 찾아라
설명 : + 를 사용하면 해당 셀렉터 바로 다음것의 지정한 것을 찾습니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>



예제4
제이쿼리 : $('[name=div1] + span')
명령 : 이름이 div1 다음의 span 를 찾아라
설명 : 위 셀렉터는 아래 태그에서 찾을게 없습니다. 첫번째로 나오는 span 을 찾지 않을까라고 생각할 수 있지만
+ 명령은 인접한 다음것만 찾아줍니다. 찰싹 붙어있는 것중 바로 다음것을 찾을 수 있습니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>



예제5
제이쿼리 : $('[name=div4] + span')
명령 : 이름이 div4 인것 다음의 span 를 찾아라
설명 : 위 두개가 인접해 있기때문에 span을 찾아줍니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>



예제6
제이쿼리 : $('[name=div1] + div')
명령 : 이름이 div1 다음의 div 를 찾아라
설명 : + 셀렉터는 자식을 찾는 용도가 아닙니다. 지정한 것과 동등한 위치에서 다음것을 찾습니다. 아래 예제를 보세요 ^^

<div name="div1">
        div1
        <div name="div1_1">div1_1</div>
</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>

div1_1 은 자식이기 때문에 찾지않고 div2 를 찾습니다.
div1_1 을 찾고 싶다면 바로 위에서 배운 > 셀렉터를 이용하여 $('[name=div1] > div') 이렇게 하면 되겠죠?
방금전에 해본건데 기억 나시죠? ㄷㄷ

+ 셀렉터는 next() 라는 메서드와 동일한 역할을 하는데요 해당 메서드는 다음에 배우겠습니다.
간단히 설명하면 $('[name=div4] +')$('[name=div4]').next() 는 같습니다.
그리고 + 다음에 셀렉터를 생략하니 바로 다음것을 찾아주네요. 저도 지금 알았습니다. ^^; 하하 뭐 그럴수도 있죠.
여기서 중요한점! 비록 몰랐더라도 혹시 될까? 라는 것을 시도했을 때 되는 경우가 있습니다.
이런 능력을 키우셔야 합니다. 될까? 라는 호기심.



이번에는 지정한 것중 바로 다음것을 모두 찾아주는 ~ 셀렉터 입니다.
+ 와는 다르게 서로 붙어있지 않아도 찾아줍니다.

예제7
제이쿼리 : $('[name=div1] ~ div')
명령 : 이름이 div1 다음의 모든 div를 를 찾아라
설명 : + 는 하나만 찾지만 ~ 는 해당하는것을 모두 찾습니다.

<div name="div1">div1</div>
<div name="div2">
        div2
        
<div name="div2_1">div2_1</div>
</div>
<div name="div3">div3</div>
<div name="div4">div4</div>

<span name="span1">span1</span>

위의 빨간색 div 는 자식이기 때문에 찾는 대상은 아닙니다.



예제8
제이쿼리 : $('[name=div1] ~ span')
명령 : 이름이 div1 다음의 모든 span을 를 찾아라
설명 : div1 다음에 바로 span 이 나오지 않았지만 찾아줍니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>
<span name="span2">span2</span>




예제9
예제8에서 처음으로 나오는 span 만 찾고 싶다면 어떻게 하면 될까요?
제이쿼리 : $('[name=div1] ~ span:first')
명령 : 이름이 div1 다음의 span 중 처음것만 찾아라
설명 : 전에 배운 :first 기억하시죠? 그 셀렉터와 조합해 보았습니다.

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<span name="span1">span1</span>
<span name="span2">span2</span>

그렇다면? 네! :last, :even, :odd 등 다 조합하여 사용할 수 있습니다.



실제 작업시 이름이나 id등 지정한 것으로 찾는 경우보다는
이전, 다음, 부모, 자식 처럼 이름이 아닌 관계로 접근해서 찾는 경우가 많습니다.
html의 구조가 복잡해지면 이게 상당히 어려워 지는데요. 그래도 불가능은 없더군요.. ^^;
기본기를 확실히 익혀두고 많은 응용을 해보는게 좋습니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

+++ 심화 학습 +++
어린시절 문제집 풀다보면 나오는 심화학습이 제일 싫었던 기억이 있는데요. 한번 해볼까 합니다. ^^;

예제1
제이쿼리 : $('[name=div1] +')
명령 : 이름이 div1 인것 다음것 찾기

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>



예제2
제이쿼리 : $('[name=div1] + +')
명령 : 이름이 div1 인것 다음 다음것 찾기

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>

또 이런 것도 됩니다. $('[name=div1]+++')
다다다음 것 찾기. 띄어쓰기를 생략해도 되는군요. 이 셀렉터는 괴팍해 보이네요.



예제3
제이쿼리 : $('[name=div1] + ~')
명령 : 이름이 div1 인것의 다음것 부터 전부 찾기

<div name="div1">div1</div>
<div name="div2">div2</div>
<div name="div3">div3</div>
<div name="div4">div4</div>
<div name="div5">div5</div>



예제4
제이쿼리 : $('div >')
명령 : 이름이 div 태그의 자식만 전부찾기, > 역시 뒷 부분은 생략해도 됩니다.

<div name="div1">div1</div>
<div name="div2">div2 <div name="div2_1">div2_1</div> </div>
<div name="div3">div3</div>
<div name="div4">div4 <div name="div4_1">div4_1</div> <div name="div4_2">div4_2</div> </div>
<div name="div5">div5</div>



예제5
제이쿼리 : $('div > +')
명령 : div 태그의 자식만 전부찾고 그 자식의 다음것 찾기

<div name="div1">div1</div>
<div name="div2">div2 <div name="div2_1">div2_1</div> </div>
<div name="div3">div3</div>
<div name="div4">div4 <div name="div4_1">div4_1</div> <div name="div4_2">div4_2</div> </div>
<div name="div5">div5</div>



예제6
제이쿼리 : $('div > +')
명령 : div 태그의 자식만 전부찾고 그 자식의 다음것 찾기

<div name="div1">div1</div>
<div name="div2">div2 <div name="div2_1">div2_1</div> </div>
<div name="div3">div3</div>
<div name="div4">div4 <div name="div4_1">div4_1</div> <div name="div4_2">div4_2</div> <div name="div4_3">div4_3</div> </div>
<div name="div5">div5</div>

예제5와 같지만 div4_3 만 추가되었습니다. 여기서 왜 4_24_3이 같이 찾아졌는지 이해해야 합니다.
4_1의 다음것인 4_2만 찾아야 할것 같은데 말이죠. 아직은 만만해 보이던 셀렉터의 개념이 급! 복잡해 집니다.
사실 아주 쉬운것인데요. 차근차근 보겠습니다.

$('div >') 이게 먼저 실행이 되는데요 이때 찾는 것들은

<div name="div1">div1</div>
<div name="div2">div2 <div name="div2_1">div2_1</div> </div>
<div name="div3">div3</div>
<div name="div4">div4 <div name="div4_1">div4_1</div> <div name="div4_2">div4_2</div> <div name="div4_3">div4_3</div> </div>
<div name="div5">div5</div>

이 상태에서 + 로 바로 다음것을 찾으면
2_1의 다음것은 없고요.
4_1의 다음은 4_2.
4_2의 다음은 4_3
4_3의 다음은 없네요.

이런식으로 찾기 때문에 결국 두개를 찾은 것이죠. 셀렉터는 알송달송 합니다. 만만한듯 하면서도 아닙니다.
이것이 셀렉터를 정복해야 하는 이유입니다. 제이쿼리의 기초이자 핵심이죠.



그럼 이번 강좌는 여기서 마치겠습니다. ^^;

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

오늘의 예제 007빵 - 클릭한 이미지 좌우의 녀석들이 놀랍니다. ㅋㅋ


한때 MSN 메신져에서 많이 사용했었던 이모티콘 입니다. 저는 이런게 좋더군요. ^^;


이 예제에서 핵심적인 부분은

다음과 이전을 선택하는 next(), prev() 메서드와
동적으로 이벤트를 붙여주는 bind() 메서드를 사용하여 onclick 이벤트를 붙여주었습니다.
그리고 각 얼굴들이 위아래로 전부 다르게 움직이도록 에니메이션 효과도 넣었습니다. 그래야 좀 부담스럽게 보입니다. ^^;

그외 소소한 기법들이 사용되었는데요. 곧 설명도 올리겠습니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

위 예제의 소스

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :