【无标题】

最新推荐文章于 2024-05-18 00:53:54 发布

原创最新推荐文章于 2024-05-18 00:53:54 发布 · 923 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aa {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			P {
				text-align: center;
				/* 水平居中 */
				background-color: yellow;
			}
			.xyz {
				transform: rotate(360deg);
				transition: all 1s;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			/* jQuery第四次课 */

			/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			//js 不可以写多个 多个被会覆盖
			// $(function(){
			// 	console.info("jQuery方式")
			// })
			// jQuery 可以多写几个 都会被执行
			// window.onload=function(){
			// console.info("js方式")
			// }
			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				// $("#aa").on("click",function(){
				// 	alert("哈那好")
				// })
				// $("#aa").bind("mouseover",function(){
				// 	alert("哈哈")
				// })
				// //--元素.事件名
				// $('#aa').click(function(){
				// alert("干哈")
				// })
				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				// $("#aa").hide();//影藏
				// $("a").hover(function(){//鼠标移上
				// 	$("#aa").hide();//影藏
				// })
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				// $("#aa").hide();//影藏
				// $("a").toggle(function(){//点击一下
				// 	$("#aa").show();//显示
				// },function(){
				// 	$("#aa").hide();//隐藏
				// })

				// $("#aa").toggle(1000)
				//1.4 事件的传播(事件冒泡) 小p->中div->大body

				//分别添加点击事件
				// $("p").click(function() {
				// 	console.info("p被打了")
				// })
				// $("div").click(function() {
				// 	console.info("div被打了")
				// 	return false; //阻止了传播
				// })
				// $("body").click(function() {
				// 	console.info("body被打了")
				// })
				//1.5 事件event的坐标[了解即可 pageX,pageY]
				// $("#aa").click(function(){
				// 	console.info(e.pageX,e.pageY);
				// })
				//1.6 事件的移除
				//--按钮只能点击一次[2]
				// $("#btn").on("click",function(){
				// 	//做一系列事情
				// 	console.info(44944)
				// 	//将点击事件进行移除
				// 	$("#btn").off("click")//unbind()
				// 	//将按钮禁用
				// 	$("#btn").attr("disabled",true)
				// })
				//一次
				// $("#btn").one("click",function(){
				// console.info(44944);
				//将按钮禁用
				// $("#btn").attr("disabled",true);
				// }) 
				//--按钮点击偶数次可行 奇数次不行
				// var i=1;
				// $("#btn").click(function(){
				// 	if(i%2==0){
				// 		console.info(44944,i);//做一系列事情
				// 	}
				// 	i++
				// })

				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				// $("#aa").hide(); //默认隐藏
				// $("#xx").on("click", function() {
				// 	$("#aa").show(1000, function() {
				// 		//回调函数
				// 		alert("来了，老弟")
				// 	})//1s
				// })
				// $("#yy").on("click",function(){
				// 	$("#aa").hide(2000)
				// })
				// $("#zz").click(function(){
				// 	$("#zz").toggle()
				// })
				//2.2 滑动动画
				// $("#aa").hide()//隐藏
				// $("#xx").on("click",function(){
				// 	$("#aa").slideDown(1000)
				// })
				// $("#yy").on("click",function(){
				// 	$("#aa").slideUp(2000)
				// })
				// $("#zz").click(function(){
				// 	$("#zz").slideToggle(1000)
				// })
				//2.3 淡入淡出(透明度)
				// $("#aa").hide(); //默认隐藏
				// $("#xx").on("click", function() {
				// 	$("#aa").fadeIn(1000)
				// })
				// $("#yy").on("click", function() {
				// 	$("#aa").fadeOut(2000);
				// })
				// $("#zz").click(function() {
				// 	$("#zz").fadeToggle(1000)
				// })
				//2.4 自定义动画
				//--缩放
				// $("#bbb").click(function() {
				// 	$("#aa").animate({
				// 		width: 100,
				// 		height: 300
				// 	},1000)
				// })
				//--移动[2]
				// $("#bbb").click(function() {
				// 	$("#aa").animate({
				// 		left: 100,
				// 		top: 100
				// 	}, 1000);
				// })
				//在自身基础上移动
				// $("#bbb").click(function(){
				// $("#aa").animate({
				// left:"+=5",
				// top:"+=8"
				// },1000);
				// }) 

				/* 利用动画模拟心跳的感受 */
				/* 利用动画模拟灰太狼退场 */
				$("#bbb").click(function() {
					$("#aa").addClass("xyz");
				})

			})
		</script>
	</head>
	<body>
		<button id="bbb">变便便</button>
		<button id="xx">显示[展开](淡入)</button>
		<button id="yy">隐藏[收缩](淡出)</button>
		<button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button>
		<button id="btn">点我试试</button>
		<a style="text direction: none;" href="#">显示</a>
		<div id="aa"></div>
		<br />
		<br />
		<p>这是一巴掌</p>
	</body>
</html>

jQuery课堂代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .xzy{
			 transform: rotate(3600deg);
			 transition: all 9s;
		 }
		 #cc{
			 position: absolute;
			top: 50px;
			left: 50px;
		 }
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			$("#aa").click(function(){
				$("#cc").addClass("xzy")
				for(var i=0;i<2000;i++){
					$("#cc").animate({
					left:"+=1000",
					top:"+=1000"
					},100)
					$("#cc").fadeOut(2000)
				}
			})
			})
		</script>
	</head>
	<body>
		<button type="button" id="aa">起飞罗</button><br />
		<div id="cc">
			<img src="img/微信图片_20220319135007.jpg" width="300px" >
		</div>
	</body>
</html>

灰太狼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#bb{
				width: 200px;
				height: 200px;
				top: 50px;
				left: 50px;
			    position: absolute;
		}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		 $(function(){
			$("#aa").click(function() {
				for(var i=0;i<100;i++){
					$("#bb").animate({
						width: "200px",
						height: "200px"
					},1000)
					$("#bb").animate({
						width: "400px",
						height: "400px"
					},1000)
				}
			})
		 })
		</script>
	</head>
	<body>
		<button type="button" id="aa">燥起来</button><br />
		<img id="bb" src="img/微信图片_20220319135007.jpg" width="300px" >
	</body>
</html>

心跳模拟