jQuery中的事件与动画
基本事件
1.载入事件
ready()
2.鼠标事件
基本用法:
1、click事件：点击鼠标左键时触发
$('p').click(function(){});
示例：
$('p').click(function(){
alert('click function is running !');
});
2、dbclick事件：迅速连续的两次点击时触发
$('p').dbclick(function(){});
示例：
$("button").dblclick(function(){
$("p").slideToggle();
});
3、mousedown事件：按下鼠标时触发
$('p').mousedown(function(){});
示例:
$("button").mousedown(function(){
$("p").slideToggle();
});
4、mouseup事件：松开鼠标时触发
$('p').mouseup(function(){});
示例：
$("button").mouseup(function(){
$("p").slideToggle();
});
5、mouseover事件：鼠标从一个元素移入另一个元素时触发
mouseout事件：鼠标移出元素时触发
$('p').mouseover(function(){});
$('p').mouseout(function(){});
示例：
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
6、mouseenter事件：鼠标移入元素时触发
mouseleave事件：鼠标移出元素时触发
$('p').mouseenter(function(){});
$('p').mouseleave(function(){});
示例:
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
常用键盘事件的方法
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown() | 触发或将函数绑定到指定元素的keydown 事件 | 按下按键时 |
| keyup() | 触发或将函数绑定到指定元素的keyup 事件 | 释放按键时 |
| keypress() | 触发或将函数绑定到指定元素的keypress 事件 | 产生可打印的字符串时 |
基本用法:
$(document).ready(function () {
$("#name").keydown(function () {
$("#id").append("按下按键时\t"); }
).keyup(function () {
$("#id").append(function () {
$("#id").append("释放按键时\t"); }
).keypress(function () {
$("#id").append("产生可打印的字符串\t"); }); });
$("#name").keydown(function (exe) {
if(exe.keyCode=="13"){
alert("确定要提交吗?");
}
}
)
}
);
bind()方法的参数说明
| 参数类型 | 参数函数 | 描述 |
|---|---|---|
| type | 事件类型 | 主要包括 click mouseover mouseout 等基础事件 此外 还可以是自定义事件 |
| [data] | 可选参数 | 作为event..data 属性值传递给事件对象的额外数据对象,该参数不是必须的 |
| fn | 处理函数 | 用来绑定处理函数 |
1.绑定事件
语法:
bind(type,[data],fn);
基本用法:
var an=0;
$(document).ready(function () {
$(window).resize(function () {
$("#id").append(an+=1);
});
});
unbind()方法的参数说明
| 参数类型 | 参数含义 | 描述 |
|---|---|---|
| [type] | 事件含义 | 主要包括 click mouseover mouseout 等基础事件 此外 还可以是自定义事件 |
| [fn] | 处理函数 | 用来解除绑定的事件 |
2.移除事件
语法:
unbind([type],[fn]);
复合事件
1.hover()方法
语法:
hover(mouseenter,mouseleave);
第一个参数表示鼠标mouseenter 事件第二个参数表示mouseleave 事件
基本用法:
$('p').hover(
function(){},
function(){}
);
示例:
$(".table_list tr").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
2.toggle()方法
语法:
toggle（fn1,fn2，fnn）
当此函数不带参数时：则与show（）、hide（）方法作用一样，如果元素可见则切换为不可见，如果不可见则切换为可见
带函数时：点击第一次实现fn1函数，第二次实现fn2函数……
基本用法:
$('p').toggle(
function(){},
function(){}
);
示例：
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
自定义动画：
$(selector).animate（{params}，speed，callback）
params：必填，定义形成动画的css属性
speed：可选，完成动画效果的时间
callback：可选，滑动完成后执行的函数
基本用法:
$(document).ready(function(){
$("#dianji").click(function () {
$("dl").animate({ left:"100px", backgroud:"blue", },2000);
});
});