jQuery事件以及动态效果

最新推荐文章于 2023-08-10 16:36:12 发布

ning_ning_03

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量960

点赞数 5

本文链接：https://blog.csdn.net/m0_67768699/article/details/123441868

版权

一、事件
1. 加载Dom两种方式
       window.onload方式
           执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
           编写个数：1个
       jQuery方式
           执行时间：网页结构绘制完成后，执行
           编写个数：多个
       两个都有的情况下执行顺序
           jQuery3.0：window.onload比jQuery先执行
           jQuery1.0和2.0：jQuery比window.onload先执行

2. 元素.on("事件名",function(){})
       元素.事件名(function(){})

3. hover()：鼠标悬停合成事件
鼠标移上去第一个函数
鼠标移除第二个函数

4.toggle()：鼠标点击合成事件

5. 事件传播（事件冒泡）
传播：小-->中-->大
阻止传播：事件后面加上 return false

6.事件坐标
offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角

7. 移除事件：
元素.unbind("事件名")

注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

注意2：如果某个元素只允许使用一次事件，则可以使用one()

完整演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* *{margin: 0px;padding: 0px;} */
			.over {
				border: 50px solid salmon;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			// 原生态JavaScript加载DOM的方式
			// 当网页全部加载完毕后才会执行的函数，该方式在一个页面上只能出现1次，如果出现多次 会覆盖

			// 一个页面同时出现原生态jsDOM和jQueryDOM加载，版本不同，先后顺序不同。3.0版本以前--jQuery先执行，3.0版本以后--原生态JavaScript先执行

			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				$("#obtn1").on('click', function() {
					alert("on事件出现")
				})
				$("#obtn1").bind('click', function() {
					alert("bind事件")
				})
				//--元素.事件名
				$("#obtn1").click(function() {
					alert("元素事件")
				})

				// 鼠标移入移除事件 mouserover mouseout
				$("#obtn1").mouseover(function() {
					console.log("鼠标移入")
				})
				$("#obtn1").mouseout(function() {
					console.log("鼠标移出")
				})
				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				$("#odiv").hover(function() {
					$(this).addClass("over")
				}, function() {
					$(this).removeClass("over")
				})
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				$("#obtn2").click(function() {
					// 没有传递参数 调用后立即隐藏与显示
					// 有参数（毫秒）调用后有延时效果
					// 多个会覆盖
					$("#odiv").toggle(1000);
					$("#odiv").toggle(function() {
						alert("我隐藏了")
					}, function() {
						alert("我出现了")
					})
				})
				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				$("body").click(function() {
					alert("事件冒泡了")
				})
				$("#obtn3").click(function() {
					alert("要阻止了")
					return false; //阻止body点击事件
				})

				//1.5 事件event的坐标[pageX,pageY]
				$("body").click(function() {
					// pageX横坐标
					// 鼠标
					console.log(event.pageX, event.pageY);
					// left和top body有默认的margin和padding
					console.log(event.offsetX, event.offsetY);
					// 窗口
					console.log(event.clientX, event.clientY);

				})

				//1.6 事件的移除
				//--按钮只能点击一次[2]
				// var flag = true;
				// $("#obtn4").click(function(){
				// 	if(flag == true){
				// 		alert("一次性")
				// 		flag = false;
				// 	}
				// 一次性作用 通过调用解绑事件即可
				// $(this).off();
				// $(this).unbind();//解绑事件
				// })
				//jQuery中提供一个方法one
				$("#obtn4").one('click', function() {
					alert("jQuery方法一次性")
				})

				//--按钮点击偶数次可行 奇数次不行
				var num = 1;
				$("#obtn5").click(function() {
					if (num % 2 == 0) {
						console.log("点击了" + num)
					}
					num++;
					console.log(num)
				})

			})
		</script>
	</head>
	<body>
		<button type="button" id="obtn1">obtn1事件</button>
		<br>
		<br>
		<div id="odiv" style="width: 100px;height: 100px;background-color: antiquewhite;">

		</div>
		<button type="button" id="obtn2">obtn2</button>
		<button type="button" id="obtn3">obtn3</button>
		<button type="button" id="obtn4">obtn4</button>
		<button type="button" id="obtn5">obtn5</button>
	</body>
