댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[예제] nextAll(), nextUntil(), each() 메서드를 이용한 군대느낌(?)의 예제
nextAll(), nextUntil(), each()
메서드를 이용한 예제와 예제의 설명입니다.

몇가지 메서드를 이용해서 간단한 예제를 만들어보았습니다.
이 예제에서는 each() 라는 메서드를 사용하였는데요. 진행중인 강좌에서도 처음으로 등장한 메서드 입니다.
아주 유용한 녀석이죠. for 문과 비슷한 역할을 하죠.

다음 강좌에는 이것을 다뤄보겠습니다. 이번에는 그냥 예제로 즐겨주세요 ^^

군대에 다녀오신 분이시라면 내무반의 상황을 상상해 보면서 시작해 주세요 ㅋㅋ

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


내무반에 병사들이 쉬고 있습니다. 왼쪽 부터 계급이 높습니다. 병장부터 이등병까지~ 아래 버튼을 눌러보세요.


군대에서 있을법한 예제입니다. ^^;
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

친절한 소스 설명

<style type="text/css">
 
        #hq { width:800px; margin:0 auto; text-align:center; margin-top:20px; }
        #hq img { position:relative; cursor:pointer; margin:3px; }
 
</style>

이미지와 이미지가 들어있는 div 에 대한 스타일 설정입니다.
이미지를 움직이게 하기위해서는 position:relative; 설정이 꼭 필요합니다.
- 현재 영역은 그대로 유지하면서 현재영역 기준으로 위치를 상대적으로 옮길 수 있습니다.




<img src="http://biketago.com/img/etc/huk2.gif" style="display:none;">

바뀔이미지를 미리로딩해 둡니다. display:none; 으로 안보이게 해두었습니다.
간혹 바뀌어야 하는 이미지가 느리게 뜨는경우가 있는데 이렇게 해두면 좋습니다.



<div id="hq">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
        <img src="http://biketago.com/img/etc/huk1.gif">
</div>

내무반 병사들의 이미지 입니다. MSN 메신져를 쓸때 많이 썼던 이미지 입니다. ^^;



<br><br>
내무반에 병사들이 쉬고 있습니다. 왼쪽 부터 계급이 높습니다. 병장부터 이등병까지~ 아래 버튼을 눌러보세요.
 
<div style="text-align:center; margin-top:40px;">
        <button type="button" onclick="attention ($('#hq img') )">전부 주목 !!</button>
        <button type="button" onclick="attention( $('#hq img:eq(1)').nextAll() )">내 밑으로 다 주목 !!!</button>
        <button type="button" onclick="attention( $('#hq img:eq(1)').nextUntil($('#hq img:eq(7)')))">내 밑으로 너 위로 다 주목 !!!</button>
        <button type="button" onclick="attention( $('#hq img:last') )">막내야!</button>
        <button type="button" onclick="setTimeout(function(){attention( $('#hq img:first') )}, 500)">여기 왕고 누구?</button>
        <button type="button" onclick="attention( $('#hq img').eq(-6).nextAll() )">내가 밥이 안된다 5명!!</button><br>
        <button type="button" onclick="wave()">인원파악 : 번호시작 !! ~~</button>
</div>
<br>
군대에서 있을법한 예제입니다. ^^;

설명 : 위 버튼들을 누르면 임의로 만든 attention 함수에 제이쿼리객체를 넣어서 실행합니다.
attention 함수는 아래에 설명이 있습니다. 이미지를 바꾸고 일정시간이 지나면 원래대로 돌려주는 함수입니다.



1. <button type="button" onclick="attention ($('#hq img') )">전부 주목 !!</button>
- "전부주목"은 id의 이름이 hq 인것 안의 모든 이미지를 셀렉트 하여 함수를 실행합니다.
- 모든이미지를 선택했기 때문에 "전부주목" 하게 됩니다.


2. <button type="button" onclick="attention( $('#hq img:eq(1)').nextAll() )">내 밑으로 다 주목 !!!</button>
- id 이름이 hq 인것 안의 두번째 이미지 이후로 모든 이미지를 셀렉트 하여 함수를 실행합니다. nextAll 메서드는 "지정 셀렉터 이후 모든것" 입니다.
- 두번째 것 이후의 모든 이미지가 반응하게 됩니다.


3. <button type="button" onclick="attention( $('#hq img:eq(1)').nextUntil($('#hq img:eq(7)')))">내 밑으로 너 위로 다 주목 !!!</button>
- 군대에서 잘못한 후임병을 갈구는 방법중. "내 밑으로 니 위로 다 집합시켜!" 같은 광역소환술이 있습니다. 여러모로 무서운것이죠. ^^;
- 이 셀렉터는 그걸 흉내내서 두번째것 이후 부터 8번째것 전까지 셀렉트 합니다.
- nextUntil 메서드는 지정한 셀렉터 이후부터 지정한 셀렉터 전까지 찾습니다.


