jQuery事件&插画

一. 事件

1.1 加载DOM两种方式

window.onload方式

执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行。
编写个数：一个

jQuery方式

执行时间：网页结构绘制完成后，执行
编写个数：多个

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

1.2 绑定事件两种方式

元素.on（“事件名”，function(){}）
元素.事件名（function(){}）

1.3 合成事件/事件切换

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

鼠标移上去第一个函数
鼠标移除第二个函数

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

1.4 事件传播（事件冒泡）

传播：小—>中—>大
阻止传播：事件后面加上 return false

1.5 事件坐标

offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角

1.6 移除事件

元素.onbind（“事件名”）

注意：1.一般情况下，不会使用unbind，推荐使用变量控制事件
2.如果某个元素只允许使用一次事件，则可以使用one()

二. 动画效果

2.1 基本

显示：show（Time）
隐藏：hide（Time）
切换：toggle（Time）

2.2 滑动

slideUp（Time）：动画收缩（向上滑动）—>隐藏
slideDown（Time）：动画展开（向下滑动）—>显示
slideToggle（Time）：动画切换

2.3 淡入淡出（透明度）

fadeIn（Time）：淡入（透明度减少）
fadeOut（Time）：淡出（透明度增大）
fadeToggle（Time）：切换

2.4 自定义动画

元素.animate（{属性：属性值}，Time）

缩放

width
height

移动

top
left

移动（本元素），距离

top=“+=”
left=“-=”

三. 表单插件

jQuery-validation

//加载函数
$(function(){
// 找到表单标签  调用表单插件中的validate方法设置规则
  $("#myForm").validate({
	//规则
	rules:{
	    username:{
	    required:true,
		minlength:5,
		maxlength:10
	  }
						
    },
	messages:{
		username:{
		required:"必填项,请输入",
		minlength:"至少是5位数",
		maxlength:"不能超过10位数"
	  }
    }
  });
});