jQuery学习--Chapter03小结(jQuery事件与动画)

jQuery学习--Chapter03小结(jQuery事件与动画)

1.页面载入 ready(fn)

$(document).ready(function(){
// 在这里写你的代码...
});
//简写方式
$(function(){
// 在这里写你的代码...
});

2.常用鼠标事件

(1). click() 单击鼠标时触发 

$("p").click();

(2). mouseover() 鼠标指针移过时触发

$("p").mouseover();

(3). mouseout() 鼠标指针移除时触发

$("p").mouseout();

3.常用键盘事件

(1). keydown() 按下按键时触发

$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息:     http://unixpapa.com/js/key.html // ...
}
});

(2). keyup() 释放按键时触发

$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});

(3). keypress() 产生可打印的字符时触发

$("input").keydown(function(){
$("span").text(i+=1);
});

4. 常用表单事件

(1). focus() 获取焦点

$("input[type=text]").focus(function(){
this.blur();
});

(2). blur() 失去焦点

$("input[type=text]").blur( function () { alert("Hello World!"); } );

5. 绑定事件

在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind() 方法，其语法如下：

bind(type,[data],fn)

type: 事件类型，主要包括blur、focus、click、mouseout等基础事件。

[data]: 可选参数，作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须

fu: 处理函数，用来绑定的处理函数

(1). 绑定单个事件

$("input").bind("click",function(){
//处理代码...
});

(2). 绑定多个函数

$("input").bind({
mouseover:function(){
//处理代码
},
mouseout:function(){
//处理代码
}
});

6. 移除事件

移除事件与绑定事件是相对的，jQuery中，未匹配的元素移除单个或多个事件，可以使用unbind() 方法，其语法如下：

unbind([type],[fn])

unbind() 方法的两个参数都不是必须的，当unbind() 不带参数是，表示移除所绑定的全部事件。
7.复合事件
(1). hover() 

在jQuery中，hover() 方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时，会触发指定的第一个函数 (enter)；当鼠标指针移除这个元素时，会触发指定的第二个函数 (leave),该方法相当于mouseover 与 mouseout 事件的组合。其语法如下：

hover(enter,leave);
//示例
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

(2). toggle()
toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的
click 事件。其语法如下   

toggle(fn1,fn2,......fnN)
//示例
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

8. 元素的显示与隐藏
(1). show()用于显示隐藏的匹配元素，其语法如下：

show([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

$("p").show("fast",function(){
$(this).text("Animation Done!");
});

    (2).hide()用于隐藏显示的元素，其语法如下：

hide([speed,[easing],[fn]])

$("p").hide("fast",function(){
alert("Animation Done.");
});

9. 淡入淡出
    (1). fadeIn() 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数，其语法如下：

fadeIn([speed],[eas],[fn])

("p").fadeIn("fast",function(){
alert("Animation Done.");
});

(2).
fadeOut() 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数，其语法如下

fadeOut([speed],[eas],[fn])

$("p").fadeOut("fast",function(){
alert("Animation Done.");
});

10. 滑动

(1). slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideDown([speed,[easing],[fn]])

$("p").slideDown("fast",function(){
alert("Animation Done.");
});

(1).
slideDown() 通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideUp([speed,[easing],[fn]])

$("p").slideUp("fast",function(){
alert("Animation Done.");
});