JQuery中的事件与动画

JQuery中的事件

和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现。事件在元素对象与功能代码中起着重要的桥梁作用。

 

在JQuery中，事件总体分为两大类，基础事件和复合事件。

 

基础事件：

1、鼠标事件

2、键盘事件

3、window事件

4、表单事件

 

复合事件

1、鼠标光标悬停

2、鼠标连续点击

 

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

 

常用鼠标事件的方法

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

 

例如：

//当鼠标移过菜单时

$(".nav-ul a").mouseover(function(){

$(this).css("background-color","#f01e28");

});

//当鼠标移出菜单时

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#ff2832");

});

 

在方法内部，this指向调用这个方法的DOM对象，示例代码中this代表鼠标事件关联的.nav a元素。

 

鼠标事件方法的区别

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave
mouseleave( )

 

 

键盘事件

 

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

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

keypress是较为高级的文本事件，它的事件对象指定产生的字符，而不是按下的键

 

例如：

//当释放键盘时

 $("[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( );

 

绑定事件与移除事件

1、绑定事件

 

在JQuery中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用bind()方法

语法：

 bind(type,[data],fn);

参数类型	参数含义	描述
type	事件类型	主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data]	可选参数	作为event.data属性值传递给事件对象额外数据对象，该参数不是必须的
fn	处理函数	用来绑定处理函数

 

绑定单个事件

例如：

 $(document).ready(function(){

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

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

});

});

 

 

同时绑定多个事件

 

使用bind()方法不仅可以一次绑定一个事件，还可以同时绑定多个事件。

例如：

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

//为mouseover绑定方法

mouseover:function(){

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

},

//为mouseout绑定方法

mouseout:function(){

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

}

});

 

 

移除事件

 

在绑定事件时，可以为匹配元素绑定一个或多个事件，那么同样可以为匹配元素移除单个或多个事件，可以使用unbind()方法

语法：

unbind([type],[fn])

unbind()方法有两个参数，这两个参数不是必需的，当unbind()不带参数时，表示移除所绑定的全部事件。

 

unbind()方法的参数说明

参数类型	参数含义	描述
type	事件类型	主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
fn	处理函数	用来解除绑定处理函数

例如：

$("#del").click(function(){

        $("#nav li:first").unbind("click", content1)

});

 

复合事件

 

1、hover()方法

在JQuery中，hover()方法用于模拟鼠标指针移入和移除事件，当鼠标指针移至元素上时，会触发指定的第一个函数（enter），当鼠标指针移除这个元素时，会触发指定的第二个函数（leave），hover()方法相当于mouseover与mouseout事件的组合

语法：

hover(enter,leave);

 

例如：

$(".top-m .on").hover(function(){
$(".topDown").show();//光标移入时触发
          },
         function(){
 $(".topDown").hide();//光标移出时触发
         }
);
 

2、toggle()方法

toggle()方法分为带参数的方法和不带参数的方法，带参数的方法用于模拟鼠标连续click事件，第一次单击元素，触发指定的第一个参数（fn1）；当再次单击同一个元素时，则触发指定的第二个函数（fn2），如果有更多函数就依次触发，直到最后一个，随后的每次单击都重复对这几个函数轮番调用。

语法：

toggle(fn1,fn2,...,fnN);

例如：

$("input").toggle(

        function(){$("body").css("background","#ff0000");},

         function(){$("body").css("background","#00ff00");},

          function(){$("body").css("background","#0000ff");}

    )

 

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

语法：

toggle();

例如：

$("input").click(function(){$("p").toggle();})

toggleClass( )可以对样式进行切换

语法：

toggleClass(className);

例如：

$("input").click(function(){$("p").toggleClass("red");})

toggle( )和toggleClass( )总结

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

 

 

JQuery中的动画

 

jQuery提供了很多动画效果

控制元素显示与隐藏

改变元素的透明度

改变元素高度

自定义动画

 

 

控制元素显示

 

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

 

语法：

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

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

 

show()和hide()方法的参数说明

参数	描述
speed	可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback	可选。show函数执行完之后，要执行的函数

 

例如：

$(document).ready(function(){

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

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

},

function(){

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

}

);

 

 

改变元素透明度

 

1、控制元素淡入

 

在JQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义元素淡入时的效果。

语法：

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

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

 

fadeIn()和fadeOut()方法的参数说明

参数	描述
speed	可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback	可选。show函数执行完之后，要执行的函数

 

例如：

$(document).ready(function() {

$("input[name=fadein_btn]").click(function(){

$("img").fadeIn("slow");

});

$("input[name=fadeout_btn]").click(function(){

$("img").fadeOut(1000);

});

});

 

 

改变元素高度

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

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

 

语法：

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

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

例如：

$(document).ready(function() {

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

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

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

       });

 });

 

 

自定义动画

 

语法：

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

 

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

speed：可选，规定效果时长，取值：毫秒，fast，slow

callback：可选，滑动完成后执行的函数名称

 

例如:

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

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

    $("div").animate({left:'250px'});

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

</body>