一、jQuery事件

代码展示：

/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			window.onload = function() {
				console.info("js方式");
			}

			$(document).ready(function() {
				console.info("jq方式");
			})


			$(function() {
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				$("#aa").on("click", function() {
					console.info("点我一次");
				})
				$("#aa").bind("click", function() {
					console.info("点两次了");
				})
				//--元素.事件名
				$("#aa").click(function() {
					alert(1);
				})

				//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(); //隐藏
				})

				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				//分别添加点击事件
				$("p").click(function() {
					console.info("")
				})
				$("div").click(function() {
					console.info("div被打了")
					return false; //阻止传播
				})
				$("body").click(function() {
					console.info("body被打了")
				})

				//1.5 事件event的坐标[了解即可 pageX,pageY]
				$("#aa").click(function(e) {
					console.info(e.pageX, e.pageY); //x y坐标
				})

				//1.6 事件的移除
				//--按钮只能点击一次[2]
				$("#btn").on("click", function() {
					//做一系列事情
					console.info(333);
					//将点击事件移除
					$("#btn").off("click"); //unbind()
					//按钮的禁用
					$("#btn").attr("disabled", true);
				})
				//将点击事件移除
				$("#btn").one("click", function() {
					console.info(33);
					$("#btn").attr("disabled", true);

				})

				//--按钮点击偶数次可行 奇数次不行
				var i = 1;
				$("#btn").click(function() {
					if (i % 2 == 0) {
						console.info(33, i);
					}
					i++;
				})
			})

二、动画 

代码展示：

/* 二、动画 */
			$(function() {
				//2.1 基本动画 [回调函数]
				$("#aa").hide(); //默认隐藏
				$("#xx").on("click", function() {
					$("#aa").show(1000, function() {
						//回调函数
						alert("来了，老弟")
					}); //1s 显示
				})
				$("#yy").click(function() {
					$("#aa").hide(2000); //隐藏
				})
				$("#zz").click(function() {
					$("#aa").toggle(1000); //切换
				})


				//2.2 滑动动画 从上往下滑动
				$("#aa").hide(); //默认隐藏
				$("#xx").on("click", function() {
					$("#aa").slideDown()(1000, function() {}); //1s 显示
				})
				$("#yy").click(function() {
					$("#aa").slideUp()(2000); //隐藏
				})
				$("#zz").click(function() {
					$("#aa").slideToggle()(1000); //切换
				})

				//2.3 淡入淡出(透明度)
				$("#aa").hide(); //默认隐藏
				$("#xx").on("click", function() {
					$("#aa").fadeIn()(3000); //1s 显示
				})
				$("#yy").click(function() {
					$("#aa").fadeOut()(3000); //隐藏
				})
				$("#zz").click(function() {
					$("#aa").fadeToggle()(3000); //切换
				})

				//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"
					}, 1);
				})
				$("#bbb").click(function() {
					$("#aa").addClass("xyz");
				})
			})

本节完。