jQuery中的事件与动画

最新推荐文章于 2023-11-16 15:26:50 发布

原创最新推荐文章于 2023-11-16 15:26:50 发布 · 734 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文详细介绍了jQuery中的事件和动画，包括基础事件如载入、鼠标、键盘、浏览器事件，以及绑定与移除事件的方法。此外，还探讨了jQuery的复合事件hover和toggle，以及如何控制元素显示、隐藏、透明度和高度的动画效果。

jQuery中的事件

在jQuery中事件总共分为两大类；基础事件和复合事件。jQuery中的简单事件，与javaScript中的事件几乎一样，都含有鼠标事件，键盘事件，裁件事件等，只是其对应的方法名称有略微不同，复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

基础事件

在javaScript中，常用的基础事件有鼠标事件，键盘事件，window事件，表单事件。事件绑定和处理函数的语法格式如下。

事件名="函数名()";

或者

DOM对象.事件名=函数；

在事件绑定处理函数后，可以通过DOM对象.事件名(）的方式显示调用处理函数，在jQuery中，基础事件和javascript中的事件一致，他提供了特有的事件方法将事件处理函数绑定。下面按基础事件的各种类型分别介绍。

1.载入事件
所谓载入事件，也就是window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。例如，打开网页时加载页面，关闭窗口，调节窗口大小，移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready()。

2.鼠标事件
鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件。
在这里插入图片描述
从表中可以看到，jQuery中的事件的方法名称与javaScript的事件方法名称不一样，如单击事件，在javascript中写作onclick，而在jQuery中为click；鼠标指针移至元素上事件，在javascript中写作onmouseover，在jQuery中写作mouseover，

示例：使用jQuery事件鼠标指针移至导航上时，当前导航背景颜色变化；鼠标指针离开导航时，背景颜色恢复，代码如下：

 <body>
	<div class="top">
		<div class="wrap">
			<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
			<ul class="top-m right">
				<li><a href=""><i class="top-car left"></i>购物车</a></li>
				<li class="line"></li>
				<li><a href="">我的订单</a></li>
				<li class="line"></li>
				<li><a href="">当当自出版</a></li>
				<li class="line"></li>
				<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
				<li class="line"></li>
				<li>
					<a href="" class="menu-btn">我的当当</a>
				</li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">企业采购</a></li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">客户服务</a></li>
				<li class="line"></li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="wrap">
		<a href=""><img src="images/logo.jpg"/></a>
	</div>
	<div class="nav-box">
		<div class="wrap">
			<ul class="nav-ul">
				<li class="all"><a href="">全部商品详细分类</a></li>
				<li><a href="">尾品会</a></li>
				<li><a href="">图书</a></li>
				<li><a href="">电子书</a></li>
				<li><a href="">服装</a></li>
				<li><a href="">运动户外</a></li>
				<li><a href="">婴孕童</a></li>
				<li><a href="">家具</a></li>
				<li><a href="">当当优品</a></li>
				<li><a href="">电器城</a></li>
				<li><a href="">当当超市</a></li>
				<li><a href="">海外购</a></li>
				<div class="clearfix"></div>
			</ul>
		</div>
	</div>
    <script src="js/jquery-1.12.4.js"></script>
 <script>
	 $(function(){
	 /*鼠标指针移至导航上时背景颜色加深*/
		 $(".nav-ul a").mousemove(function(){
			 $(this).css("background-color","#f01e28");
		 });
		 $(".nav-ul a").mouseout(function(){
			 $(this).css("background-color","#ff2832");
		 });
	 });
 </script>
 </body>

在方法内部，this指向调用这个方法的DOM对象，在上述代码中，this正好代表#nav a元素。

在这里插入图片描述

在Web应用中，鼠标事件非常重要，它们在改善用户体验方法功不可没。鼠标事件常常被用于网站导航，下拉菜单，选项卡，轮播广告和网页组件的交互制作中。

3.键盘事件
键盘事件指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。常用的键盘事件有keydown，keyup和keypress。

keydown事件发生在键盘被按下的时候，keyup事件发生在键盘被释放的时候，在keydown和keyup之间会触发另外一个事件——keypress事件。当按下键重复产生字符时，在keyup事件之前可能产生很多keypress事件。keypress是较为高级的文本事件，它的事件对象指定产生的字符，而不是按下的键。所以浏览器都支持keydown，keyup和keypress事件，常用的键盘事件方法如表所示。
在这里插入图片描述
示例：在密码框中输入内容时将激发三个键盘事件，并把发生的事件的内容显示在页面中，

<body>
<fieldset>
	<legend>会员登录</legend>
	<dl>
	    <dt>用户名：</dt>
	    <dd><input id="userName" type="text" /></dd>
	</dl>
	<dl>
	    <dt>密码：</dt>
	    <dd><input id="password" type="password" /></dd>
	</dl>
	<dl>
	    <dt></dt>
	    <dd><input type="submit" value="登 录" /> </dd>
	</dl>
	<span id="events"></span>
</fieldset>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		$("[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){ //按Enter键
				alert("确定要提交吗？")
			}
		});
	});
