1.什么是事件：
事件指的是用于对网页操作的时候，网页做出的一个回应。
2.JQuery中的事件：
JQuery事件是对JavaScript事件的封装，常用事件的分类如下：
（1）基础事件：
window事件
鼠标事件
键盘事件
表单事件
（2）复合事件是多个事件的组合：
鼠标光标悬停
鼠标连续点击
3.鼠标事件：
click() 鼠标单击时
mouseover() 鼠标移过时
mouseout() 鼠标移出时
4.键盘事件：
keydown() 按下键盘
keyup() 放开键盘
keypress() 按住不放
常用的按键的编码：enter 13
a/A 65
b/B 66
5.表单事件：
fouse() 获得焦点
blur() 失去焦点
6.绑定单个事件：
$("选择器").bind("事件1",事件1执行的函数).bind("事件2",事件2执行的函数);
7.绑定多个事件：
$("选择器").bind({事件1:事件1的操作,事件2:事件2的操作,事件3:事件3的操作});
8.移除事件：unbind()
当unbind()不带参数时，表示移除所绑定的全部事件。
9.光标悬停事件：hover(),相当于mouseover和mouseout的组合使用
hover(函数1，函数2)：函数1在悬停的时候执行，函数2在离开的时候执行
10.鼠标连续点击事件：
toggle()方法用于模拟鼠标连续click事件
语法：$("选择器").toggle(函数1,函数2,函数3);
注:点击第一个执行函数1，点击第二个执行函数2，第三个执行函数3
11.JQuery动画：
控制元素显示与隐藏
控制元素淡入淡出
改变元素高度
12.元素的显示个隐藏：
（1）显示元素：$(选择器).show（参数）;//不写参数就默认正常
（2）隐藏元素：$(选择器).hide（参数）;
注：参数可以是毫秒数，fast（快），slow（慢）,normal（正常速度）
13.显示和隐藏的切换：
toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
14.淡入淡出效果：
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出的效果
15.改变元素高度：
slideDown() 可以使元素逐步延伸显示
slideUp() 则使元素逐步缩短直至隐藏
16.动画：animate(fn,time);
JQuery中的事件和动画实例
$(document).ready(function(){
//为元素绑定单击事件
$(“#myDiv”).click(function(){
//alert(this.innerHTML);
//alert($(this).html());
});
//为元素绑定单鼠标经过事件
$(“#myDiv”).mouseover(function(){
//alert($(this).html());
$(this).addClass(“zss”);
});
//为元素绑定单鼠标经过事件
$(“#myDiv”).mouseout(function(){
//alert($(this).html());
$(this).addClass(“zss”);
});
//1、键盘按下事件
$(document).keydown(function(event){
alert(event.keyCode);
});
//3、起来
$(document).keyup(function(event){
alert(event.keyCode);
});
//2、键盘键入字
$(document).keypress(function(){
alert(“keypress”);
);
//获取焦点事件
$(“[name=’username’]”).focus(function(){
//alert(“123”);
//清空输入框
$(this).val(“”);
//this.value=””;
);
//失去焦点事件
$(“[name=’username’]”).blur(function(){
//取出文本框中的值和””做判断
if($(this).val()==””){
//修改文本框中的值
$(this).val(“请输入用户名！”);
}
);
});
1、鼠标事件：鼠标单击、鼠标移上、鼠标移过
2、键盘事件：键盘按下、键盘放开、键入字
3、表单事件：获得焦点、失去焦点
4、除了使用事件名绑定事件还可以使用bind()方法
bind(“事件名”,绑定函数) 可以绑定多个
//绑定单个事件
//使用bind绑定失去焦点事件
$(“[name=’username’]”).bind(“blur”,function(){
//取出文本框中的值
$(this.val());
});
//使用bind()方法绑定获取焦点事件
$(“[name=’username’]”).bind(“focus”,function(){
//取出文本框中的值和””做判断
if($(this).val()==””){
//修改文本框中的值
$(this).val(“请输入用户名！”);
}
});
//绑定多个事件
bind(
{名字：函数事件，名字2：函数2}
)
在JS中,一般而言，[]中的是数组，{}中的是对象。
{属性名：属性值|函数}
JOSN对象：JavaScript Object native
现在很推崇这种方式，只写重要部分，更简洁。
如：{name:”张三”,sex:”男”,age:”18”}
5、移除事件unbind(),不带参数表示所有事件都移除，代参数表示移除固定参数。
6、鼠标光标悬停事件hover(函数1,函数2)
函数1：鼠标移入事件,函数2：鼠标移出事件 animate()表示让元素动起来,参数是大小
$("#myDiv").hover(
function(){
$(this).animate( {"800px",height:"100px"});
$(this).css("background-color","#F00");
},
function(){
$(this).animate( {"100px",height:"100px"});
$(this).css("background-color","#ccc");
}
);
//JavaScript Document
$(function(){
$(".parent").hover(
function(){
$(this).children().eq(1).animate({left:'0px'});
$(this).children().eq(2).animate({top:'0px'});
$(this).children().eq(3).animate({top:'100px'});
}
,
function(){
$(this).children().eq(1).animate({left:'-1000px'});
$(this).children().eq(2).animate({top:'-100px'});
$(this).children().eq(3).animate({top:'300px'});
}
)
});
7、动画效果
a) 元素的显示与隐藏
- show(“速度”) 速度：slow、normal、fast、1000
- toggle()切换元素可见状态效果，还可以用于鼠标连续click事件
是show()和hidden的综合体
b) 元素的淡入淡出
- fadeIn()淡入
- fadeOut()淡出
- slideUp()收起
- slideDown()展开
注：小括号中可以放速度
$("#myDiv").click( function(){
//$(".ru").css("display","none");//先隐藏在淡入
//$(".ru").fadeIn(1000);
//因为本来就是显示的，可以设置淡出
$(".ru").fadeIn(1000);
//因为本来就是显示的，可以设置收起
$(".ru").slideUp();
//$(".ru").css("display","none");//先隐藏在展开
$(".ru").slideDown();
});
c) 改变元素的高度 animate(修改,事件)
$("#change3").hover(
function(){ $("#d6").animate({ "500px",height:"500px"},1000); },
function(){ $("#d6").animate({ "200px",height:"200px"},1000);}
);