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() 方法,其语法如下:
type: 事件类型,主要包括blur、focus、click、mouseout等基础事件。bind(type,[data],fn)
[data]: 可选参数,作为event.data属性值传递给事件对象的额外数据对象,该参数不是必须
fu: 处理函数,用来绑定的处理函数
(1). 绑定单个事件
(2). 绑定多个函数$("input").bind("click",function(){ //处理代码... });
6. 移除事件$("input").bind({ mouseover:function(){ //处理代码 }, mouseout:function(){ //处理代码 } });
移除事件与绑定事件是相对的,jQuery中,未匹配的元素移除单个或多个事件,可以使用unbind() 方法,其语法如下:
unbind() 方法的两个参数都不是必须的,当unbind() 不带参数是,表示移除所绑定的全部事件。unbind([type],[fn])
7.复合事件(1). hover()
在jQuery中,hover() 方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时,会触发指定的第一个函数 (enter);当鼠标指针移除这个元素时,会触发指定的第二个函数 (leave),该方法相当于mouseover 与 mouseout 事件的组合。其语法如下:
(2). toggle()hover(enter,leave); //示例 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
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:在动画完成时执行的函数,每个元素执行一次。
(2).hide()用于 隐藏显示的元素,其语法如下:$("p").show("fast",function(){ $(this).text("Animation Done!"); });
hide([speed,[easing],[fn]])
$("p").hide("fast",function(){ alert("Animation Done."); });
9. 淡入淡出
(1). fadeIn() 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数,其语法如下:
fadeIn([speed],[eas],[fn])
(2). fadeOut() 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数 ,其语法如下("p").fadeIn("fast",function(){ alert("Animation Done."); });
fadeOut([speed],[eas],[fn])
$("p").fadeOut("fast",function(){ alert("Animation Done."); });
(1). slideDown() 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。10. 滑动
slideDown([speed,[easing],[fn]])
$("p").slideDown("fast",function(){ alert("Animation Done."); });
slideUp([speed,[easing],[fn]])
$("p").slideUp("fast",function(){ alert("Animation Done."); });