Chapter Objectives
Using common simple event production netnew
Use the mouse to make the main event navigation effects
Use hover () method to make drop-down menu effects
Use the mouse event page effects and animation
Web page events
And WinForm as interaction in the web page of the event is also a need to achieve, for example, tab switching effect can be achieved by a mouse click event
jQuery events
Base Events
mouse events
keyboard events
window events
Form events
Composite event
mouse cursor over
Click the mouse in a row
Mouse Events
The timing of the implementation of the conditions described
click () function to trigger or bind click event specified element
mouseover () function to trigger or bind mouseover event specified elements of the mouse pointer move out of date
mouseout () function to trigger or bind to a specific element mouseout event when the mouse pointer out of
mouseenter () function to trigger or bind to a specific element mouseenter mouse pointer enters the event
when mouseleave () function to trigger or bind to a specific element mouseleave event the mouse pointer leaves
example:
// use mouseover event to change the background color navigation project
$ ( "NAV ul-A.") mouseOver (function () {.
$ (the this) .css ( "background-color", "f01e28 #");
})
// use mouseout event background color reduction to navigation items
$ ( "NAV UL-A.") mouseOut. (function () {
$ (the this) .css ( "background-color", "# ff2832");
})
The difference between the mouse event method is
the same method point difference
mouseover ()
mouseenter () that trigger the mouse when the mouse enters the selected elements into the back and forth in the sub-elements that selected element:
trigger mouseover ()
does not trigger mouseenter
mouseout ()
MouseLeave ( time) will trigger the mouse when the mouse leaves the selected elements back and forth on its left is a child element of the selected element:
trigger mouseout
not trigger mouseleave
Keyboard Events
方法 描述 执行时机
keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress( ) 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
示例：
$(document).ready(function () {
$("[type=password]").keydown(function(){
//append方法是在被选元素内部插入指定内容
$("#events").append("keydown")
}).keyup(function() {
$("#events").append("keyup")
}).keypress(function(){
$("#events").append("keypress")
})
$(document).keydown(function(event) {
console.log(event);
if(event.keyCode == 13) {
alert ("确认要提交吗？")
}
})
});
浏览器事件
语法：$(selector).resize( );
调整窗口大小时，完成页面特效
绑定事件与移除事件
绑定事件
bind(type,[data],fn);
type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data]：可选函数
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])
[type]:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]:处理函数
提示：当unbind()不带参数时，表示移除所绑定的全部事件
复合事件
hover( )方法
toggle( )方法
hover( )方法
hover()方法相当于mouseover与mouseout事件的组合
语法：
hover(enter,leave);
示例：
.top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
toggle()方法
语法：
toggle(fn1,fn2,...,fnN);
示例：
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle()方法2-2
oggle()方法不带参数，与show( )和hide( )方法作用一样
toggleClass( )可以对样式进行切换
语法：
toggleClass(className);
示例：
$("input").click(function(){$("p").toggleClass("red");})
小结：
toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
jQuery动画效果
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
控制元素的显示及隐藏
语法：$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])、
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选.fadeIn函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数
改变元素的透明度
语法：
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选。show函数执行完之后，要执行的函数
改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
语法:$(selector).slideUp ([speed],[callback])
` $(selector).slideDown ([speed],[callback])
示例：
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
自定义动画
语法:
$(selector). animate({params},speed,callback)
params:必须，定义形成动画的css属性
speed:可选,规定效果时长，取值：毫秒、fast、slow
callback:可选，滑动完成后执行的函数名称