jQuery04笔记-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#aa {

				width: 200px;
				height: 200px;
				background-color: yellow;
			}

			p {
				text-align: center;
				background-color: deeppink;
			}
			.abc{
			transform: rotate(360deg);/* x */
				transition: all 2s;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 一、事件 */
			//1.1 加载DOM的两种方式(区别)

			// window.onload = function() {
			// console.info("js方式");
			// }
			// $(function() {
			// 	console.info("jQuery方式");
			// })
			//在低版本中，js比jQuery慢
			//在高(3.x)版本中，js比jQuery快



			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				// $("#aa").on("click",function(){
				// 	alert("嘿嘿嘿");
				// })
				// $("#aa").bind("mouseover",function(){
				// 	alert("嘿嘿嘿");
				// })
				//--元素.事件名
				// $("#aa").click(function(){
				// 	alert("干哈");
				// })
				// $("#aa").mouseover("click",function(){
				// 	alert(123);
				// })

				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				// $("#aa").hide()//隐藏
				// $("a").hover(function(){//鼠标移上事件
				// 	$("#aa").show();//显示
				// },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").on("click",function(e){
				// 	console.info(e.pageX,e.pageY);
				// })
				//1.6 事件的移除
				//--按钮只能点击一次[2]
				// $("#btn").click(function() {
				// 	console.info(gergehjy);//做一系列的事情
				// 	//将点击事件移除
				// 	$("#btn").unbind("click");
				// 	//禁用按钮
				// 	$("#btn").prop("disabled",true);
				// })
				
				//--按钮点击偶数次可行 奇数次不行
				// var i=1;
				// $("#btn").click(function(){
				// 	if(i%2==0){//偶数次
				// 	console.info(4552,i);
						
				// 	}
				// 	i++;
				// })
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				// $("#aa").hide()//隐藏
				// $("#xx").click(function(){
				// 	$("#aa").show(1000);
				// 	//回调函数
				// 	alert("来了老弟");
				// })
				// $("#yy").click(function(){
				// 	$("#aa").hide(1000);
				// })
				// $("#zz").click(function(){
				// 	$("#aa").toggle(1000);
				// })
				// //2.2 滑动动画
				$("#xx").click(function(){
					$("#aa").slideDown(1000);
					
				})
				$("#yy").click(function(){
					$("#aa").slideUp(1000);
				})
				$("#zz").click(function(){
					$("#aa").slideToggle(1000);
				})
				// //2.3 淡入淡出(透明度)
				// $("#aa").hide()//隐藏
				// $("#xx").click(function(){
				// 	$("#aa").fadeIn(1000);
					
				// })
				// $("#yy").click(function(){
				// 	$("#aa").fadeOut(1000);
				// })
				// $("#zz").click(function(){
				// 	$("#aa").fadeToggle(1000);
				// })
				//2.4 自定义动画
				//--缩放
				// $("#bb").on("click", function() {
				// 	$("#aa").animate({
				// 		width: 100,
				// 		heigth: 300
				// 	}, 2000);
				// })
				//--移动[2]
			
				// $("#bb").on("click", function() {
				// 	$("#aa").animate({
				// 		left: 100,
				// 		top: 300
				// 	}, 2000);
				// })
				$("#bb").on("click", function() {
					$("#aa").animate({
						left: "+=5",
						top: "+=10"
					}, 2000);
				})
				// $("#bb").click(function(){
				// 	//给div增加点击样式
				// 	$("#aa").addClass("abc");
				// })
			})
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="点我试试" /><br>
		<a style="text-decoration: none;" href="">显示</a>
		<button type="button" id="xx">显示(展开)[淡出]</button>
		<button type="button" id="yy">隐藏(收缩)[淡入]</button>
		<button type="button" id="zz">显示/隐藏(展开/收缩)[淡入/淡出]</button>
		<button id="bb" type="button">变变变</button>
		<div id="aa">
			<br>
			<br>
			<p>
				这是一巴掌
			</p>
		</div>
	</body>
</html>