JQ事件

hover ：由mouseenter和mouseleave组成

     $('标签').hover(function(){
         内容
     }
    
     $('标签').hover(function(){
    
        

css('background','')不会改变元素原来的background样式

★css('background','none')会改变元素原来的background样式

       $(this).css('background','#ccc').siblings().css('background','')
  
    

mouseenter mouseleave ★在进入子元素区域的时候不会触发

     $('标签').mouseenter(function(){
         console.log('mouseenter');
     })
     
    $('标签').mouseleave(function(){
         console.log('mouseleave');
     })

mouseover和 mouseout 在进入子元素区域的时候也会触发

     $('标签').mouseover(function(){
        console.log('mouseover')
     })
     
     $('标签').mouseout(function(){
         console.log('mouseout')
     })
     
  

按下键盘时

     $('标签').keydown(function(){
         alert('我按下了')
     })
     

释放按键时

     $('标签').keyup(function(){
         alert('鼠标抬起了')
     })
     

产生可打印的字符时 连续敲击键盘的时候触发

     $('标签').keypress(function(){
         alert('连续敲击键盘')
     })
     
    $(document).keyup(function(e){
         敲击回车的时候触发 
        if(e.keyCode==13){
            alert('我提交了')
        }
    })
    

写个轮播图的自动播放

设置一个全局变量

    let i = 0;
    let timer = null
    $('img').eq(i).show().siblings().hide();
    

show()是 自动播放

    $('标签左边按钮').click(function () {
         先清空定时器 阻止自动播放 
        clearInterval(timer)
        i--;
         防止减到-1 找不到对应的图片 
        if (i == -1) {
            i = $('img').length - 1
        }
         展示当前对应的图片其他图片淡出 
        $('img').eq(i).show().siblings().hide();
         继续开始自动播放 
        show();
    })

    $('标签右边按钮').click(function () {
         先清空定时器 阻止自动播放 
        clearInterval(timer)
        i++;
         防止减到-1 找不到对应的图片 
        if (i == $('img').length) {
            i = 0
        }
         展示当前对应的图片其他图片淡出 
        $('img').eq(i).show().siblings().hide();
         继续开始自动播放 
        show();
    })

定时器 过2秒 显示一张图 显示最后一张图的时候 再跳到第一张

    function show() {
        timer = setInterval(function () {
            i++
            if (i == $('img').length) {
                i = 0
            }
             fadeIn淡入  fadeOut淡出 
            $('img').eq(i).fadeIn().siblings().fadeOut();
        }, 2000)
    }