</script>
</body>

从键盘事件的方法中，可以获取当前按键的值（keyCode），识别按下了哪个键。以上示例展示了这种用法，需要注意所用的方法中要定义一个参数，表示当前的事件对象。另外从该示例中可以看出，这三个键盘事件的执行顺序依次是keydown，keypress，keyup。

4.浏览器事件
在浏览网页时，大家经常会调整浏览器窗口大小，在调整窗口大小时，页面会有一些变化，这些都是通过jQuery中的resize()方法触发resize事件，进而处理相关函数，来完成页面的一些特效的，resize()语法如下所示：

$(selector).resize();

绑定事件与移除事件

在jQuery中，绑定事件与移除事件也属于基础事件，它们主要用于绑定或移除其他基础事件，如click，mouseover，mouseout等，也可以绑定或移除自定义事件。

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

bind(type,[data],fn)

bind(）方法用三个参数，其中参数data不是必须的，
在这里插入图片描述

绑定单个事件
示例：实现鼠标移至“我的当当”显示二级菜单，如下所示：

	<div class="top">
		<div class="wrap">
			<div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
			<ul class="top-m right">
				<li><a href=""><i class="top-car left"></i>购物车</a></li>
				<li class="line"></li>
				<li><a href="">我的订单</a></li>
				<li class="line"></li>
				<li><a href="">当当自出版</a></li>
				<li class="line"></li>
				<li><a href=""><i class="top-tel left"></i>手机当当</a></li>
				<li class="line"></li>
				<li class="on">
					<a href="" class="menu-btn">我的当当</a>
					<ul class="topDown">
						<li><a href="">我的积分</a></li>
						<li><a href="">我的收藏</a></li>
						<li><a href="">我的余额</a></li>
						<li><a href="">我的评论</a></li>
						<li><a href="">电子书架</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
 <script src="js/jquery-1.12.4.js"></script>
 <script>
	 $(function(){
		$(".on").bind("mouseover",function(){
			$(".topDown").show();
		});
	 });
 </script>
 </body>

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

 <script>
	 $(function(){
		$(".on").bind({mouseover:function(){
			$(".topDown").show();
		},
			mouseout:function(){
				$(".topDown").hide();
			}
		});
	 });
 </script>

运行上面的代码，就能够实现当鼠标移至“我的当当”上时显示二级菜单，移开鼠标指针时隐藏二级菜单。

移除事件
有时候事件执行完了，需要把绑定的事件通过一定的办法取消，在jQuery中，提供了移除事件的方法，在绑定事件时，可以为匹配元素绑定一个或者多个事件，那么同样可以为匹配的元素移除单个或多个事件，可以使用unbind（）方法，其语法如下：

unbind([type],[fn]);

unbind()方法有两个参数，这两个参数不是必需的，当unbind()不带参数时，表示移除所绑定和全部事件。unbind()的参数说明如下表：
在这里插入图片描述
示例：使用任务列表tab切换页面演示移除一个或者多个事件的用法；

<body>
<section id="taskList">
    <ul id="nav"><li>日常任务</li><li>成长任务</li></ul>
    <div class="taskContent">
        <ul id="dayTask">
            <li>
                <div>
                    <h1>交口称赞</h1>
                    <p>为喜欢的回答送出一个赞</p>
                    <p>奖励：<span>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>每日答题</h1>
                    <p>前往回答一个问题</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>助人为乐</h1>
                    <p>当日获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
        </ul>
        <ul id="growTask">
            <li>
                <div>
                    <h1>成长之路</h1>
                    <p>知道等级达到2级</p>
                    <p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                    <h1>知识之路</h1>
                    <p>在知道获得1个采纳</p>
                    <p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></p>
                </div>
                <div><input type="button" value="前往"></div>
            </li>
            <li>
                <div>
                </div>
                <div><input type="button" id="del" value="解除绑定"></div>
            </li>
        </ul>
    </div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("#nav li:first").bind("click",bg1=function(){
            $(".taskContent").css("background","#26a6e3");
        }).bind("click",content1=function(){
            $("#dayTask").show();
            $("#growTask").hide();
        });
        $("#nav li:last").bind("click",bg2=function(){
            $(".taskContent").css("background","#ff9400");
        }).bind("click",content2=function(){
            $("#dayTask").hide();
            $("#growTask").show();
        });
    });

