jQuery-----事件&动画效果

大致内容由思维导图所呈现：

一、事  件

加载DOM两种方式：js/jQuery方式

js方式-----

       window.οnlοad=function(){
        console.info("js方式");
      }

jQuery方式-----

        $(function(){
                console.info("jQuery方式")

            })                

分别比较两者方法：

window.οnlοad=function(){
                console.info("js方式");
            }
            window.οnlοad=function(){
                console.info("js方式");
            }
            window.οnlοad=function(){
                console.info("js方式");
            }

（注意：js方法数量多时会覆盖, 且3.0+版本的速度更快）

$(function(){
                console.info("jQuery方式")

            })
            $(function(){
                console.info("jQuery方式")
            
                })
            $(function(){
                console.info("jQuery方式")
            
                })
            

（注意：jquery方式1.2+版本的速度快 ,可以写多个且都会被执行）

 

通过分别增加js方法的数量来对比两者的区别，由此可见：“版本不同，则方法运行时的速度也不同；方法数量不同，js会被覆盖，反之，jQuery则不会，且都会被执行！”

规律：“widow.onload比jquery的先执行（版本3.0+）；jquery比widow.onload的先执行（版本1.0-2.0）”

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

on/bind()--1.7版本之前使用的点击

        （1）$("#aa").on("click",function(){
					alert("忽如一夜春风来~");
				})
		（2）$("#aa").bind("mouseover",function(){
				alert("忽如一夜春风来~");
				})
				--元素.事件名
		（3）$("#aa").click(function(){
					alert("嘻嘻嘻~");
				})

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").click(function(e){
                    console.info(e.pageX,e.pageY);
                })

1.6 事件的移除

off()/attr()

one()---仅使用一次

            $("#btn").click(function(){
					//做一系列事情
					console.info(66666);
					将点击事件移除 off
					$("#btn").off("click");
					//禁用按钮
					$("#btn").attr("disabled",true);
					
				})
        $("#btn").one("click",function(){// 仅使用一次
					console.info(9998);

-按钮点击偶数次可行 奇数次不行

                    var i=1;
					$("#btn").on("click",function(){
						if(i%2==0){
							console.info(88888);//做一系列的事情
						}
						i++;
					})

 二、动 画

2.1 基本动画 [回调函数] hide(隐藏)、show(显示)、toggle（显示/隐藏）

$("#aa").hide();//默认隐藏
                $("#xx").on("click",function(){
                    $("#aa").show(1000,function(){
                        //回调函数
                        $("#aa").addClass("xz");
                    });//1s
                    
                })
                $("#yy").on("click",function(){
                    $("#aa").hide(2000,function(){
                        $("#aa").addClass("xz");
                    });//2s
                    
                })
                $("#zz").on("click",function(){
                    $("#aa").toggle(1000,function(){
                        $("#aa").addClass("xz");
                    });//1s切换
                })

2.2 滑动动画 slideDown(下滑)、slideUp（上滑）、slideToggle(上下滑动切换)

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

2.3 淡入淡出(透明度)fadeIn(淡入)、fadeOut(淡出)、fadeToggle(淡入/淡出切换)

$("#aa").hide();//默认隐藏
                $("#xx").on("click",function(){
                    $("#aa").fadeIn(1000,function(){
                        //回调函数
                        $("#aa").addClass("xz");
                    });//1s
                    
                })

2.4 自定义动画

（1）收缩---animate()

width、height（属性）

$("#bb").click(function(){
                    $("#aa").animate({
                        width:0,
                        height:0
                    },1000);
                })

 （2）移动animate

top、left(属性)

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

 在自身基础上移动

$("#bb").click(function(){
                    $("#aa").animate({
                        left:"+=5",
                        top:"+=8"//在自身基础上移动
                    },100);
                })