jq: 事件-焦点

focus -> 获得焦点

        <input type="text" value="请输入密码">
<script src="../jquery-3.4.1.js"></script>
<script>
 $('input').focus(function() {
     $('input').val('');
 })
</script>
      

blur -> 失去焦点

        $('input').focus(function() {
    $('input').val('');
}).blur(function() {
    $('input').css('color', '#f00')
})

      

change 失去焦点之后对比是否改动value值

        $('input').focus(function() {
 $('input').val('');
 $('input').css('color', '#f00')
        }).blur(function() {
 $('input').css('color', '#f00')
        }).change(function() {
 console.log('值已经更改')
        })

      

keyup 按下按键后监听

        $('input').keyup(function() {
    console.log($('input').val());
})

      

keydown keypress 按下按键前监听

他们的which属性keydown不区分大小写，keypress区分大小写

---

scroll() 滚轮

        <div class="wrapper">
        <div class="item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
    <script src="../jquery-3.4.1.js"></script>
    <script>
 $(window).scroll(function() {
 if( $(document).scrollTop() + $(window).height() >= $('body').height() ) {
 $('.wrapper').append(`<div class="item">${$('.item').length}</div>`);
            }
        })
    </script>

      

其他:

event.preventDefault() jq中的取消默认事件

event.stopPropagation() jq中的阻止冒泡