</script>
</body>

现在增加移除事件，首先仅解除一个事件，即单击“日常任务时”仅改变背景颜色，不进行内容切换：代码如下：

  $("#del").click(function(){
            $("#nav li:first").unbind("click",content1);
        });

移除单击“日常任务”的所有事件

  $("#del").click(function(){
            $("#nav li:first").unbind();
        });

复合事件

在jQuery中有两个复合事件方法——hover（）和toggle（）方法，这两个方法与ready()类似，都jQuery自定义的方法。

1.hover（）方法
在jQuery中 hover()方法用于模拟鼠标指针移入移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数(enter);当鼠标指针移出这个元素时，会触发指定的第二个参数(leave),该方法相当于mouseenter和mouseleave事件的组合。语法格式如下：

hover(enter,leave)

示例：下面使用hover（）实现当当图书导航中“我的当当”二级菜单的显示和隐藏

 <script>
	 $(function(){
		 $(".top-m .on").hover(function(){
			 $(".topDown").show();
		 },
			function(){
				$(".topDown").hide();
			}
		 );
	 });
 </script>

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

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

示例：展示点击内容页面，页面背景按红，绿，蓝循环切换。

<body>
<input type="button" value="点我吧">
<p>我一会显示一会隐藏</p>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//    $("input").toggle(
//            function(){$("body").css("background","#ff0000");},
//            function(){$("body").css("background","#00ff00");},
//            function(){$("body").css("background","#0000ff");}
//    )
   
});
</script>
</body>

toggle()不带参数时，与show（）和hide（）方法一样，切换元素的可见状态，如果元素是可见的则切换为隐藏状态，如果元素是隐藏的，则切换为可见状态，语法：

toggle();

与jQuery中的toggle（）方法一样，toggleClass()可以对样式进行切换，实现事件触发时某元素在“加载某个样式” 和 “移除某个样式” 之间切换，语法如下：

toggleClass(classname);

在上面示例基础上增加样式代码如下所示：

 .red{
            font-size: 28px;
            color: red;
        }

改变示例中的代码，单击按钮，p标签中的字体在加载类样式red和移除类样式red之间切换代码如下

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

综上所述 toggle（）和toggleClass（）方法的总结如下图：
在这里插入图片描述

jQuery中的动画

控制元素的显示和隐藏

1.控制元素的显示
在jQuery中，可以使用show()方法控制元素的显示，show()等同于$(selector).css(“display”,“block”)，除了可以控制元素的显示外，他还能定义显示元素时的效果，如显示速度。show()的语法如下：

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

