第三章 jQuery事件和动画

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(    {width:"800px",height:"100px"});

$(this).css("background-color","#F00");

},

function(){

$(this).animate(    {width:"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) 元素的显示与隐藏

1. show(“速度”)  速度：slow、normal、fast、1000
2. toggle()切换元素可见状态效果，还可以用于鼠标连续click事件

是show()和hidden的综合体

b) 元素的淡入淡出

1. fadeIn()淡入
2. fadeOut()淡出
3. slideUp()收起
4. 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({ width:"500px",height:"500px"},1000); },

function(){ $("#d6").animate({ width:"200px",height:"200px"},1000);}

);