jQuery中的事件与动画

最新推荐文章于 2022-05-16 22:40:39 发布

yananye

最新推荐文章于 2022-05-16 22:40:39 发布

阅读量671

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/yananye/article/details/114019775

版权

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

摘要由CSDN通过智能技术生成

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