jQuery成功之路——jQuery事件和插件概述

一、jQuery的事件

1.1常用事件

jQuery绑定事件，事件名字没有on。

事件名称	事件说明
blur	事件源失去焦点
click	单击事件源
change	内容改变
keydown	接受键盘上的所有键(键盘按下)
keypress	接受键盘上的部分键（ctrl,alt,shift等无效）(键盘按下)
keyup	键盘抬起
mouseover	鼠标悬停(鼠标移入)
mouseout	鼠标离开

1.2 on绑定事件

• 语法

jQuery元素对象.on(事件名称,function(){
    //逻辑代码
})
​
其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等

• 代码

• 代码效果

1.3 off解绑事件

• 语法

jQuery元素对象.off(事件名称);
​
其中：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

• 代码

代码效果

1.4 事件切换

普通写法

• 代码

    
        
        
        
        
    
    
        
鼠标移入变成绿色，移出回复红色
    

• 效果

链式写法

• 代码

    
        
        
        
        
    
    
        
鼠标移入变成绿色，移出回复红色
    

• 效果

切换函数写法

• 语法

hover([over,]out)
    其中：
    over代表鼠标移入事件触发的函数；
    out代表鼠标移出事件触发的函数。

• 代码

    
        
        
        
        
    
    
        
鼠标移入变成绿色，移出回复红色
    

• 效果

二、jQuery的插件

2.1jQuery的插件机制

jQuery插件机制概述

jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。

jQuery插件机制语法

语法	解释
jQuery.fn.extend(object)	对jQuery对象进行方法扩展
jQuery.extend(object)	对jQuery全局进行方法扩展

对jQuery对象进行方法扩展

• 代码

    
        
        
        
        
    
    
        
        
        

        足球
        篮球
        排球
    
    

​

• 效果

对jQuery全局进行方法扩展

• 代码

• 效果

2.2表单校验插件validator

表单校验插件概述

网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。表单校验插件是按照一定的语法编写代码，可以使用简单的代码完成复杂的表单校验工作。

表单校验插件的基本语法

开发步骤

• 下载jquery-validation插件

• 将该插件（也就是一个js文件）导入到我们的工程中

• 在要使用校验插件的html中引入该js文件

• 编写表单校验的代码（语法）

  $("form表单的选择器").validate({
      rules:{
        表单项name值:校验规则，
        表单项name值:校验规则... ...
      },
      messages:{
        表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
      }
  });

  其中，rules是对表单项校验的规则，messages是对应的表单项校验失败后的错误提示信息。

  注意，当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jQuery验证插件会自动帮助我们控制它的显示与隐藏。

  错误信息

  如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了。

常用的校验规则

表单校验插件自定义校验方法

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

自定义校验规则步骤如下：

• 使用$.validator.addMethod("校验规则名称",function(value,element,params){});

• 在rules中通过校验规则名称使用校验规则

• 在messages中定义该规则对应的错误提示信息其中

  • value是校验组件的value值

  • element是校验组件的节点对象

  • params是校验规则的参数

代码实现

    
        
        
        
        
        
        
        
        
​


    
员工信息录入
    

        

            

                
真实姓名(不能为空 ,没有其他要求)
                

                
            
            

                
登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):
                

            
             
 
              
密码(不能为空,长度6-12字符或数字,不能包含中文字符):
              

            
            
 
              
重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):
              

            
            

                
性别(必选其一)
                

                     男
                     女
                    必须选择一个性别                       
                
            
            

                
年龄(必填26-50):
                

            
            
 
              
你的学历:
              
 
                      －请选择你的学历－
                      专科
                      本科
                      研究生
                      硕士
                      博士
                  
              
            
            
 
              
出生日期(1982/09/21):
               

            
            
 
              
兴趣爱好:
              
 
                   乒乓球  
                   羽毛球 
                   上网
                   旅游
                   购物
                  必须选一个
              
            
            
 
                  
电子邮箱:
                  

            
            
 
                  
身份证(15-18):
                  

            
            

                

                

            
        

代码效果