轮播图

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

    $('.right').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)
    }
复制代码

鼠标事件

    /* hover 由mouseenter和mouseleave组成 */
    /*  mouseenter mouseleave ★在进入子元素区域的时候不会触发*/

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

    /*  mouseover和 mouseout 在进入子元素区域的时候也会触发*/
    $('.div1').mouseover(function(){
       console.log('mouseover')
    })
    $('.div1').mouseout(function(){
        console.log('mouseout')
    })
    
复制代码

键盘事件

    /* 按下键盘时 */
    $('input[type=text]').keydown(function(){
        alert('我按下了')
    })
    /* 释放按键时 */
    $('input[type=password]').keyup(function(){
        alert('鼠标抬起了')
    })
    /* 产生可打印的字符时 连续敲击键盘的时候触发 */
    $('input[type=password]').keypress(function(){
        alert('连续敲击键盘')
    })
    $(document).keyup(function(e){
        /* 敲击回车的时候触发 */
        if(e.keyCode==13){
            alert('我提交了')
        }
    })
    
复制代码

导航菜单

    $('li').hover(function(){
        /* first代表集合元素的第一个元素 last代表集合元素的最后一个元素 */
        /* css('background','')不会改变元素原来的background样式 */
        /* ★css('background','none')会改变元素原来的background样式 */
        $(this).css('background','#ccc').siblings().css('background','')
    })