jQuery中的一些事件与动画

已于 2022-03-22 12:08:32 修改
阅读量655 收藏
点赞数
分类专栏： jQuery JS css 文章标签： css javascript html jquery
于 2022-03-22 12:04:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62881798/article/details/123656556
版权
JS 同时被 3 个专栏收录
31 篇文章 1 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏
jQuery
6 篇文章 0 订阅
订阅专栏

目录

原生态javascript加载函数和jQuery加载函数的使用及区别：

  1.原生态js加载函数的编写   2种形式

2.js中可写多个加载函数的方法（但会被覆盖）

 3.jQuery的加载函数  2种  一个页面可以出现多次

4.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序版本有关  jQuery3.0版本以上   js快

jQuery中三种绑定事件的方法：

获取滚动条被滚动的距离：

合成事件hover 鼠标移除与触发：

 事件传播与解绑事件：

jQuery中的动画效果演示：

点击时实现缩放显示和隐藏：

点击时上下隐藏的实现：

实现透明度的淡出，淡去效果：

自定义动画：

自定义变大变小动画：

自定义让div盒子每秒位移增加:

原生态javascript加载函数和jQuery加载函数的使用及区别：

  1.原生态js加载函数的编写   2种形式

            a.window.onload = function(){}   1个   多个的情况，前者无效
            b.window.addEventListener('事件名称',function(){});  多个
            在一个页面中出现多个window.onload，前者会覆盖前者
 

	window.onload = function(){
				alert('第1个加载函数');
			}
			window.onload = function(){
				alert('第2个加载函数');
			}
运行后前面的会被覆盖 所以运行结果是 第二个加载函数

2.js中可写多个加载函数的方法（但会被覆盖）

window.addEventListener('load',function(){
				alert("111")
			});
window.addEventListener('load',function(){
				alert("222")
			});

 3.jQuery的加载函数  2种  一个页面可以出现多次

$(document).ready(function(){
				alert(22);
			});
			// 简写
$(function(){
				alert(123);
			})

4.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
版本有关  jQuery3.0版本以上   js快

window.onload = function(){
				alert("原生态js")
			}
$(function(){
				alert('jQuery')
			});

jQuery中三种绑定事件的方法：

// 加载函数
			$(function(){
				// 1.标签绑定绑定事件的方式
				// (1)直接调用click点击事件的方法即可
				$("#btn1").click(function(){
					alert("我点击了这个按钮")
				});
				// (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
				$("#btn1").on('click',function(){
					alert("on实现的点击");
				});
				// (3)可以通过调用bind方法进行绑定一个事件
				$("#btn1").bind('click',function(){
					alert("bind 点击")
				});
			})

获取滚动条被滚动的距离：

   $(window).scroll(function(){
                     console.log($('body').scrollTop()+$('html').scrollTop())
                })

合成事件hover 鼠标移除与触发：

