一、jQuery基本事件

一、本课目标

• 了解jQuery事件与分类
• 掌握jQuery的基本事件

网页当中的事件：
和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现。如：

image.png

二、jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类：

1、基础事件

• 鼠标事件
• 键盘事件
• window事件
• 表单事件

2、复合事件

• 鼠标光标悬停
• 鼠标连续点击

2.1鼠标事件

1、基础演示

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。

image.png

示例代码：
html文件：

 
  
  
  
  
  
  
  
 
 
    

        

            
欢迎光临当当，请登录免费注册
            

                
购物车
                

                
我的订单
                

                
当当自出版
                

                
手机当当
                

                

                    我的当当
                
                

                
企业采购
                

                
客户服务
                

            
            

        
    
    

        
    
    

        

            

                
全部商品详细分类
                
尾品会
                
图书
                
电子书
                
服装
                
运动户外
                
婴孕童
                
家具
                
当当优品
                
电器城
                
当当超市
                
海外购
                

            
        
    
    
    
 

css文件：

*{padding:0;margin:0;}
html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}
a{text-decoration:none;color:#1a66b3;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.clearfix{clear:both;overflow:hidden;height:0;}
.wrap{width:1200px;margin:0 auto;}

/**头部**/
.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
.top,.top a{color:#646464;}
.top a:hover{color:#ff2832;}
.top-l .top-login{color:#ff2832;margin-right:5px;}
.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
.top-m > li  a{display:block;padding:0 8px;}
.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}
.top-m > li a i{margin-right:6px;margin-top:3px;}
.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;}
.top-m ul.topDown li{line-height:24px;}
.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}
.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}
.nav-box{height:36px;line-height:36px;background:#ff2832;color:#fff;}
.nav-box li{float:left;}
.nav-box li a{display:block;padding:0 15px;color:#fff;font-weight:bold;font-size:14px;}
.nav-box .all{width:190px;border:2px transparent solid;border-width:0 2px;margin-right:18px;}
.nav-box .all a,.nav-box .all a:hover{padding-left:20px;padding-right:0;background:url(../images/home_sprite.png) no-repeat 161px -567px;}
.nav-box li.on{position:relative;}
.nav-box li .topDown{position:absolute;width:120px;background:#fff;top:24px;left:0;}

js文件：

$(document).ready(function(){
    // 使用mouseover事件来给导航项目改变背景
    $(".nav-ul a").mouseover(function(){
        $(this).css("background","green");
    })
    // 使用mouseout事件来给导航项目还原背景
    $(".nav-ul a").mouseout(function(){
        $(this).css("background","#ff2832");
    })
});

2、鼠标事件方法的区别：

image.png

示例代码：

分析：当使用mouseenter的时候，默认子元素跟父元素是一体的。当使用mouseover的时候，父元素跟子元素是分离的，当从父元素进入子元素的时候，相当于父元素mouseout和子元素的mouseover。

2.2键盘事件

用户每次按下或者释放键盘上的键的时候都会产生的时间。常用键盘事件：

image.png

示例代码：

    





    
会员登录
    

        
用户名：
        

    
    

        
密码：
        

    
    

        

        
 
    
    

image.png

2.3浏览器事件

调整窗口大小时，完成页面特效。
语法：

$(selector).resize();

示例代码：

三、总结

image.png