<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js">
		</script>
		<script type="text/javascript">
			//被覆盖,结果只有一句话
// 			window.onload=function(){
// 				console.info("window.onload1");
// 			}
// 			window.onload=function(){
// 				console.info("window.onload2");
// 			}
// 			window.onload=function(){
// 				console.info("window.onload3");
// 			}
			//三句都打印
// 			$(function( {
// 				console.info("jQuery1");
// 			})
// 			$(function() {
// 				console.info("jQuery2");
// 			})
// 			$(function() {
// 				console.info("jQuery3");
// 			})
			$(document).ready(function(){
				// console.info("全拼写法");
				//鼠标点击事件
				$(".big").on("click",function(){
					console.info("点击了");
				})
				//鼠标点击事件
				$(".big").click(function(){
					console.info("又点击了");
				})
				//鼠标进来事件1
				//on---绑定事件
// 				$(".big").on("mouseenter",function(){
// 					console.info("鼠标进来了1");
// 				})
				//鼠标出去事件1
// 				$(".big").on("mouseleave",function(){
// 					console.info("鼠标出去了1");
// 				})
				//鼠标进来事件2
				$(".big").mouseenter(function(){
					console.info("鼠标进来了2");
				})
				//鼠标出去事件2
				$(".big").mouseleave(function(){
					console.info("鼠标出去了2");
				})
				
				//hover:鼠标悬浮---显示和隐藏
				//效果：鼠标移动到h2标签就显示盒子，离开就隐藏盒子
				// $(".big").hide();
				$("h2").hover(function(){
					$(".big").show();
				},function(){
					$(".big").hide();
				})
				//toggle:鼠标点击---显示和隐藏
				//点击第一次显示盒子，点击第二次隐藏盒子，再点就显示，再点就隐藏 循环效果。
// 				$("h2").toggle(function(){
// 					$(".big").show();
// 				},function(){
// 					$(".big").hide();
// 				})
				// $("p").css("background","blue");
				//事件传播(事件冒泡)
				//给p标签添加点击事件现在点击p标签的内容 就可以触发事件，点击页面的其它位置不会触发。
				$("p").click(function(){
					console.info("p被点击了");
					//阻止传播：事件后面加上 return false
					return false;
				})
				//给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。
				$(".big").click(function(){
					console.info("div被点击了");
					return false;
				})
				//给body添加点击事件   小-中-大
				$("body").click(function(){
					console.info("body被点击了");
					return false;
				})
				//offsetX:当前元素左上角
				//给div添加鼠标移动事件，求出以div左上角为0,0 起始点的 鼠标位置
// 				$(".big").mousemove(function(event){
// 				//event:事件
// 					var x = event.offsetX;//获得鼠标x坐标
// 					var y = event.offsetY;//获得鼠标y坐标
// 					$("#xy").text(x+","+y);
// 				})

				//pageX：页面左上角的坐标
				//给div添加鼠标移动事件，求出以网页左上角为0,0 起始点的 鼠标位置
// 				$(".big").mousemove(function(event){
// 					//event:事件
// 					var x = event.pageX;
// 					var y = event.pageY;
// 					$("#xy").text(x+","+y);
// 				})

				//clientX:窗口左上角
				//给div添加鼠标移动事件，求出以窗口左上角为0,0 起始点的 鼠标位置
// 				$(".big").mousemove(function(event){
// 				//event:事件
// 					var x = event.clientX;//获得鼠标x坐标
// 					var y = event.clientY;//获得鼠标y坐标
// 					$("#xy").text(x+","+y);
// 				})
				//移出事件，直接对元素使用unbind  或 off 来移出指定的事件例如在某些情况下，按钮只能点击一次，点击一次后再点击就无效
// 				var i=0;
// 				$("#myBtn").click(function(){
// 					i++;
//					// 点击按钮偶数次可以，奇数次则失效
// 					if(i%2==0){
// 						console.info("试试就试试"+i);
// 					}else{
// 						//上面代码执行后 就移除按钮的点击事件
// 						// $("#myBtn").unbind("click");
// 					}
// 				}) 
				//动画
// 				$("#myBtn").one("click",function(){
// 					console.info("点了");
// 				}) 
				//基本动画---显示show(time);
				$("#show").click(function(){
					$(".big").show(1000);
				})
				//基本动画---隐藏hide(time);
				$("#hide").click(function(){
					$(".big").hide(1000);
				})
				//基本动画---切换toggle(time);
				$("#showAndHide").click(function(){
					$(".big").toggle(1000);
				}) 
				
				//滑动---slideDown(time)：动画展开(向下滑动)----->显示
				$("#slideDown").click(function(){
					$(".big").slideDown(1000);
				})
				//滑动---slideUp(time)：动画收缩(向上滑动)---->隐藏  
				$("#slideUp").click(function(){
					$(".big").slideUp(1000);
				})
				//滑动---slideToggle(time)：动画切换
				$("#slideToggle").click(function(){
					$(".big").slideToggle(1000);
				}) 
				
				//淡入淡出：fadeIn(time)：淡入(透明度减少)
				 $("#fadeIn").click(function(){
					$(".big").fadeIn(1000);
				})
				//淡入淡出：fadeOut(time)：淡出(透明度增加)
				$("#fadeOut").click(function(){
					$(".big").fadeOut(1000);
				})
				//淡入淡出：fadeToggle(time)：切换
				$("#fadeToggle").click(function(){
					$(".big").fadeToggle(1000);
				}) 
				
				//自定义动画 
				//变大---移动，元素.animate({属性:属性值},time)
				$("#bigBtn").click(function(){
					$(".big").animate({
						width:300,
						height:300
					},1000)
				})
				//变小
				$("#smallBtn").click(function(){
					$(".big").animate({
						width:200,
						height:200
					},1000)
				})
				
				//移动
				$("#runBtn").click(function(){
					$(".big").animate({
						left:10,
						top:10
					},1000)
				})
				//+=
				$("#topBtn").click(function(){
					$(".big").animate({
						left:"-=50",
						top:"+=50"
					},1000)
				})
			})
		</script>
	</head>
	<body>
		<h2>好消息</h2>
		<input type="button" name="" id="topBtn" value="+=" />
		<br>
		<input type="button" name="" id="runBtn" value="走你" />
		<br>
		<input type="button" name="" id="bigBtn" value="变大" />
		<input type="button" name="" id="smallBtn" value="变小" />
		<br>
		<input type="button" name="" id="myBtn" value="点下试试" />
		<input type="button" name="" id="show" value="显示" />
		<input type="button" name="" id="hide" value="隐藏" />
		<input type="button" name="" id="showAndHide" value="显示/隐藏" />
		<br>
		<input type="button" name="" id="slideDown" value="展开" />
		<input type="button" name="" id="slideUp" value="收缩" />
		<input type="button" name="" id="slideToggle" value="展开/收缩" />
		<br>
		<input type="button" name="" id="fadeIn" value="淡入" />
		<input type="button" name="" id="fadeOut" value="淡出" />
		<input type="button" name="" id="fadeToggle" value="淡入/淡出" />
		<div class="big" style="position: absolute; left: 100px; top: 100px;">
			<br>
			<p>今天是个好日子</p>
		</div>
		<span id="xy"></span>
	</body>
</html>

以上就是今天的分享

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-03-12，如有侵权请联系 cloudcommunity@tencent.com 删除

function