jQuery事件与特效

最新推荐文章于 2024-05-16 10:00:15 发布
最新推荐文章于 2024-05-16 10:00:15 发布
阅读量467 收藏 1
点赞数 3
分类专栏： 前端 文章标签： jquery javascript 前端 开发语言 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57051895/article/details/127897009
版权

目录

jQuery事件

鼠标事件

         click()方法

        dblclick()方法

        mouseover()方法

        mouseout()方法

绑定和移出事件

  on()方法

        off()方法

复合事件

        hover()方法

jQuery特效

控制元素显示与隐藏

        show()方法

        hide()方法

元素淡入、淡出

        fadeIn()和fadeOut()方法

改变元素高度显示与隐藏

        slideUp()方法

        slideDown()方法

总结

jQuery事件

鼠标事件

         click()方法

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

<!DOCTYPE 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事件

<!DOCTYPE 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事件

<!DOCTYPE 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事件

<!DOCTYPE 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方法中绑定多个参数时写在{}里，各事件之间用逗号隔开

<!DOCTYPE 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()事件移出方法，如果方法中有参数，则移出该元素上的事件；如果方法中没有参数，则移出该元素上的所有事件

<!DOCTYPE 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事件的组合

<!DOCTYPE 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函数执行完之后，要执行的函数

<!DOCTYPE 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函数执行完之后，要执行的函数

<!DOCTYPE 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函数执行完之后，要执行的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slideUp和slideDown</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').slideDown(3000);
		},function(){
			//当鼠标移出button元素时，隐藏divd元素，隐藏速度3秒
			$('div').slideUp(3000);
		});
	</script>
</html>

总结

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

luckyboy!
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery动画与特效详解
10-24
本文主要是讲解和学习jQuery的自动显隐，渐入渐出、飞入飞出、自定义动画等。非常详细，这里推荐给有需要的小伙伴。
jQuery文字显示特效
06-01
标签“js特效”和“jQuery特效”暗示了这些特效是通过JavaScript语言和jQuery库实现的。JavaScript是一种在客户端运行的脚本语言，它可以修改DOM（文档对象模型），进而改变网页内容和样式。jQuery库简化了...
jquery事件与特效
rincoo_的博客
03-01 393
事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 mouseleave( ) 触发或将函数
jQuery事件与动画
梦寐的博客
09-10 202
jQuery中的事件 jQuery事件是对JavaScript事件的封装，常用事件分类     基础事件         鼠标事件         键盘事件         window事件         表单事件     复合事件         鼠标光标悬停         鼠标连续点击 鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件 click( )        触发或...
你真的拿捏 jQuery 四大动画效果了吗？【入门篇超详细 零基础适用】
最新发布
2401_84150165的博客
05-16 290
一：显示与隐藏=========显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了，那就是，但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数，其实这两个方法是有隐藏参数的，当然 可以带参数可以不带参数。**speed，****，，fn**1.1 显示函数show ( speed，easing，fn )，可以带参数可以不带参数，可以让元素显示，下面代码的意义为，显示的过程为5000毫秒(5秒) ，显示过后会调用回调函数，并且过程以 swing 的方式过渡。
Jquery事件和特效
qq_43663401的博客
12-13 86
事件 (1)鼠标事件 ①$ (selector).click(function(){}); - 鼠标的点击事件 ②$ (selector).mouseover(function(){}) ;- 鼠标移上事件 ③$ (selector).mouseleave(function(){}); – 鼠标离开事件 ④$ (selector).mouseenter(function(){}); – 鼠标进入事件 ⑤$(selector).mouseout(function(){}); – 鼠标移出事件 (2..
JQuery动画与特效实例分析
10-24
主要介绍了JQuery动画与特效的用法,实例分析了显示与隐藏、滑动、淡入淡出及自定义动画的使用技巧,需要的朋友可以参考下
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
Jquery特效
03-28
**jQuery特效概述** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，特别是对于网页动态效果和交互。jQuery的出现使得开发者可以快速、高效地实现各种复杂的网页特效，无需深入理解底层...
jQuery点击事件和特效
lipeiwen1998的博客
07-22 355
jQuery添加点击事件 /* 给按钮button绑定点击事件 */ //方法一 $("button").click(function(){ alert("我是点击事件里的弹窗"); }); //方法二 $("button").on("click",function(){ alert("我是第二个点击事件里的弹窗"); }); /* 方法二中用on方法绑定click事件 on()方法 提供绑定事件处理程序所需的所有功能 on()可在选择元素上绑定一个或多个事件的事件处理函数 */ /
jquery常用事件及特效
13东倍
12-17 1151
（1）jquery获取文本框焦点 你好  $('input').focus(function() {   $('span').show();  }); （2）jquery获取鼠标位置  $(document).click(function(e) {   var x=e.pageX;   var y=e.pageY;   $('#username')
jQuery学习笔记——事件与特效
weixin_46271306的博客
01-31 142
一、鼠标事件 1.click( ) ：单击鼠标时，触发或将函数绑定到指定元素的click事件 2.mouseover( )：鼠标指针移过时，触发或将函数绑定到指定元素的mouseover事件 3.mouseout( )：鼠标指针移出时，触发或将函数绑定到指定元素的mouseout事件 $(function(){ // 获取a标签，绑定鼠标移入事件 $(".nav-ul li a").mouseover(function(){ $(this).css("background","#F
jQuery 动画特效show() hide() slideUp() slideDown() fadeIn() fadeOut() animate() stop() delay()
ssisse的博客
06-01 1999
调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为： $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callba
jquery效果
jeo_chow的博客
08-14 184
效果 body{ font-family: "Microsoft YaHei"; text-align: center; } #mainDiv { width: 100%; text-align: center; margin-top:10px; }
HTML-jQuery中的事件与动画
南劲竹的博客
09-16 606
网页中的事件 和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现 jQuery中的事件： jQuery事件是对JavaScript事件的封装，常用事件分类： 基础事件：①鼠标事件；②键盘事件；③window事件；④表单事件 复合事件：①鼠标光标悬停；②鼠标连续点击 鼠标事件： 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件...
jQuery showHide动画效果
YOUAFR的博客
10-25 802
手风琴效果 *{margin:0;padding:0;} ul, li{list-style: none;} 员工管理 个人信息 .... 部门管理 部门信息 .... 系统管理 系统信息

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值