jQuery事件与特效

jQuery事件与特效

jQuery中的事件

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

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标事件

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

鼠标事件方法的区别

 键盘事件

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

 键盘事件

以键盘事件为例，实现按键时特效

$("[type=password]").keyup(function () {

$("#events").append("keyup");

      }).keydown(function (e) {

$("#events").append("keydown");

      }).keypress(function () {

$("#events").append("keypress");

     });

$(document).keydown(function (event) {

 if (event.keyCode == "13") {

alert("确认要提交么？");

}

});

浏览器事件

调整窗口大小时，完成页面特效

$(selector).resize( );

 

index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈

元素的位置。

绑定事件与移除事件

 绑定事件

移除事件

绑定事件

on(type);

Type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件

绑定单个事件

使用绑定实现鼠标移至显示二级菜单

$(".on").on("mouseover",function(){

$(".topDown").show();

});

 同时绑定多个事件

使用绑定多个事件实现二级菜单的显示和隐藏

$(".top-m .on").on({

mouseover:function(){

$(".topDown").show();

},

mouseout:function(){

$(".topDown").hide();

}

});

利用on给未来元素，做事件委托处理：

$("body").on("mouseover",".abc",function(){

$(".topDown").show();

});

移除事件

移除事件使用off()方法

off([type]])

Type:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件

当off()不带参数时，表示移除所绑定的全部事件

 hover()方法

hover()方法相当于mouseenter与mouseleave事件(这俩元素进入子元素时候不触发事件)的组合

hover(enter,leave);

第一个函数表示光标移入时触发

第二个函数表示光标移出时触发

 $(".top-m .on").hover(function(){

$(".topDown").show();

          },

         function(){

 $(".topDown").hide();

         }

);

jQuery动画效果

jQuery提供了很多动画效果

控制元素显示与隐藏

改变元素的透明度

改变元素高度

自定义动画

  toggle()方法

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
该方法也可用于切换被选元素的 hide() 与 show()

toggle()方法不带参数，与show( )和hide( )方法作用一样

控制元素的显示及隐藏

show() 控制元素的显示，hide( )控制元素的隐藏

$(selector).show([speed],[callback])

callback：回调函数

$(selector).hide([speed],[callback])

speed 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

callback可选。show函数执行完之后，要执行的函数

 改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

改变元素的高度

slideDown() 可以使元素逐步延伸显示

slideUp()则使元素逐步缩短直至隐藏

 $(selector).slideUp ([speed],[callback])

$(selector).slideDown ([speed],[callback])

$(document).ready(function() {

       $("h2").click(function(){

   $(".txt").slideUp("slow");

   $(".txt").slideDown("slow");

       });

 });

练习1：

鼠标移至“联系客服”，二级菜单以”slow“速度显示；当鼠标离开时，二级菜单以“fast”速度隐藏

鼠标一级菜单时，使用slideDown( ) 实现二级菜单以“slow”速度显示；当鼠标再次单击一级菜单时，使用slideUp( ) 实现二级菜单以”slow“速度隐藏

自定义动画

$(selector). animate({params},speed,callback)

Params：必须，定义形成动画的CSS属性

不支持background属性，反复执行需要先变大小，