4. <button type="button" onclick="attention( $('#hq img:last') )">막내야!</button>
- :last 셀렉터를 이용해서 마지막 이미지를 가져옵니다.
- 예제 설정상 맨뒤가 막내입니다. 위에 모든 사람이 다 나가야 자기도 나갈수 있는 그런 존재. 저도 그런때가 있었죠...


5. <button type="button" onclick="setTimeout(function(){attention( $('#hq img:first') )}, 500)">여기 왕고 누구?</button>
- :first 셀렉터를 이용해서 맨앞의 이미지를 가져왔습니다.
- setTimeout 로 약간의 시간지연을 하였는데요. 원래 왕고라는 존재는 즉각반응 하지 않습니다. 그런것이죠.


6. <button type="button" onclick="attention( $('#hq img').eq(-6).nextAll() )">내가 밥이 안된다 5명!!</button><br>
- eq 메서드와 nextAll 메서드를 적절히 조합하였습니다.
- eq 메서드는 이미 알고 계시겠죠? 그리고 - (마이너스) 수치를 사용할 수 있다는것도 알고 계신지요!?
- eq의 - 는 뒤부터 시작하여 찾으므로 맨뒤 5개를 알아보려면 eq(-5) 해주면 됩니다. - 는 뒤부터 찾아라 입니다. 유용하죠.
- 참고로 - 수치0부터 시작하는 개념이 아니므로 있는 그대로 카운트 됩니다.
- nextAll 은 지정된 셀렉터 다음부터 찾으므로 실제로는 eq(-6) 을 사용해서 마지막 6번째 이후부터 찾으면 마지막 5개가 나옵니다.
- 추가로 : 내가 밥이 안된다 = 지금 한가하다 = 작업인원 과 동의어 입니다. 군대가실 분 이라면 기억해 두세요~ㅋ


7. <button type="button" onclick="wave()">인원파악 : 번호시작 !! ~~</button>
- 임의로 만든 wave 함수를 실행하도록 되어있습니다.



<script type="text/javascript">
 
        var timer;
 
        function attention(j){
                clearTimeout(timer);
                j.attr('src', 'http://biketago.com/img/etc/huk2.gif');
 
                timer = setTimeout(function(){
                        $('#hq img').attr('src', 'http://biketago.com/img/etc/huk1.gif');
                }, 1000);
        }

- 이미지를 놀라는 표정으로 바꿔주고 시간이 지나면 다시 원래 모습으로 돌려주는 함수입니다.
- 함수의 매개변수로 제이쿼리 셀렉터를 통채로 받아서 처리해 주도록 했습니다. 코딩상의 j 변수

 
        // 인원파악 - 순차적 이미지 변경
        function wave(){
                var timer = 100;
 
                // each 메서드를 이용해서 순차적으로 바꿔주기
                $('#hq img').each(function(){
                        var o = this;
 
                        setTimeout(function(){
                                $(o).attr('src', 'http://biketago.com/img/etc/huk2.gif');
                        }, timer);
 
                        setTimeout(function(){
                                $(o).attr('src', 'http://biketago.com/img/etc/huk1.gif');
                        }, timer + 300);
 
                        timer += 500
                });
        }

- 인원파악 번호시작 버튼이 호출하는 함수입니다.
- each 메서드를 사용해서 for 문처럼 순차 처리를 하였습니다.
- 그냥 setTimeout 함수의 시간을 증가시켜줘서 순서대로 이미지가 바뀌게 했습니다. 사실 별거 없네요 ^^;



 
        function wait(j){
                var move = Math.round(Math.random() * 3) + 1;
                var time = Math.round(Math.random() * 500) + 500;
 
                $(j).animate({top:'-=' + move}, time, function(){
                        $(j).animate({top:'+=' + move}, time, wait(j));
                });
        }

- 이 함수는 각각의 이미지들이 미묘하게 조금씩 움직이도록 해줍니다.
- 랜덤값을 이용해서 조금씩 다르게 움직입니다. animate 메서드를 사용했습니다.
- 위아래로 이미지들이 각자 다르게 움직이고 있는것이 이 함수의 역할입니다. (가만히 있으면 심심하잖아요 ㅎㅎ)


 
        // 각 이미지마다 wait 함수를 실행 (위아래로 움직이도록)
        $('#hq img').each(function(){
                wait(this);
        });

- 역시 each 메서드를 이용해서 각각의 이미지에 wait 함수를 걸어줍니다.
- 이 스크립트로 인해서 각각의 이미지들이 움직이기 시작하는 것이죠.

 
</script>

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

실행 가능한 소스

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

다음 강좌에서는 each 메서드를 다뤄보겠습니다.

아주 유용한 메서드입니다. 좋은녀석이죠.

여기까지 봐 주셔서 감사드립니다 !!

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