TIL 2023.02.08 jQuery 2

event

// DOM event
// ready & load
// ready -> load 순서로 됨
// 일반적으로 ready를 사용함
// load는 통신에서 사용되게 됨
$(document).ready(function(){
    console.log('ready');
});
$(window).load(function(){
    console.log('load');
});
$(function(){
    console.log('ready 생략');
})
// scroll
$(window).scroll(function(){
    console.log('scrolling', $(window).scrollTop(), $(document).height()+10-screen.availHeight);
})
// resize
$(window).resize(function(){
    console.log('사이즈 변경...', $(window).width(), $(window).height());
});
// error
$(document).ready(function(){
    $('img').error(function(){
        $('img').attr('src', 'imgs/logo.png');
    })
    .attr('src','imgs/thumnail0.jpg');

mouse event

$(document).ready(function(){
    // console.log($('button').length) // element가 몇개 잡혔는지 확인
    $('button').click(function(e){
        console.log('클릭', $(e.target).html(), $(this).html());
    });
    $('button').eq(0).click(function(e){
        console.log('클릭', e.target, this);
    })
    // btn2
    .next().dblclick(function(){
            console.log('더블클릭');
        })
    // btn3
    .next().mousedown(function(){
            console.log('down');
        }).mouseup(function(){
            console.log('up');
        })
    // btn4
    .next().mouseenter(function(){
            console.log('안으로');
        }).mouseleave(function(){
            console.log('밖으로');
        })
    // btn5
    .next().mouseover(function(){
            console.log('안으로');
        }).mouseout(function(){
            console.log('밖으로');
        })
    // btn6
    .next().hover(function(){
        console.log('안으로 오거나 밖으로 나갈 때')
    })
    $('div').mouseenter(function(){
            console.log('안으로');
        }).mouseleave(function(){
            console.log('밖으로');
        })
    $('a').click(function(e){
        e.preventDefault(); // level 3의 방식
        console.log('페이지 이동x');
        // jquery는 dom level 3로 작동되나
        // level 2 처럼 사용 할 수 있음
        // return false;
    })
});
$(function(){
    $('button').eq(0).click(); // 이벤트 트리거
})

key event

$(document).ready(function(){
    $('input')
            .keydown(function(e){ // 어떤 키를 눌렀는가
                console.log('down', e.key, e.keyCode, $(this).val());

            })
            .keypress(function(e){ // 정확한 입력값 대소문자 체크
                console.log('press', e.key, e.keyCode, $(this).val());

            })
            .keyup(function(e){ // 입력 후 element에서 값을 정확히 뽑아내려면
                console.log('up', e.key, e.keyCode, $(this).val());

            });
});

listener

$(document).ready(function(){
    $('div').children()
    .filter('label:first-child')
    .css({
        display:'block',
        width:$('input').first().outerWidth()+"px",
        'background-color':'gray'
    });

    $('input').eq(1).focus();
    $('form').submit(function(e){
        console.log('submit 취소');
        return false;
    });
    // default값, 적혀있는 값 지우기 focusin(focus), focusout(blur)
    $('input').eq(0).focus(function(){
        console.log('focus');
        // $(this).val("");
        $(this).select(); // 드래그해서 선택한 걸로 해줌
    }).blur(function(){ // 포커스 없어졌을 때 validation 보여주기
        console.log($(this).val());
        if($(this).val().length < 4){
            $(this).css({border:'1px solid red'});
        } else {
            $(this).css({border:'1px solid black'});
        }
    });
    // 특정 입력횟수 입력하면 다음 인풋으로 이동
    $('input').eq(1).keyup(function(){
        console.log('keyup')
        if($(this).val().length > 4){
            // $('input').eq(2).focus();
            // $(this).parent().next().children().filter('input').focus();
            $(this).parent().next().find('input').focus();
        }
    });
    $('input').eq(2).select(function(e){
        console.log($(this).val(), e);
    });
    // $('select').change(function(){
    //     console.log($(this).val());
    // })
    // $('input:radio').change(function(){
    //     console.log($(this).val());
    // });
    // $('input:checkbox').change(function(){
    //     console.log($(this).val());
    // });
    $('select').add($('input:radio')).add($('input:checkbox')).change(function(){
        console.log($(this).val());
    });
});

event update

// event update
var cnt = 1;
$(function(){
    var callback1 = function(){
        console.log('클릭1');
    };
    $(document).on('click','div>button', callback1); // 버튼에 이벤트 달기
    // 해당하는 새로운 element에도 이벤트가 적용되고 전부 누적되기 때문에 주의
    $(document).off('click','div>button', callback1); // 버튼에 이벤트 없애기
    // 클릭마다 버튼 생성하기
    $('button').click(function(){
        cnt++;
        $('div').append('<button>btn'+cnt+'</button>');

        // $('button').last().click(function(){
        //     console.log('btn'+$(this).text()+" 클릭")
        // });
    });
});

event add

$(function(){
    // 이벤트 등록 on(addEventListener)
    // $('button').one('click', {key:'val'}, function(e){ // 한번만 되는 이벤트부여 one
    $('button').on('click', {key:'val'}, function(e){
        console.log('클릭', this, e.data);
    });
    // 다중이벤트 등록가능
    $('input').on('keyup keydown', function(){ 
        console.log($(this).val());
    }).on('focus click', function(){
        $(this).val("");
    });
    // 트리거
    $('button').trigger('click');

});

animation

$(function(){
    var callback = function(){
        console.log('end');
    };
    $('div').eq(0).css({
        height:'50px',
        width:'0px',
        backgroundColor:'tomato'});
    // $('button')
    //     // btn1 - 글 숨기기
    //     .first().click(function(){
    //         // $('div').hide('slow');
    //         // $('div').hide('fast');
    //         // $('div').hide(3000, callback); // 끝나고 나서 callback 함수 호출됨
    //         $('div').eq(1).hide({
    //             duration: 3000,
    //             easing: 'linear',
    //             complete: callback,
    //             progress: function(a,b,c){
    //                 // console.log(a); // 객체
    //                 console.log(b); // 0~1 까지
    //                 // console.log(c); // 설정시간 3000~0 까지
    //                 $('div').width(b*100+"%");
    //             },
    //         })
    //     })
    //     // btn2 - 글 보이기
    //     .next().click(function(){
    //         $('div').show();
    //     })
    //     // btn3 - 토글
    //     .next().click(function(){
    //         $('div').toggle(3000);
    // });

    // slide
    // $('button')
    //     .eq(0).click(function(){
    //         $('div').last().slideUp(3000);
    //     })
    //     .end().eq(1).click(function(){
    //         $('div').last().slideDown(3000);
    //     })
    //     .end().eq(2).click(function(){
    //         $('div').last().stop().slideToggle(3000);
    //     });

    // fade
    // $('button')
    //     .eq(0).click(function(){
    //         $('div').last().fadeOut(3000);
    //     })
    //     .end().eq(1).click(function(){
    //         $('div').last().fadeIn(3000);
    //     })
    //     .end().eq(2).click(function(){
    //         $('div').last().fadeToggle(3000);
    //     })
    //     .end().eq(3).click(function(){
    //         $('div').last().fadeTo(3000, 0, function(){
    //             $('div').last().height(0);
    //         });
    //     })
})

animate

$(function(){
    console.log('animate start...');
    // 애니메이션들은 queue에 누적됨
    $('div')
            .click(function(){
                // $(this).clearQueue(); // 애니메이션 queue 비움(현재껀 진행됨)
                // $(this).stop(); // 현재 애니메이션 종료
                // $(this).finish(); // 모든 애니메이션 종료
                $(this).dequeue();
            })
            .animate({marginLeft:'300px'}, 3000,'linear',()=>{console.log('end');})
            .animate({marginTop:'300px'}, 3000,'linear',()=>{console.log('end');})
            .animate({marginLeft:'0px'}, 3000,'linear',()=>{console.log('end');})
            .animate({marginTop:'0px'}, 3000,'linear',()=>{console.log('end');})
            .dequeue()
            console.log('animate end?');
});

carousel animate

function loop(){
    $('ul').animate({marginLeft:'-100px'}, 2000,'linear', function(){
        $('ul').css('margin-left', 0);
        $('ul').children().first().appendTo('ul');
    });
}
$(function(){
    setInterval(loop, 2000);
});
------------------- css --------------------------------
div{
    width: 300px;
    height: 100px;
    overflow: hidden;
    margin: auto;
}
ul{
    width: 400px;
    height: 100px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
ul>li{
    float: left;
}
ul>li>img{
    width: 100px;
}
--------------------- html -------------------------------
<div>
    <ul>
        <li><img src="imgs/thumnail1.jpg"></li>
        <li><img src="imgs/thumnail2.jpg"></li>
        <li><img src="imgs/thumnail3.jpg"></li>
        <li><img src="imgs/thumnail4.jpg"></li>
        <li><img src="imgs/thumnail5.jpg"></li>
        <li><img src="imgs/thumnail6.jpg"></li>
    </ul>
</div>

마우스로 이미지 일부만 보기

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        $('h1+div').mousemove(function(e){
            console.log(e.pageX,e.pageY);
            $('h1+div').css(
                {
                    left:e.pageX-150+"px",
                    top:e.pageY-150+"px"
                }
            )
        });
    });
</script>
<style>
    div{
        background-color: #fff;
    }
    div>img{
        width:300px;
        height:300px;
    }
    h1+div{
        width: 100px;
        height: 100px;
        position: absolute;
        margin-left: -200px;
        margin-top: -200px;
        border: 300px solid white;
        background-color: rgba(0,0,0,0);
    }
</style>