事件
方法 | 描述 | 执行时机 |
---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
举例
$(".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事件 | 产生可打印的字符时 |
举例
$("[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("确认要提交么?"); } });
绑定事件
语法
bind(type,fn);
举例
$(document).ready(function(){ $(".on").bind("mouseover",function(){ $(".topDown").show(); }); });//一个 $(".top-m .on").bind({ mouseover:function(){ $(".topDown").show(); }, mouseout:function(){ $(".topDown").hide(); } });//多个
移除事件
语法
unbind([type],[fn])
举例
$("#del").click(function(){ $("#nav li:first").unbind("click", content1) });
复合事件
语法
hover(enter,leave)//hover()方法相当于mouseover与mouseout事件的组合 toggle(fn1,fn2,...,fnN);//toggle()方法用于模拟鼠标连续click事件 toggleClass(className);
举例
$(".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");})
元素显现与隐藏
语法
$(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]
举例
....
动画
语法
$(selector). animate({params},speed,callback)
举例
$("#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);
###