jQuery 공작소 : 제이쿼리 돔 컨트롤 예제모음 1

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

제이쿼리로 해보는 HTML DOM 컨트롤 예제입니다.
before, prepend, append, after 메서드에 대해서 알아볼까요?

예제 1
돔 컨트롤 예제
보기
어느 네모칸 안에 개가 살고 있었어요. 그런데 ...


소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        margin-top : 100px;
        padding : 5px;
        text-align : center;
    }
    .css_test .dogbox {
        border-radius : 5px;
        border : 5px solid gray;
        display : inline-block;
        padding : 5px;
    }
    .css_test .new { /* 새로 추가되는 이미지에 사용할 CSS */
        position : relative;
        top : -150px;
        z-index : 10;
    }
</style>

어느 네모칸 안에 개가 살고 있었어요. 그런데 ...<br><br>
<button type="button" onclick="j_test_before()">before</button>
<button type="button" onclick="j_test_prepend()">prepend</button>
<button type="button" onclick="j_test_append()">append</button>
<button type="button" onclick="j_test_after()">after</button>
<button type="button" onclick="j_test_remove()">다 사라졌으면 좋겠다 !!</button>
<br>
<div class="css_test">
    <div class="dogbox"><img name="IDDQD" src="//superkts.com/img/css/dog061.gif" /></div>
</div>

<script type="text/javascript">
    // 랜덤으로 이미지 주소 만들기
    function j_test_get_img(){
        var img = [
            '//superkts.com/img/css/huk.gif',
            '//superkts.com/img/css/dog021.gif',
            '//superkts.com/img/css/dog060.gif',
            '//superkts.com/img/css/dog061.gif',
            '//superkts.com/img/css/bird20.gif',
            '//superkts.com/img/css/bird21.gif',
            '//superkts.com/img/css/bird27.gif',
            '//superkts.com/img/css/bird28.gif',
            '//superkts.com/img/css/bird34.gif'
        ];
        var rnd = Math.floor(Math.random() * img.length);
        return img[rnd];
    }

    // before
    function j_test_before(){
        $('.css_test .dogbox').before('<img class="new" src="' + j_test_get_img() + '" />');
        $('.css_test .dogbox').prev().animate({top:0}, 1000, 'easeOutBounce');
    }

    // after
    function j_test_after(){
        $('.css_test .dogbox').after('<img class="new" src="' + j_test_get_img() + '" />');
        $('.css_test .dogbox').next().animate({top:0}, 1000, 'easeOutBounce');
    }

    // append
    function j_test_append(){
        $('.css_test .dogbox').append('<img class="new" src="' + j_test_get_img() + '" />');
        $('.css_test .dogbox img:last').animate({top:0}, 1000, 'easeOutBounce');
    }

    // prepend
    function j_test_prepend(){
        $('.css_test .dogbox').prepend('<img class="new" src="' + j_test_get_img() + '" />');
        $('.css_test .dogbox img:first').animate({top:0}, 1000, 'easeOutBounce');
    }

    // 처음 가운데 개만 남기고 전부 삭제
    function j_test_remove(){
        $('.css_test img:not([name=IDDQD])').animate({top:'-=300', opacity:0}, 1000, function(){
            $(this).remove();
        });
    }
</script>
관련 CSS
jQuery

$( '.css_test img:not( [name=IDDQD] )' )  -  css_test 클래스이미지이름이 IDDQD아닌것 셀렉트
- 가운데 개만 남기고 모두 선택하는 셀렉터
- 특정 이름이 아닌것을 선택했기 때문에 이름이 없는것도 선택에 포함됨.
- IDDQD (!?)

+ 관련 jQuery +