jQuery（三）

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

器三三三

方法 描述

click() 触发或将函数绑定到指定元素的 click事件

dblclick() 触发或将函数绑定到指定元素的 dblclick事件

mouseover() 触发或将函数绑定到指定元素的 mouseover 事件

mouseout() 触发或将函数绑定到指定元素的 mouseout 事件

hover() 当鼠标移动到元素上时，会触发指定的第一个函数 (mouseenter)

当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

3.2.2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有

方法 描述

keydown() 触发或将函数绑定到指定元素的 keydown 事件

keyup() 触发或将函数绑定到指定元素的 keyup事件

keypress() 触发或将函数绑定到指定元素的 keypress 事件

3.2.3 表单事件

当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件

方法 描述

focus() 当元素获得焦点时，会触发 focus 事件

blur() 失去焦点时，会触发 blur 事件

change() 当元素的值改变时发生change 事件

3.3 事件绑定

除了使用事件名绑定事件外，还可以通过其他方式绑定事件:

bind 事件绑定

delegate 事件绑定

on 事件绑定

3.3.1 bind 绑定事件

// 第一个参数:事件类型

// 第二个参数:事件处理程序

$("p").bind("click", function(){

// 事件响应方法

I;

缺点:不支持动态事件绑定

3.3.2 delegate 注册委托事件

// 第一个参数: selector，要绑定事件的元素

// 第二个参数:事件类型

//第三个参数:事件处理函数

$(".parentBox") .delegate("p","click"function(){

// 为.parentBox下面的所有的p标签绑定事件

});

缺点:只能注册委托事件，因此注册时间需要记得方法太多了

3.3.3 on 绑定事件

从jQuery1.7之后，jQuery 用on统一了所有事件的处理方法。

on注册事件语法:

// 第一个参数:events，绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)

// 第二个参数: selector，执行事件的后代元素(可选》，如果没有后代元素，那么事件将有自己执行。

// 第三个参数: data，传递给处理函数的数据，事件触发的时候通过event.data来使用(不常使用)

//第四个参数: handler，事件处理函数

$(selector).on(events [,selector] [,data], handler);

on 注册简单事件:

// 表示给S(selector)绑定事件，并且由自己触发，不支持动态绑定。

$(selector).on("click", function() { });

on注册委托事件:

// 表示给S(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定

$(selector).on("click","span"function(){ });

3.4 事件解绑

3.4.1 unbind 方式，与 bind 对应

$(selector).unbind(); // 解绑所有的事件

$(selector).unbind("click");// 解绑指定的事件

3.4.2 undelegate方式，与 delegate 对应

$(selector).undelegate(); // 解绑所有的delegate事件

$(selector).undelegate("click");// 解绑所有的click事件

3.4.3 off 方式 (推荐)，与 on 对应

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off("click") ;

4动画

4.1 效果

4.1.1 显示/隐藏

show():显示隐藏的元素

参数有:slow 表示慢慢的;fast 表示快的;normal表示中间速度还可以设置具体的时间，单位是毫秒。

$('div') .show('slow') ;

hide():隐藏显示的元素，参数和 show一样

$('div') .hide('slow') ;

·toggle():在show()和 hide0方法之间进行切换

$('div') .toggle('sow');

4.1.2 淡入淡出

fadein0:把显示的元素通过慢慢变淡隐藏起来

第1个参数是速度(fast、normal、slow 或者毫秒数);第2个参数是透明度，值是一个0-1 的数字。

$('div') .fadeIn('slow');

。fadeout(: 把隐藏的元素慢慢地显示出来

$('div') .fadeout() ;

·fadeToggle): 在 fadeIn() 和 fadeout() 之间进行切换。如果是显示就淡入，如果是隐藏就是淡出。

$('div').fadeToggle() ;

4.1.3滑动

。slideUp(): 把元素使用往上收的方式隐藏起来

参数是fast、normal、slow 或者毫秒数

$('div').slideUp('slow'); // 表示把div缓慢的收起来

slideDown():把元素使用向下展开的方式显示出来

$('div').slideDown('slow'); // 如果本身就是显示的,这个是没有效果的·

slideToggle(): 在 slideup()和 sTideDown ()之间切换。如果是显示的就卷上去隐藏，如果是隐藏的就

$('div') .slideToggle( 'slow' ) ;