show()参数说明如表所示：
在这里插入图片描述

2.控制元素的隐藏
在jQuery()，与show()方法对应的时hide()方法，该方法可以控制元素的隐藏。hide()方法等同于$(selector).css(“display”,“none”);除了可以控制元素的隐藏外，它还能定义隐藏元素时的效果，如隐藏速度，语法如下：

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

其参数设置方式与show()方法相同，绝大多数情况下，hide()方法与show()方法总是在一起使用，如选项卡，下拉菜单，提示信息等。

示例：演示隐藏和显示速度：

 <script>
	 $(function(){
		 $(".top-m .on").hover(function(){
					 $(".topDown").show("slow");
				 },
				 function(){
					 $(".topDown").hide("fast");
				 }
		 );
	 });
 </script>

改变元素的透明度

jQuery中提供的动画效果相对丰富，除了显示和隐藏元素外，还有改变元素透明度和高度，。

1.控制元素淡入
在jQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义元素的淡入时的效果，如显示速度。fadeIn(）方法的语法格式如下。

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

fadeIn()方法的参数说明如下表所示：
在这里插入图片描述

在这里插入图片描述
2.控制元素的淡出

在jQuery中与fadein()方法对应的时fadeOut()方法，它们经常结合使用，该方法可以控制元素的淡出。该方法除了可以控制元素的淡出外，还能定义显示元素时的效果，如淡出速度。fadeOut（）方法语法如下

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

其参数设置方式与fadeIn相同。

示例：实现单击按钮时图片的淡入和淡出

<body> 

<img src="images/ad.jpg"  /><br/>
<input name="fadein_btn" type="button" value="淡入" /> 
<input name="fadeout_btn" type="button" value="淡出" />
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		$("input[name=fadein_btn]").click(function(){
			$("img").fadeIn("slow");
		});
		$("input[name=fadeout_btn]").click(function(){
			$("img").fadeOut(1000);
		});
	});
</script>
</body>

从代码上可以看到，单击“淡入”按钮以速度“slow”显示图片，单击“淡入”按钮以“1000”毫秒的速度显示图片。

改变元素的高度

在jQuery中，用于改变元素高度的方法是slideUp()和slideDown()。如元素的display属性值为none，当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp（）方法正好相反，元素从下到上缩短直至隐藏，语法格式如下：

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

与fadeIn()和fadeOut()方法中的参数一样，speed为可选参数，用来规定改变元素高度的时长，它的取值也是slow，fast或毫秒。
callback为可选参数，表示改变元素高度完成后执行的函数名称，这个参数在实际网页开发中应用并不是很多。

示例：使用slideUp()和slideDown()方法制作，单击“窗边小豆豆”标题时，相关的文字说明先缓慢向上收起，然后缓慢向下展开。

<body> 
    <div id="box">
      <h2>窗边的小豆豆</h2>
      <div class="txt">
        <p>本书讲述了作者上小学的一段真实的故事。</p>
        <p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
        <p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
      </div>
    </div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("h2").click(function(){
            $(".txt").slideUp("slow");
            $(".txt").slideDown(2000);
        });
    });
</script>
</body>

注意：jQuery中的所有动画效果，都可以设置三种速度参数，即slow，normal，fast(三者对应的事件分别为0.6秒，0.4秒和0.2秒)。
当使用关键字作为参数时，需要使用双引号印起来，日fadeIn(“slow”);而使用时间数值作为参数时，则不需要使用双引号，如fadeIn(500)。需要注意的是，当使用时间数值作为参数时，其单位为毫秒，而不是秒。

自定义动画

在jQuery中，除了以上的几种动画，还可以创建自定义动画，实现各种比较复杂的动画。
语法：

$(selector).animated({params},speed,callback);

与show()和hide()中的参数一样，自定义动画方面aimate()的参数说明如下。

params:必须，定义形成动画的css属性
speed：可选，规定效果时长，取值，毫秒，fast，slow。
callback：可选，滑动完成后执行的函数名称。