jQuery事件&动画

一、jQuery事件

            /* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			// window.onload=function(){
			// 	console.info(1);
			// }
			// $(function(){
			// 	console.info(2);
			// })
            //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			//--元素.on/bind()
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// })
			// $("#aa").bind("click",function(){
			// 	console.info("点两次了都！");
			// })
			// //--元素.事件名
			// $("#aa").click(function(){
			// 	console.info("点我就对了！");
			// })
 
 
			//1.3 合成事件/事件切换
			// $("#qq").hide();
			//--hover()悬停控制元素[div]的显示和隐藏
 
			// $("#qwe").hover(function(){
			// 	$("#qq").show();
			// },function(){
			// 	$("#qq").hide();
			// })
			//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
			// $("#aa").toggle(function(){
			// 	$("#qq").show();
			// },function(){
			// 	$("#qq").hide();
			// })
 
 
			//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.6 事件的移除
			//--按钮只能点击一次[2]
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// 	$("#aa").off("click");
			// })
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// 	$("#aa").unbind("click");
			// })
 
			// $("#aa").one("click",function(){
			// 	console.info("只能点击一次哦！");
			// })
 
			//--按钮点击偶数次可行 奇数次不行
			// var i =0;
			// $("#aa").on("click",function(){
			// 	if(i%2==0){
			// 		console.info("你还真的点啊！");
			// 	}
			// 	i++;
			// })
			// $("#aa").dblclick(function(){
			// 	console.info("点吧点吧随便你啊！");
			// })

二、动画

			/* 二、动画 */
			// $("#qq").hide();
			//2.1 基本动画 [回调函数]
			// $("#a1").click(function(){
			// 	$("#qq").show(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").hide(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").toggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.2 滑动动画
			// $("#a1").click(function(){
			// 	$("#qq").slideDown(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").slideUp(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").slideToggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.3 淡入淡出(透明度)
			// $("#a1").click(function(){
			// 	$("#qq").fadeIn(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").fadeOut(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").fadeToggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.4 自定义动画
			//--缩放
			// $("#aa").click(function(){
			// 	$("#qq").animate({
			// 		width:"100px",
			// 		heigth:"400px"
			// 	},1000)
			// })
			//--移动[2]
			// $("#aa").click(function() {
			// 	$("#qq").animate({
			// 		top: "+=10",
			// 		left: "+=20"
			// 	},10)
			// })
			//--在自身基础上移动[2]
			// $("#aa").click(function() {
			// 	$("#qq").animate({
			// 		left: "+=5",
			// 		top: "+=5"
			// 	}, 10);
			// }) 
			/* $("#aa").click(function(){
				$("#qq").addClass("xyz");
			}) */