前端学习（十）--- jQuery中的事件与动画

一、jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类如下：
基础事件
鼠标事件
键盘事件
表单事件
window事件
复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击

鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

示例：

<style type="text/css">
ul{list-style:none}
li{display:inline;padding:15px;margin:10px;background-color:gray}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("li").mouseover(function(){
	    $(this).css("background-color","green");
	});
	$("li").mouseout(function(){
	    $(this).css("background-color","gray");
	});
});

</script>
<ul>
<li>首页</li><li>就业企业</li><li>金牌课程</li>
<li>名师阵容</li><li>实战项目</li>
<li>故事</li><li>我要报名</li>
</ul>

键盘事件

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

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $(document).keydown(function(){
	    if(event.keyCode==13){
	       alert("您按了回车键！");
		}
	});
});

</script>
<input>

表单事件

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

二、绑定事件

除了使用事件名绑定事件外，还可以使用on()方法，其语法如下：
on(event,[selector],[data],fn)

参数	含义	描述
[event]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[selector]	选择器	一个最初传递到.on()事件处理程序附加的选择器
[data]	数据	当一个事件被触发时要传递event.data给事件处理函数
[fn]	处理函数	用来绑定的处理函数

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("input[name=event_1]").on("click",function() {
        $("p").css("background-color", "lightpink");
    });

});

</script>
<p>ppppppp</p>
<input name="event_1" type="button" value="ok">

on()方法还可以同时为多个事件绑定方法
示例：
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("input[name=event_1]").on({
       mouseover: function () {
	      $("ul").css("display", "none");
       },
       mouseout: function () {
	      $("ul").css("display", "block");
       }
     });
});

</script>
<input name="event_1" type="button" value="ok">
<br><br><br><br>
<ul><li>星期六啦</li></ul>

三、移除事件

off([type],[selector],[fn])

参数	含义	描述
[type]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[selector]	选择器	一个最初传递到.on()事件处理程序附加的选择器
[fn]	处理函数	用来绑定的处理函数

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

四、鼠标光标悬停事件

hover()方法相当于mouseover与mouseout事件的组合

扫描二维码关注公众号，回复： 5265243 查看本文章

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#home").hover(function(){//第一个函数是mouseover事件处理函数
	   $("#div1").css("color","blue");
	},function(){//第二个函数是mouseout事件处理函数
	   $("#div1").css("color","pink");
	});
});

</script>
<div id="div1">div1</div>
<a href="#" id="home">首页</a>

五、jQuery中的动画

jQuery提供了很多动画效果，如：
控制元素显示与隐藏
切换元素状态
控制元素淡入淡出
滑动效果

1、显示及隐藏元素
show() 在显示元素时，能定义显示元素时的效果，如显示速度
$(".content").show(600);
显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

hide() 在隐藏显示元素时，能定义隐藏元素时的效果，如隐藏速度
$(".content").hide(“fast”);
隐藏速度可以取如下值：毫秒（如1000）、slow、normal、fast

2、切换元素可见状态
toggle() 用于切换元素的可见状态
速度可以取如下值：毫秒（如1000）、slow、normal、fast

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("#div1").show();
	});
	$("#btn2").click(function(){
	    $("#div1").hide();
	});
	$("#btn3").click(function(){
	    $("#div1").toggle();
	});
});

</script>
<div id="div1">div1</div>
<input type="button" id="btn1" value="show()">
<input type="button" id="btn2" value="hide()">
<input type="button" id="btn3" value="toggle()">

3、淡入淡出效果
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
速度可以取如下值：毫秒（如1000）、slow、normal、fast

4、滑动效果
slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
速度可以取如下值：毫秒（如1000）、slow、normal、fast

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("#img1").fadeOut('slow');
	});
	$("#btn2").click(function(){
	    $("#img1").fadeIn('slow');
	});
	$("#btn3").click(function(){
	    $("#img1").slideDown('slow');
	});
	$("#btn4").click(function(){
	    $("#img1").slideUp('slow');
	});
});
</script>
<input type="button" id="btn1" value="fadeOut()">
<input type="button" id="btn2" value="fadeIn()">
<input type="button" id="btn3" value="slideDown()">
<input type="button" id="btn4" value="slideUp()">
<br>
<img id="img1" src="logo.png" width="300px" height="300px">