jQuery04事件和动态效果

            //1.1 加载DOM两种方式(区别)
            //原生态JavaScript加载DOM的方式
            //当网页全部加载完毕后才会执行的函数
            //该方式在一个页面上只能出现一次     如果出现多处  会覆盖
          

 window.onload=function(){
                alert(123);
            }；
            

---

            //给定一个函数
         

   function myload(){
                alert(123);
            }；

---

            //通过onload调用
        

    window.onload=myload();
            

---

            //添加事件监听的方式
            //该方式可以出现多处
                
          

---

 window.addEventListener('load',function(){
                alert(123);
            });
            window.addEventListener('load',function(){
                alert(456);
            });

---

            //jQuery的DOM加载
            //jQuery的DOM在一个页面上可以编写多个
            //jQuery的完整写法
         

   $(document).ready(function(){
                alert(123);
            });
            //简写
            $(function(){
                alert(456);
            });  
            

---

            //页面上同时出现原生态jsDOM和jQueryDOM加载
            //版本不同，先后执行顺序不同
              

 $(function(){
                    alert('jQuery')
                });
                window.onload=function(){
                    alert('原生态js')
                }

---

            // $(function(){
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
          

---

     $("#oBtn1").on('click',function(){
                    alert(123);
                });
                //bind绑定
                $("#oBtn1").bind('click',function(){
                    alert(123);
                })；
                

                

---

                //--元素.事件名
                

$("#oBtn1").click(function(){
                    alert('哈哈')
                });
                
                //鼠标移出事件    mouseover   mouseout
                $("#oBth1").mouseover(function(){
                    alert(123);
                });
                $("#oBth1").mouseover(function(){
                    //alert(123);
                    console.log("yichu")
                });
            

---

                //1.3 合成事件/事件切换
              

  //--hover()悬停控制元素[div]的显示和隐藏
                $("#oDiv").hover(function(){
                    $(this).addClass("over");
                },function(){
                    $(this).removeClass('over')    
                });

---

                
                

                //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
                $("#oBtn2").click(function(){
                    //没有传递参数   调用后立即隐藏与显示
                    //有参数（毫秒）   调用后有延时效果
             

       //$("#oDiv").toggle(function(){
                        alert("隐藏了----我出现了")
                    }，function(){
                        alert('我出现了')
                    });
                });
                  

---

    
                
                //1.4 事件的传播(事件冒泡) 小p->中div->大body
              

  $("body").click(function(){
                    alert(123);
                });
                
                $("#oBtn2").click(function(){
                    alert(456);
                    return false;//阻止事件传播
                });

                

---

                
                
                //1.5 事件event的坐标[了解即可 pageX,pageY]
                $("body").click(function(){
                

    //pagex横坐标
                    //鼠标
                    console.log(event.pagex，event.pageY);
                    //left和top    body有默认的margin与padding值
                    console.log(event.offsetX,event.offsetY);
                    //窗口
                    console.log (event.clientX,event.ClientY);
                    
                    

                });

                //1.6 事件的移除
                //--按钮只能点击一次[2]
                

---

var flag=true;
                $("#oBtn3").click(function(){
                    if(flag==true){
                        alert(123);
                        flag=false;
                    }

                    //一次性作业    通过调用解绑事件即可
             

---

       $(this).off();
                    $(this).unbind();
                });
                //jQuery中提供的一个方法one
                $("#oBtn3").one('click',function){
                    alert(123);
                };
                
                

                

---

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

   var num=1;
                $("#oBtn3").click(function(){
                    if(num%2==0){
                            alert(123);
                            console.log('点击了'num)
                    }
                    num++;
                    console.log(num);
                });

2.动画效果

动画 
			//2.1 基本动画 [回调函数]
			// 隐藏
			// $("#btn2").click(function(){
			// 	// alert(123)
			// 	$("div").hide(5000);
			// })
			// // 显示
			// $("#btn2").click(function(){
			// 	$("div").show(2000);
			// })
			// // 切换
			// $("#btn3").click(function(){
			// 	$("div").toggle(2000);
			// })
		
			//2.2 滑动动画
			// $("#btn4").click(function(){
			// 	// 往上拉
			// 	$("div").slideUp(2000);
				
			// })
			// $("#btn5").click(function(){
			// 	// 往上拉
			// 	$("div").slideDown(2000);
				
			// })
			// $("#btn6").click(function(){
			// 	// 往上拉
			// 	$("div").slideToggle(2000);
				
			// })
			
			//2.3 淡入淡出(透明度)
			// $("#btn7").click(function(){
			// 	// 淡入
			// 	$("div").fadeOut(2000);
				
			// })
			// $("#btn8").click(function(){
			// 	// 淡出
			// 	$("div").fadeIn(2000);
				
			// })
			// $("#btn9").click(function(){
			// 	// 淡入淡出切换
			// 	$("div").fadeToggle(2000);
				
			// })
			//2.4 自定义动画
			$("#btn10").click(function(){
				
				$("div").animate({
					width:"500px",
					height:"500px"
				},3000);
				
			})
			$("#btn11").click(function(){
				
				$("div").animate({
					left:"500px",
					top:"300px"
				},3000);
				
			})
			
			$("#btn12").click(function(){
				
				$("div").animate({
					left:"+=50px",
					top:"+=3px"
				},3000);
				
			})