//1.合成事件hover
            $(function(){
                // 参数中第1个回调函数的作用：鼠标触碰式触发
                // 参数中第2个回调函数的作用：鼠标离开式触发
                $("#btn2").hover(function(){
                    console.log('111')
                    // 标签显示show  属于jQuery中的动画效果
                    // $("#oDiv").show();
                    $("#oDiv").css("display","block");
                },function(){
                    console.log('222')
                    // 标签隐藏
                    // $("#oDiv").hide();
                    $("#oDiv").css("display","none");
                });

 事件传播与解绑事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* a标签属于行内元素，不能设置宽度和高度 */
			a{
				background-color: red;
				/* 转成行内块状   或者块状 */
				display: inline-block;
				width:150px;
				height: 40px;
				/* 居中 */
				text-align: center;
				/* 先获得行高，实现垂直居中 */
				line-height: 40px;
				/* 去掉下划线 */
				text-decoration: none;
			}
			
			/* 伪类选择器 */
			a:hover{
				background-color: yellow;
				color: red;
			}
		</style>
		
		
		
		<!-- 引入jQuery库 -->
		<!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> -->
		
		<!-- jQuery1.7 -->
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			//1.合成事件hover
			$(function(){
				// 参数中第1个回调函数的作用：鼠标触碰式触发
				// 参数中第2个回调函数的作用：鼠标离开式触发
				$("#btn2").hover(function(){
					console.log('111')
					// 标签显示show  属于jQuery中的动画效果
					// $("#oDiv").show();
					$("#oDiv").css("display","block");
				},function(){
					console.log('222')
					// 标签隐藏
					// $("#oDiv").hide();
					$("#oDiv").css("display","none");
				});
				
				
				// toggle事件
				$("#btn3").click(function(){
					console.log("我点击了");
					// 在jQuery中所有的动画效果都是默认改变标签的宽度，高度，透明度
					$("#oDiv2").toggle(3000);
				})
			});
			
			
		</script>
		
		
		<!-- 事件传播如何组织 -->
		<script type="text/javascript">
		// 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
		// 其它则无效----解决  阻止事件传播
		
		// 阻止事件传播的顺序：从小到大。
			$(function(){
				// p标签设置一个点击事件
				$("p").click(function(){
					alert('p段落的点击事件');
					return false;//阻止事件传播
				})
				// 设置oDiv3的点击事件
				$("#oDiv3").click(function(){
					alert('oDiv3的点击事件')
					return false;//直接返回false 阻止传播
				})
				// $("body").click(function(){
				// 	alert('body点击事件')
				// });
				
				
				// 事件坐标  pageX  pageY   都是通过event事件对象调用
				
				$("body").click(function(){
					// 获取鼠标所点击的位置
					// 鼠标的坐标
					 console.log(event.pageX+"   "+event.pageY);
					// // 偏移量  考虑了外边距,边框,内填充
					 console.log(event.offsetX+"   "+event.offsetY);
					// // 如果没有滚动条，与pageX和pageY是一样的
					// // client 可视区宽度和高度
					 console.log(event.clientX+"    "+event.clientY)
				});
			});
			
			
		</script>
		
		<!-- 解绑事件 -->
		<script type="text/javascript">
			$(function(){
				// unbind  off
				
				$("#btn4").click(function(){
					alert("恭喜你中奖了~");
					// 调用解绑事件
 
                    $(this).unbind(); 解绑事件
				    $(this).off(); 第二种解绑事件
 
					// $(this).disable();//禁用  无效
					// disabled 是属性  不是样式  不能用css去设置
					$(this).attr("disabled","disabled");
					
				});
				
				var index = 1;
				$("#btn5").click(function(){
					// 点击（奇数次可以，偶数次不行）
					// index为奇数的时候可以   为偶数的时候不行
					if(index % 2 == 1){
						console.log(index);
					}
					index++;
				});
				
				$("#btn6").one('click',function(){
					alert("只有一次机会")
				})
			});
		</script>
	</head>
	<body>
		<button id="btn1" disabled="disabled">按钮</button>
		<hr>
		<!-- 伪类选择器的使用hover -->
		<a href="">我的老婆</a>
		
		<hr>
		<button type="button" id="btn2">按钮</button>
		<div id="oDiv" style="width:100px;height: 100px;background-color: red;display: none;"></div>
	
		<hr >
		<button type="button" id = "btn3">toggle</button>
		<div id="oDiv2" style="width:100px;height: 100px;background-color: red;display: none;"></div>
		
		<hr>
		<h4>事件传播如何阻止</h4>
		<div id = "oDiv3" style="width: 200px;height: 200px;background-color: red;">
			<br><br><br><br>
			<p style="width:100%;height: 20px;background-color: yellow;">我是p段落</p>
			
		</div>
		
		<hr>
		<h4>解绑事件</h4>
		<button id="btn4">点击抽象</button>
		<button id="btn5">点击（奇数次可以，偶数次不行）</button>
		<button id="btn6">one方法  一次性</button></button>
	</body>
</html>

jQuery中的动画效果演示：

点击时实现缩放显示和隐藏：

            function test1() {
				// div隐藏和显示
				$("div").eq(0).show(2000)
			}
 
			function test2() {
				// div隐藏和显示
				$("div").eq(0).hide(2000)
			}
             
			function test3() {
				// div隐藏和显示
				$("div").eq(0).toggle(1000)
			}

点击时上下隐藏的实现：

 

         //慢慢隐藏 高度慢慢缩短
			function test4() {
				$("div").eq(1).slideUp(1000);
			}
 
			function test5() {
				$("div").eq(1).slideDown(1000);
			}
            //两个方法的结合
			function test6() {
				$("div").eq(1).slideToggle(1000);
			}

实现透明度的淡出，淡去效果：

          //慢慢隐藏 改变透明度慢慢隐藏
			function test7() {
				$("div").eq(2).fadeIn(1000);
			}
			
			function test8() {
				$("div").eq(2).fadeOut(1000);
			}
			//两个方法的结合
			function test9() {
				$("div").eq(2).fadeToggle(1000);
			}

自定义动画：

// 自定义动画
			function test10(){
				$("div").eq(3).animate({
					width:"+=300",
					height:"+=300"
				},800)
			}

自定义变大变小动画：

// 自定义动画 点击变大与变小
			var index=1;
			function test10(){
				if(index%2==1){
				$("div").eq(3).animate({
						width:"+=10",
						height:"+=10"
					},800)}else{
						$("div").eq(3).animate({
								width:"-=10",
								height:"-=10"
							},800)
					}
					index++;
			}

自定义让div盒子每秒位移增加:

	$(function(){
							// 定时器 每隔200毫秒加2
					window.setInterval(function(){
					$("div").last().animate({
							left:"+=2px"
							},2);
							},100);
						})

更多内容：

 

Naraseny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
addEventListener() 方法，事件监听
milijiangjun的博客
11-27 4万+
addEventListener() 方法，事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函
jQuery_04
weixin_64692712的博客
03-23 803
1.1 加载DOM两种方式(区别)、 个数与顺序问题 优先顺序跟版本有关 //window.onload 自动调用函数只能写一个 多个会被覆盖 //可以写多个 // $(function(){ // console.info("jQuery方式"); // }) 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等] --元素.on/bind() ...
jquery对事件的监听方法addEventListener()
qq_36521848的博客
01-06 4687
在这个点击事件的监听里，我们可以获取鼠标的点击坐标 (function($){ window.addEventListener("click",function(evt){ for(var i in evt) { console.log(i + "---" + evt[i]); } },false); })(jQuery); ...
JQuery学习分享
myang147258的博客
09-24 752
body>//设置第一个div的动画效果//设置第二个div的动画效果//设置所有div的动画效果，当多个动画效果是，依次进行// $(":button").click(function () { //获取按钮并添加侦听事件//当点击确定按钮后，div停止动画// })//多个动画依次触发。
深入理解JQuery中的事件与动画
01-21
首先，使用JQuery事件与动画的效果比使用原生js来的方便得多，当然，最重要的是考虑到了浏览器的兼容性。 事件： 基于原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,...
深入理解jquery中的事件与动画
10-22
下面小编就为大家带来一篇深入理解jquery中的事件与动画。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery中的事件及动画用法实例
10-24
主要介绍了JQuery中的事件及动画用法,实例分析了事件的绑定、移除、添加及动画方法操作表单的使用技巧,需要的朋友可以参考下
jQuery中事件与动画的总结分享
10-22
下面小编就为大家带来一篇jQuery中事件与动画的总结分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
addEventListener() 方法
weixin_30491641的博客
02-03 813
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄...
js中的事件委托或是事件代理详解
weixin_30883271的博客
06-25 1967
起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考； 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件...
事件流与window.addEventListener介绍说明
yabianhua的专栏
11-01 7536
1.首先我们来了解几个概念，“事件”，“事件流”，“事件名称”，“事件处理函数/事件监听函数，也许是“老生常谈”，知道的朋友可以越过。 事件： 事件是用户自身或浏览器进行的特定行为。如：用户点击 也就是常用的click事件 事件流：多个事件  按一定顺序触发  形成了事件流 事件名称：如上面所讲的click就是事件名 事件处理函数/事件监听函数（Dom的叫法）就是事件触发后的处理函数，如ob
原生JS实现Jquery的on方法 事件绑定addEventListener的简化写法
lionking1990的博客
10-30 1006
//为元素添加on方法 Object.prototype.on = Window.prototype.on = HTMLDocument.prototype.on = Element.prototype.addEventListener || Element.prototype.attachEven; //注解 这是最简单的一种写法，也是最有效的。告诉浏览器el.on就是Element.prototype.addEventListener或者Element.prototype.attachEve...
JavaScript事件模型
W Y L
07-01 226
监听函数 浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。 JavaScript 有三种方法，可以为事件绑定监听函数。 HTML 的 on- 属性 HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。 <body onload="doSomething()"> <div onclick="console.log('触发事件')"&g
addEventListener和on的区别
weixin_33725272的博客
02-17 218
为什么需要addEventListener？ 先来看一个片段： html代码 &lt;div id="box"&gt;追梦子&lt;/div&gt; 用on的代码 1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.onclick = function...
【js】window.addEventListener介绍说明
热门推荐
Q仔的博客
06-29 6万+
原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void 作用 　　侦听事件并处理相应的函数。[1] 参数
window、document添加事件addEventListener
m0_37728716的博客
08-01 1万+
事件捕获，从dom结构上到下，window.addEventListener先于document.addEventListener被捕获 事件冒泡，从dom结构底层向上传递，document.addEventListener先于window.addEventListener被触发 在addEventListener第三个参数处可指定事件是否在捕获或冒泡阶段执行。 element.addEv...
jquery事件与动画的思维导图
最新发布
07-15
抱歉，我无法为您提供直接的思维导图。但是，我可以为您提供一个简单的文字...这只是 jQuery 的事件处理和动画效果的一些常用方法和思路的概述，还有更多功能和细节可以在 jQuery 的官方文档中找到。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值