.is()

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

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

+_+
예제 1
기본 예제 (개만 점프로 반응)
보기
개를 클릭하면 점프합니다.

소스
<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
jQuery

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

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

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

jQuery 홈페이지 .is() API 문서 : http://api.jquery.com/is/