jQuery04（事件&动画）

                                         思维导图

笔记:

一、事件

1.加载DOM两种方式（区别）.

①、js  执行方式:不可以写多个，多个就被覆盖

②、jQuery  执行方式：可以写多个，并且都会被执行 

---注意：它们的执行顺序是跟版本有关的

①、高级版本3.x以后的版本js快 

window.onload=function(){
    console.info("js方式1");
}
window.onload=function(){
	console.info("js方式2");
}
window.onload=function(){
	console.info("js方式3");
}

②、如果是1.x和2.x的版本jQuery快

$(function(){
	console.info("jQuery方式1");
})
$(function(){
	console.info("jQuery方式2");
})
$(function(){
	console.info("jQuery方式3");
})

jQuery有两种方式：一种是简便方式，还有一种是纯便方式

---注意：$:代表的就是jQuery的意思

/* 简便方式 */
$(function){       }
/* 纯便方式 */
$(document).ready(function(){    })

2.绑定时间的两种方式[eg. :点击、悬停事件等等]

--元素.on/bind()    元素.事件名    on:是1.7+版本才有的

有三种方式可以实现点击事件,获取鼠标移上等等

现在我们一般用的方式

$("#aa").click(function(){
	alert("干哈");
})

另外一种方式

$("#aa").on("click",function(){
	alert("嘿嘿");
})

还有一种方式

$("#aa").bind("mouseover",function(){
	alert("哈哈");
})

3.合成事件/事件切换

①.---hover() 悬停控制元素[div]的显示和隐藏

hover() ：隐藏    show() : 是显示

$("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上
	$("#aa").show();//显示
},function(){//鼠标移出
	$("#aa").hide();//隐藏
}) 

②.---toggle()点击控制元素[div]的显示和隐藏【注意版本问题】

toggle()：1.9以后的版本已经被删除了，所有只要版本不低于1.9的版本它就不会变成动画效果。

$("#aa").hide();//隐藏
$("a").toggle(function(){//点击一下
	$("#aa").show();//显示
},function(){//再点击一下
	$("#aa").hide();//隐藏
}) 

动画效果
$("#aa").toggle(1000);//1000:1s

4.事件的传播（事件冒泡）小p-->中div-->大body

这就是传播事件:当我点击p-->的时候然后就会传播到div在传播到-->body

当我阻止了传播的时候，我点p-->的时候然后就会传播到div而body就不会被传播，因为我阻止了传播。

分别添加点击事件

$("p").click(function(){
	console.info("p被打了");
})
$("div").click(function(){
	console.info("div被打了");
	return false;//阻止了传播
})
$("body").click(function(){
	console.info("body被打了");
})

5.事件event的坐标【了解即可 pagX，pageY】 page:是页面的意思

这个就是它给id添加点击事件

当我点击它的位置的时候就可以获取x坐标和y坐标

$("#aa").click(function(e){//这里面放e或者event都可以
	console.info(e.pageX,e.pageY);//x，y轴坐标  page:页面
})

6.事件的移出  --按钮只能点击一次[2]  disabled:禁用

$("#btn").on("click",function(){
	//做一系列事情
	console.info(44944);
    //将点击事件进行移除
    //有on事件就有off移除
    //有bind就有unbind
    $("#btn").off("click");//移除点击事件
	//将按钮禁用
    $("#btn").attr("disabled",true);
})

还有一个方式只能点击一次:one

$("#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++;
})

二、动画

1.基本动画[回调函数]

【回调函数】动画之间可以嵌套 

$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
    $("#aa").show(1000,function(){
		alert("来了，老弟");//动画显示完整之后才弹出。 动画之间可以嵌套
	});//1s
})

1.基本动画效果

$("#yy").click(function(){
	$("#aa").hide(2000);//隐藏
})
$("#zz").click(function(){
	$("#aa").toggle(1000);//切换
})

2.滑动动画

$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
	$("#aa").slideDown(1000);//1s
})
$("#yy").click(function(){
	$("#aa").slideUp(2000);//隐藏
})
$("#zz").click(function(){
	$("#aa").slideToggle(1000);//切换
})

3.谈入谈出（透明度）

$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
    $("#aa").fadeIn(1000);//1s fade:褪色的意思
})
$("#yy").click(function(){
	$("#aa").fadeOut(2000);//隐藏
})
$("#zz").click(function(){
	$("#aa").fadeToggle(1000);//切换
})

4.自定义动画

--缩放

$("#bbb").click(function(){
    $("#aa").animate({
	    width:100,//如果要写px的话就要加上双引号,要么就不写,比如:width:"100px"
	    height:300//如果后面不需要加了就不需要加上逗号
    },1000)
})

--移动[2]

上下移动

$("#bbb").click(function(){
    $("#aa").animate({
		left:100,
		top:100
	},1000)
})

在自身基础上移动

$("#bbb").click(function(){
	$("#aa").animate({
		left:"+=50",
		top:"+=100"
	},1000)
})

旋转效果

样式
.xyz{
	transform: rotate(720deg);/* 旋转多少度 */
	transition: all 1s;/* 设置时间 */
}
方法
$("#bbb").click(function(){
	$("#aa").addClass("xyz");
})

三、原代码

        <button id="bbb">变变变</button>
        <button id="xx">显示[展开](淡入)</button>
        <button id="yy">隐藏[收缩](淡出)</button>
        <button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button>
        <button id="btn">点我试试</button>
         <!-- text-decoration: none;去除下划线 -->
        <a style="text-decoration: none;" href="#">显示</a>
        <div id="aa">
            <br />
            <br />
            <p>这就是一巴掌</p>
        </div>