jQuery基础事件

<body>
<input type="text" value="" />
<div style="width:100px; height:100px; background-color:#0E0">
<div style="width:50px; height:50px; background-color:blue"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(e) {
    //mouseover,mouseout
    //mouseenter,mouseleave   效果差不多,只不过enter和leave 对子元素无效,over和out 会触发子节点
    $('input').keydown(function(e){
        alert(e.keyCode);
        })
    $('input').keypress(function(e){
        alert(e.charCode);
        })
    $('input').focus(function(){
        alert('光标激活');
        })
    $('input').blur(function(){
        alert('光标离开');
        })
    //focus和blur必须是当前元素才能激活,focusin和focusout可以使子元素激活
    $('div').hover(function(){
        $(this).css('background','red');
        },function(){
            $(this).css('background','green');
            })//hover结合了mouseenter和mouseleave方法,而不是over和out方法
    

    
});
</script>

 

posted @ 2016-07-26 11:20  天照丶鼬  阅读(117)  评论(0编辑  收藏  举报