jQuery04(事件&动画)

hello~今天要给大家带来的是什么呢？嘿嘿嘿，就是一些关于jQuery的有趣的点击事件和动画效果，是不是听起来很好玩呢？那么接下来我就带大家一起探讨这些玩法叭~

一、事件

1、加载Dom两种方式：

1.1  window.onload方式（不可以写多个  多个会被覆盖）

        执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行

        编写个数：1个

1.2  jQuery方式

        执行时间：网页结构绘制完成后，执行

        编写个数：多个

1.3  两个都有的情况下执行顺序【面试题】

        jQuery3.0：window.onload比jQuery先执行

        jQuery1.0和2.0：jQuery比window.onload先执行

2、绑定事件两种方式

2.1  元素.on("事件名",function(){})

2.2  元素.事件名(function(){})        

2.3   演示事件(鼠标悬停和点击)的两种方式

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

3、合成事件/事件切换

hover()：鼠标悬停合成事件

toggle()：鼠标点击合成事件

<script>
//--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); 
</script>

4、事件传播（事件冒泡）

传播：小-->中-->大

阻止传播：事件后面加上  return false

案例：给body div span(在div中) 分别添加点击事件，测试事件传播

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

5、事件坐标

offsetX：当前元素左上角

clientX：窗口左上角

pageX：网页左上角

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

6、移除事件

<script>
//事件的移除
				//--按钮只能点击一次[2]
				 $("#btn").on("click",function(){
					//做一系列事情
					console.info(44944);
					//将点击事件进行移除
					$("#btn").off("click");
					//将按钮禁用
					$("#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++;
				}) 

</script>

二、动画效果

1、基本动画

        显示：show(Time)

        隐藏:hide(Time)

        切换：toggle（Time）

<script>
//基本动画 [回调函数]
				 $("#aa").hide();//默认隐藏
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						alert(1);//回调函数
					});//1s  显示
				})
				$("#yy").on("click",function(){
					$("#aa").hide(2000);//2s  隐藏
				})
				$("#zz").on("click",function(){
					$("#aa").toggle(1000);//1s  切换
				}) 
</script>

2、滑动动画

slideUp(Time)：动画收缩(向上滑动)-->隐藏

slideDown(Time)：动画展开(向下滑动)-->显示

slideToggle(Time)：动画切换

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

3、淡入淡出(透明度)

        fadeIn(Time)：淡入(透明度减少)

        fadeOut(Time)：淡出(透明度增大)

        fadeToggle(Time)：切换

<script>
$("#aa").hide();//默认隐藏
				$("#xx").on("click",function(){
					$("#aa").fadeIn(1000);//1s  显示
				})
				$("#yy").on("click",function(){
					$("#aa").fadeOut(2000);//2s  隐藏
				})
				$("#zz").on("click",function(){
					$("#aa").fadeToggle(1000);//1s  切换
				})
</script>

4、自定义动画

        元素.animate({属性：属性值},Time)

        缩放： width   height

        移动： top   left

        移动(本元素)，距离：  top=  "+="        left= "-="

<script>
    //--缩放
				$("#bbb").click(function(){
					$("#aa").animate({
						width:100,
						heigt:300
					},1000)
				}) 
	//--移动[2]
				$("#bbb").click(function(){
					$("#aa").animate({
						left:100,
						top:100
					},1000)
				}) 
	//在自身基础上移动
				$("#bbb").click(function(){
					$("#aa").animate({
						left:"+=5",
						top:"+=8"
					},100)
				}) 
</script>

        

        好啦~本次分享就到这里咯，大家感兴趣的话可以去尝试着自己动手敲一敲、玩一玩，看看效果，我们下次再见啦~~Goodbye！