jQuery事件与特效


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>click方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		$(function(){
			//获取div元素并设置鼠标单击事件
			$('div').click(function(){
				//鼠标单击时获取div元素设置背景色红色
				$('div').css('background-color','#f00');
			});
		});
	script>
html>

dblclick()方法

描述：鼠标双击时触发绑定到指定元素的click事件


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>click方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		$(function(){
			//获取div元素并设置鼠标双击事件
			$('div').dblclick(function(){
				//鼠标双机时获取div元素设置背景色绿色
				$('div').css('background-color','#0f0');
			});
		});
	script>
html>

mouseover()方法

描述：鼠标移入时触发绑定到指定元素的mouseover事件


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mouseover方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		// 获取div元素并设置mouseover方法
		$('div').mouseover(function(){
			//鼠标移入时，获取div元素设置背景色lvse
			$('div').css('background-color','#0f0');
		})
	script>
html>

mouseout()方法

描述：鼠标移出时触发绑定到指定元素的mouseover事件


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mouseout方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		// 获取div元素并设置mouseout方法
		$('div').mouseout(function(){
			//鼠标移出时，获取div元素设置背景色红色
			$('div').css('background-color','#f00');
		})
	script>
html>

绑定和移出事件

on()方法

描述：在on方法中可以绑定一个或者多个事件，当on方法中绑定多个参数时写在{}里，各事件之间用逗号隔开


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>on方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		// $(function(){
		// 	//获取div元素并在on方法中设置click方法绑定事件
		// 	$('div').on('click',function(){
		// 		$('div').css('background-color','#f00');
		// 	});
		// });
		$(function(){
			//获取div元素并在on方法中设置click方法绑定事件
			$('div').on({'click':function(){
				$('div').css('background-color','#f00');
			},'dblclick':function(){
				$('div').css('background-color','#0f0');
			}
			});
		});
	script>
html>

off()方法

描述： off()事件移出方法，如果方法中有参数，则移出该元素上的事件；如果方法中没有参数，则移出该元素上的所有事件


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>off方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		$(function(){
			//获取div元素并在on方法中设置click方法绑定事件
			$('div').on({'click':function(){
				$('div').css('background-color','#f00');
			},'dblclick':function(){
				$('div').css('background-color','#0f0');
			}
			});
			// off():事件移出方法，如果方法中没有参数，则移出该事件上的所有事件
			// $('div').off();
			//移出div元素上的鼠标单击事件
			$('div').off('click');
		});
	
	script>
html>

复合事件

hover()方法

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


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hover方法title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<div>div>
	body>
	<script>
		$('div').hover(function(){
			$('div').mouseover(function(){
				$('div').css('background-color','#f00');
			});
		},function(){
			$('div').mouseout(function(){
				$('div').css('background-color','#0f0');
			});
		});
	script>
html>

jQuery特效

控制元素显示与隐藏

show()方法

描述：show方法控制元素的显示；在show方法中可以设置参数，参数可选，括号内可设置表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast；括号内可设置show函数执行完之后，要执行的函数

hide()方法

描述：hide方法控制元素的隐藏；在hide方法中可以设置参数，参数可选，括号内可设置表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast；括号内可设置show函数执行完之后，要执行的函数


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的显示与隐藏title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<button>显示/隐藏button>
		<div>div>
	body>
	<script>
		//获取button元素并设置hover方法
		$('button').hover(function(){
			//当鼠标移入button元素时，显示div元素,显示速度3秒
			$('div').show(3000);
		},function(){
			//当鼠标移出button元素时，隐藏divd元素，隐藏速度3秒
			$('div').hide(3000);
		});
	script>
html>

元素淡入、淡出

fadeIn()和fadeOut()方法

描述：fadeIn()和fadeOut()通过改变元素的透明度实现淡入淡出效果；在fadeIn()和fadeOut()方法中可以设置参数，参数可选，括号内可设置表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast；括号内可设置show函数执行完之后，要执行的函数


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的淡入与淡出title>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<button>显示/隐藏button>
		<div>div>
	body>
	<script>
		//获取button元素并设置hover方法
		$('button').hover(function(){
			//当鼠标移入button元素时，显示div元素,显示速度3秒
			$('div').fadeIn(3000);
		},function(){
			//当鼠标移出button元素时，隐藏divd元素，隐藏速度3秒
			$('div').fadeOut(3000);
		});
	script>
html>

改变元素高度显示与隐藏

slideUp()方法

描述：slideUp方法可以使元素逐步延伸显示；在slideUp()方法中可以设置参数，参数可选，括号内可设置表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast；括号内可设置show函数执行完之后，要执行的函数

slideDown()方法

描述：slideUp则使元素逐步缩短直至隐藏；在slideDown()方法中可以设置参数，参数可选，括号内可设置表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast；括号内可设置show函数执行完之后，要执行的函数


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slideUp和slideDowntitle>
		<script src="js/jQuery.js">script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid #000;
			}
		style>
	head>
	<body>
		<button>显示/隐藏button>
		<div>div>
	body>
	<script>
		//获取button元素并设置hover方法
		$('button').hover(function(){
			//当鼠标移入button元素时，显示div元素,显示速度3秒
			$('div').slideDown(3000);
		},function(){
			//当鼠标移出button元素时，隐藏divd元素，隐藏速度3秒
			$('div').slideUp(3000);
		});
	script>
html>

总结

以上就是本文所写的全部内容，主要写了jQuery鼠标事件和jQuery特效。鼠标事件有单击事件、双击事件、鼠标移入移出事件，绑定和移出事件。jQuery事件实现元素的显示与隐藏，有show和hide方法、faseIn和fadeOut方法、slideUp、slideDown方法实现元素的显示与隐藏效果。

相关阅读:
概论（二）随机变量
 java毕业设计人才招聘网源码+lw文档+mybatis+系统+mysql数据库+调试
 ElementUI RUOYI 深色适配
 【数据结构初阶】顺序表
 多测师肖sir___ddt讲解（辅助框架）
管理固定资产怎么界定优化
 [每日两题系列]刷算法题咯~~
操作系统学习
 准确率（Accuracy）、精度（Precision）、召回率（Recall）和 mAP 的图解
 如何恢复被.carver勒索病毒加密的数据？
原文地址：https://blog.csdn.net/m0_57051895/article/details/127897009