jQery事件与特效
事件
方法 | 描述 | 执行时机 |
|---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
举例
代码语言：javascript复制$(".nav-ul a").mouseover(function(){
$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
});
方法 | 描述 | 执行时机 |
|---|---|---|
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
举例
代码语言：javascript复制$("[type=password]").keyup(function () {
$("#events").append("keyup");
}).keydown(function (e) {
$("#events").append("keydown");
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
alert("确认要提交么？");
}
});
绑定事件
语法
代码语言：javascript复制 bind(type,fn);举例
代码语言：javascript复制$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});//一个
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});//多个
移除事件
语法
代码语言：javascript复制unbind([type],[fn])举例
代码语言：javascript复制$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});复合事件
语法
代码语言：javascript复制hover(enter,leave)//hover()方法相当于mouseover与mouseout事件的组合
toggle(fn1,fn2,...,fnN);//toggle()方法用于模拟鼠标连续click事件
toggleClass(className);
//恭喜你們1.9之後被刪了举例
代码语言：javascript复制$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
//toggle()方法不带参数，与show( )和hide( )方法作用一样
$("input").click(function(){$("p").toggleClass("red");})
元素显现与隐藏
语法
代码语言：javascript复制$(selector).show([speed],[callback])
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数
$(selector).hide([speed],[callback])
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback]举例
代码语言：javascript复制....动画
语法
代码语言：javascript复制$(selector). animate({params},speed,callback)举例
代码语言：javascript复制$("#d1").animate({top:300},3000);
$("#d1").animate({top:300,left:300},3000);
$("#d1").animate({top:0,left:300},3000);
$("#d1").animate({top:0,left:0},3000);
