jQuery 공작소 : .not()

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

not 메서드는 셀렉터의 대상중 제외할 것을 지정합니다.

예제 1
이미지를 이용한 예제
보기
버튼을 누르면 개만 점프합니다.

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

버튼을 누르면 개만 점프합니다.<br><br>

<button type="button" onclick="j_test()">눌러보세용</button>

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

<script type="text/javascript">

    function j_test(){
        // 고양이만 빼고 점프
        $('.css_test img' ).not( '[src*=cat]' ).animate({ top : -50 }, 100, function(){
            $(this).animate({ top : 0 }, 100);
        });
    }

</script>
관련 CSS
jQuery

$( '.css_test  img' ).not( '[src*=cat]' )
- 클래스명이 css_test 인 요소의 이미지주소에 cat 문자열없는것(아닌것)만 셀렉트

예제 2
:not 셀렉터를 사용한 같은 예제
보기
버튼을 누르면 개만 점프합니다.

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

버튼을 누르면 개만 점프합니다.<br><br>

<button type="button" onclick="j_test()">눌러보세용</button>

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

<script type="text/javascript">

    function j_test(){
        // 고양이만 빼고 점프
        $('.css_test img:not( [src*=cat] )' ).animate({ top : -50 }, 100, function(){
            $(this).animate({ top : 0 }, 100);
        });
    }

</script>
관련 CSS
jQuery

$( '.css_test  img' ).not( '[src*=cat]' )
$( '.css_test  img:not( [src*=cat] )' )

- 메서드와 셀렉터를 사용한 같은 방법입니다.

예제 3
jQuery
참고 메서드 .animate()
jQuery 홈페이지 .not() API 문서 : http://api.jquery.com/not/