jQuery04

最新推荐文章于 2024-08-12 15:45:48 发布

白雾少年

最新推荐文章于 2024-08-12 15:45:48 发布

阅读量1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/m0_67258478/article/details/123673277

版权

jquery java

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.da {
				width: 200px;
				height: 200px;
				background: deeppink;
				position: absolute;
				top: 50px;
				left: 50px;
			}

			a {
				cursor: pointer;
			}

			p {
				background: yellow;
				text-align: center;
			}
			.abc{
				transform: rotate(360deg);
				transition: all 2s;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			/* jQuery第四次课 */

			/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			// 3.0版本及以上 window.onload 块
			// 3.0版本以下 jQuery快
			// window.onload 只会显示一个,其他的覆盖
			// jQuery 会显示多个
			// 			$(function(){
			// 				console.info("jQuery")
			// 			})
			// 			window.onload=function(){
			// 				console.info("window onload");
			// 			}
			// 			$(function(){
			// 				console.info("jQuery")
			// 			})
			// 			window.onload=function(){
			// 				console.info("window onload");
			// 			}
			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				// 				$(".da").on("click",function(){
				// 					console.info("点击干啥");
				// 				})
				//                 $(".da").bind("mouseover",function(){
				// 					console.info("aaa");
				// 				})
				//--元素.事件名
				// 				$(".da").click(function(){
				// 					console.info("点你咋的!")
				// 				})
				//                   $(".da").mouseout(function(){
				// 					  console.info("鼠标移除事件");
				// 				  })
				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				// 				$(".da").hide();
				// 				$("a").hover(function(){
				// 					$(".da").show();
				// 				},function(){
				// 					$(".da").hide();
				// 				})
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				// 				$(".da").hide();
				// 				$("a").toggle(function(){
				// 					$(".da").show();
				// 				},function(){
				// 					$(".da").hide();
				// 				})
				// $(".da").toggle(1000);
				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				// 				$("p").click(function(){
				// 					console.info("p点击事件");
				// 					// return false;
				// 				})
				// 				$("div").click(function(){
				// 					console.info("div点击事件");
				// 					// return false;
				// 				})
				// 				$("body").click(function(){
				// 					console.info("body点击事件");
				// 					// return false; 
				// 				})
				//1.5 事件event的坐标[了解即可 pageX,pageY]
				//                    $(".da").mouseover(function(event){
				// 					  console.info(event.pageX,event.pageY); 
				// 				   })
				//1.6 事件的移除
				//--按钮只能点击一次[2]
				// 				$("#btn").click(function(){
				// 					console.info("点击一下");
				// 					// $("#btn").unbind("click");//解除点击事件
				// 					$("#btn").off("click");
				// 				})
				//                 $("#btn").one("click",function(){
				// 					console.info("点击一下");
				// 				})
				//--按钮点击偶数次可行 奇数次不行
				//                 var i=1;
				// 				$("#btn").click(function(){
				// 					i++;
				// 					if(i%2==0){
				// 						console.info("点击一下");
				// 					}
				// 				})
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				// 				$(".da").hide();
				// 				$("#showbtn").click(function(){
				// 					$(".da").show(1000);
				// 				})
				// 				$("#hidebtn").click(function(){
				// 					$(".da").hide(2000);
				// 				})
				// 				$("#shbtn").click(function(){
				// 					$(".da").toggle(1000);
				// 				})
				//2.2 滑动动画
				// 				$(".da").hide();
				// 				$("#showbtn").click(function() {
				// 					$(".da").slideDown(1000);
				// 				})
				// 				$("#hidebtn").click(function() {
				// 					$(".da").slideUp(2000);
				// 				})
				// 				$("#shbtn").click(function() {
				// 					$(".da").slideToggle(1000);
				// 				})
				// 				//2.3 淡入淡出(透明度)
// 				$(".da").hide();
// 				$("#showbtn").click(function() {
// 					$(".da").fadeIn(1000);
// 				})
// 				$("#hidebtn").click(function() {
// 					$(".da").fadeOut(2000);
// 				})
// 				$("#shbtn").click(function() {
// 					$(".da").fadeToggle(1000);
// 				})
				//2.4 自定义动画
				//--缩放
// 				$("#sf").click(function(){
// 					$(".da").animate({
// 						width:"100px",
// 						height:"400px"
// 					},1000);
// 				})
				//--移动[2]
                  $("#yd").click(function(){
					  $(".da").animate({
						  top:"+=50px",
						  left:"+=50px"
					  },1000);
				  })
//                    $("#bbb").click(function(){
// 					   //给div增加abc的样式
// 					   $(".da").addClass("abc")
// 				   })

			})
		</script>
	</head>
	<body>
		<a>显示</a>
		<button id="btn">点击</button>
		<button id="showbtn">显示/向下</button>
		<button id="hidebtn">隐藏/向上</button>
		<button id="shbtn">显示/隐藏/下/上</button>
		<button id="sf">缩放</button>
		<button id="yd">移动</button>
		<button id="bbb">变变变</button>
		<div class="da">
			<br />
			<p>大炮!</p>
		</div>
	</body>
</html>

代码效果：

思路图：

白雾少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery04

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .da { width: 200px; height: 200px; background: deeppink; position: absolute; top: 50px; .
复制链接

扫一扫

专栏目录