</html>

二、动画效果
1. 基本
显示：

show(Time)

隐藏:

hide(Time)

切换：

toggle（Time）

       slideUp(Time)：

动画收缩(向上滑动)-->隐藏

       slideDown(Time)：

动画展开(向下滑动)-->显示

       slideToggle(Time)：

动画切换

2. 淡入淡出(透明度)

       fadeIn(Time)：

淡入(透明度减少)

       fadeOut(Time)：

淡出(透明度增大)

       fadeToggle(Time)：

切换

3.自定义动画

       元素.animate({属性：属性值},Time)

       缩放
  width
height

top
left

top= "+="
left= "-="

完整演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="obtn1">显示</button>
		<button type="button" id="obtn2">隐藏</button>
		<div style="width: 100px;height: 100px;background-color: aqua; position: absolute; left: 0px;top: 130px;" >
			
		</div>
		<button type="button" id="obtn3">延迟显示</button>
		<button type="button" id="obtn4">延迟隐藏</button>
		
		<button type="button" id="obtn5">显示|隐藏（toggle）</button>
		<br>
		
		<button type="button" id="obtn6">滑动上</button>
		<button type="button" id="obtn7">滑动下</button>
		<button type="button" id="obtn8">滑动上下（slideToggle）</button>
		<br>
		
		<button type="button" id="obtn9">淡入</button>
		<button type="button" id="obtn10">淡出</button>
		<button type="button" id="obtn11">淡入淡出（fadeToggle）</button>
		<br>
		
		<button type="button" id="obtn12">点击变化（宽度和高度）</button>
		<button type="button" id="obtn13">点击变化（左右移动）</button>
		<script type="text/javascript">
			$(function(){
				
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				// 显示
				$("#obtn1").click(function(){
					$("div").show()
				})
				// 隐藏
				$("#obtn2").click(function(){
					$("div").hide()
				})
				// 显示
				$("#obtn3").click(function(){
					$("div").show(3000)
				})
				// 隐藏
				$("#obtn4").click(function(){
					$("div").hide(3000)
				})
				
				$("#obtn5").click(function(){
					$("div").toggle(3000)
				})
				
				//2.2 滑动动画
				$("#obtn6").click(function(){
					// 往上拉
					$("div").slideUp(2000)
				})
				$("#obtn7").click(function(){
					// 往下拉
					$("div").slideDown(2000)
				})
				$("#obtn8").click(function(){
					//上下
					$("div").slideToggle(2000)
				})
				
				//2.3 淡入淡出(透明度)
				$("#obtn9").click(function(){
					// 淡入
					$("div").fadeIn(2000)
				})
				$("#obtn10").click(function(){
					// 淡出
					$("div").fadeOut(2000)
				})
				$("#obtn11").click(function(){
					//淡入淡出
					$("div").fadeToggle(2000)
				})
				
				//2.4 自定义动画
				//--缩放
				//--移动[2]
				$("#obtn12").click(function(){
					$("div").animate({
						width:"300px",
						height:"300px"
					},3000)
				})
				$("#obtn13").click(function(){
					$("div").animate({
						left:"+=30px",
						top:"+=10px"
					},3000)
				})
				
			})
		</script>
	</body>
</html>

ning_ning_03

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery事件以及动态效果

一、事件加载Dom两种方式 window.onload方式执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行编写个数：1个 jQuery方式执行时间：网页结构绘制完成后，执行编写个数：多个两个都有的情况下执行顺序【面试题】 jQuery3.0：window.onload比jQuery先执行 ...
复制链接

扫一扫