jQuery 공작소 : .click()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

click 메소드는 해당 요소에 click 이벤트를 생성하거나 발생시킵니다.

예제 1
이미지에 click 이벤트 동적생성하기
보기
동물들을 클릭해 보세요 ^^ (click 이벤트 바인딩)
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 20px;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        position : relative;
    }
</style>

<div class="css_test">
    동물들을 클릭해 보세요 ^^ (click 이벤트 바인딩)<br>
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/bird20.gif" />
    <img src="//superkts.com/img/css/dog021.gif" />
    <img src="//superkts.com/img/css/bird21.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    $( '.css_test img' ).click(function(){
        $( this ).animate({ top : '-=50' }, 100, function(){ // 동물이 위로 다 올라갔다면
            $( this ).animate({ top : '+=50' }, 100); // 다시 내려가도록 함
        });
    });
</script>
관련 CSS
jQuery
- click 이벤트를 동적으로 바인딩 하였습니다.
- onclick="코딩" 과 동일합니다.
예제 2
클릭 이벤트 발생시키기
보기
이번에는 버튼을 눌러보세요 !
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid gray;
        padding : 20px;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        position : relative;
    }
</style>

<div class="css_test">
    이번에는 버튼을 눌러보세요 !<br>
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/bird20.gif" />
    <img src="//superkts.com/img/css/dog021.gif" />
    <img src="//superkts.com/img/css/bird21.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>
<button type="button" onclick="$('.css_test img').click()">점프 !! 높이올라 ♬</button>

<script type="text/javascript">
    $('.css_test img').click(function(){
        $(this).animate({top:'-=50'}, 100, function(){ // 동물이 위로 다 올라갔다면
            $(this).animate({top:'+=50'}, 100); // 다시 내려가도록 함
        });
    });
</script>
관련 CSS
jQuery

$( '.css_test img' ).click()  -  모든 이미지에 클릭이벤트를 발생시킵니다. (동시에 클릭한 효과)

예제 3
animate 메소드와 콜라보 !!
보기
소스
<style type="text/css">
    .css_test {
        background : #fff;
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 20px;
        position : relative;
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        position : relative;
    }
    
    /* position:relative; 를 적용해야 애니메이션이 실행됨 */
</style>

<button type="button" onclick="$('.css_test img').click()">점프 높이올라 !!</button>
<button type="button" onclick="$('.css_test').animate({top:0})">복귀버튼</button>
<div class="css_test">
    <img src="//superkts.com/img/css/dog061.gif" />
    <img src="//superkts.com/img/css/dog060.gif" />
    <img src="//superkts.com/img/css/bird20.gif" />
    <img src="//superkts.com/img/css/dog021.gif" />
    <img src="//superkts.com/img/css/bird21.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    $( '.css_test img' ).click(function(){
        $( this ).animate({ top : '-=100' }, 100, function(){ // 동물이 위로 다 올라갔다면
            $( this ).animate({ top : '+=100' }, 100, function(){ // 다시 내려가도록 함
                $( '.css_test' ).animate({ top : '+=2' }, 10); // DIV 를 아래로 이동
            });
        });
    });
</script>
관련 CSS
jQuery
참고 메서드 : .animate()
jQuery 홈페이지 .click() API 문서 : http://api.jquery.com/click/