jQuery动画和事件

   (1).原生态js加载函数的编写   2种形式
            a.window.onload = function(){}   1个   多个的情况，前者无效
            b.window.addEventListener('事件名称',function(){});  多个
 

window.onload = function(){
				alert('第1个加载函数');
			}
			window.onload = function(){
				alert('第2个加载函数');
			}
运行后前面的会被覆盖 所以运行结果是 第二个加载函数

js中可写多个加载函数的方法

window.addEventListener('load',function(){
				alert("111")
			});
window.addEventListener('load',function(){
				alert("222")
			});

 jQuery的加载函数  2种  一个页面可以出现多次

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

 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
版本有关  jQuery3.0版本以上   js快

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

 jQuery中三种绑定事件的方法

// 加载函数
			$(function(){
				// 1.标签绑定绑定事件的方式
				// (1)直接调用click点击事件的方法即可
				$("#btn1").click(function(){
					alert("我点击了这个按钮")
				});
				// (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
				$("#btn1").on('click',function(){
					alert("on实现的点击");
				});
				// (3)可以通过调用bind方法进行绑定一个事件
				$("#btn1").bind('click',function(){
					alert("bind 点击")
				});
			})

 获取滚动条被滚动的距离

$(window).scroll(function(){
					 console.log($('body').scrollTop()+$('html').scrollTop()) 
				})

 合成事件hover 鼠标移除与触发

//1.合成事件hover
			$(function(){
				// 参数中第1个回调函数的作用：鼠标触碰式触发
				// 参数中第2个回调函数的作用：鼠标离开式触发
				$("#btn2").hover(function(){
					console.log('111')
					// 标签显示show  属于jQuery中的动画效果
					// $("#oDiv").show();
					$("#oDiv").css("display","block");
				},function(){
					console.log('222')
					// 标签隐藏
					// $("#oDiv").hide();
					$("#oDiv").css("display","none");
				});

 事件传播与解绑事件 

<script type="text/javascript">
			$(function(){
				// unbind  off
				
				$("#btn4").click(function(){
					alert("恭喜你中奖了~");
					// 调用解绑事件
 
                    $(this).unbind(); 解绑事件
				    $(this).off(); 第二种解绑事件
 
					// $(this).disable();//禁用  无效
					// disabled 是属性  不是样式  不能用css去设置
					$(this).attr("disabled","disabled");
					
				});
				
				var index = 1;
				$("#btn5").click(function(){
					// 点击（奇数次可以，偶数次不行）
					// index为奇数的时候可以   为偶数的时候不行
					if(index % 2 == 1){
						console.log(index);
					}
					index++;
				});
				
				$("#btn6").one('click',function(){
					alert("只有一次机会")
				})
			});
		</script>

jQuery中的动画效果演示

 function test1() {
				// div隐藏和显示
				$("div").eq(0).show(2000)
			}
 
			function test2() {
				// div隐藏和显示
				$("div").eq(0).hide(2000)
			}
             
			function test3() {
				// div隐藏和显示
				$("div").eq(0).toggle(1000)
			}

 

  //慢慢隐藏 高度慢慢缩短
			function test4() {
				$("div").eq(1).slideUp(1000);
			}
 
			function test5() {
				$("div").eq(1).slideDown(1000);
			}
            //两个方法的结合
			function test6() {
				$("div").eq(1).slideToggle(1000);
			}

  //慢慢隐藏 改变透明度慢慢隐藏
			function test7() {
				$("div").eq(2).fadeIn(1000);
			}
			
			function test8() {
				$("div").eq(2).fadeOut(1000);
			}
			//两个方法的结合
			function test9() {
				$("div").eq(2).fadeToggle(1000);
			}

 

// 自定义动画
			function test10(){
				$("div").eq(3).animate({
					width:"+=300",
					height:"+=300"
				},800)
			}

 自定义变大变小动画

// 自定义动画 点击变大与变小
			var index=1;
			function test10(){
				if(index%2==1){
				$("div").eq(3).animate({
						width:"+=10",
						height:"+=10"
					},800)}else{
						$("div").eq(3).animate({
								width:"-=10",
								height:"-=10"
							},800)
					}
					index++;
			}

 让div盒子每秒增加

$(function(){
							// 定时器 每隔200毫秒加2
					window.setInterval(function(){
					$("div").last().animate({
							left:"+=2px"
							},2);
							},100);
						})