jQuery(제이쿼리) : .is()

is 메서드는 셀렉터의 대상을 다시 셀렉터로 비교하여 맞으면 true 아니면 false 를 반환합니다.

 

<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test img {
        position : relative;/* 이미지에 애니메이션 효과를 주기위해 설정 */
        cursor : pointer;
    }
< /style>

개를 클릭하면 점프합니다.<br><br>

< div class="css_test">
    <img src="http://superkts.com/img/css/dog061.gif" />
    <img src="http://superkts.com/img/css/cat051.gif" />
    <img src="http://superkts.com/img/css/dog061.gif" />
    <img src="http://superkts.com/img/css/dog060.gif" />
    <img src="http://superkts.com/img/css/dog021.gif" />
    <img src="http://superkts.com/img/css/cat051.gif" />
< /div>

< script type="text/javascript">

    // 이미지에 클릭이벤트 생성
    $('.css_test img').bind( 'click', function(){
        j_test( this );
    });

    function j_test(o){
        if( $(o).is( '[src*=dog]' )){ // 클릭한 이미지 경로에 dog 가 있을 경우
            $(o).animate({ top : -100 }, 200, function(){
                $(this).animate({ top : 0 }, 100);
            });
        }else{ // 없는 경우
            $(o).animate({ left : -10 }, 500, 'easeOutElastic', function(){
                $(this).animate({ left : 0 }, 200);
            });
        }
    }

< /script>

관련 CSS

borderborder-radiuscursorpaddingposition

jQuery

$( 셀렉터 ).is( '셀렉터' )
- 셀렉터에 해당하는 요소를 셀렉터로 비교하여 맞으면 true 아니면 false 를 반환합니다.

$( 셀렉터 ).is( '[src*=dog]' )
- 셀렉터에 해당하는 요소의 src 속성에 dog 문자열이 있으면 true 없으면 false 반환

예제에 사용된 메서드 참고 : .animate()