一、事件

1、加载Dom两种方式

①window.onload方式:整个网页中所有内容(包括图片)加载完成后，才会执行，且只能编写1个

②jQuery方式：在网页结构绘制完成后执行，可编写多个

③两个都有的情况下：jQuery3.0:window.onload比jQuery先执行;jQuery1.0和2.0：jQuery比window.onload先执行

2、绑定事件两种方式

①元素.on(“事件名”,function(){})

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


代码展示：

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

效果展示：

3、合成事件/事件切换

①hover():鼠标悬停合成事件

②toggle():鼠标点击合成事件

4、事件传播(事件冒泡)

①:传播:小–>中–>大

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


代码展示：

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

效果展示：

5、事件坐标

①offsetX:当前元素左上角

②clientX:窗口左上角

③pageX:网页左上角


代码展示：

$("#aa").click(function(e){					
    console.info(e.pageX,e.pageY);//x,y坐标
})

效果展示：

6、移除事件

元素.unbind(“事件名”)


注意

：①一般情况下，不会使用unbind,推荐使用变量控制事件

②如果某个元素只允许使用一次事件，则可以使用one()

例如：点击按钮偶数次可以，奇数次则失效


代码展示：

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

效果展示:

二、动画效果

1、基本

①show(Time):显示

②hide(Time):隐藏

③toggle(Time):切换

2、滑动

①slideUp(Time):动画收缩(向上滑动)–>隐藏

②slideDown(Time):动画展开(向下滑动)–>显示

③slideToggle(Time):动画切换

3、淡入淡出（透明度）

①fadeIn(Time):淡入(透明度减少)

②fadeOut(Time):淡出(透明度增大)

③fadeToggle(Time):切换

4、自定义动画

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

②缩放:width  height

③移动:top left

④移动(本元素),距离:top=”+=”

left=”-=”