1、当单击元素时,发生 click 事件
$('div').eq(0).click(function()
{
$(this).css('color', 'red');
})
2、当元素的值改变时发生 change 事件(仅适用于表单字段)。
$('input[name=userName]').change(function(){
$(this).css('background', 'red');
})
3、当鼠标指针离开被选元素时,会发生 mouseover 事件。
4、当鼠标指针离开被选元素时,会发生 mouseout 事件。
$('div').eq(1).mouseover(function()
{
$(this).css('color', 'red');
})
$('div').eq(1).mouseout(function()
{
$(this).css('color', 'blue');
})
5、hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
$('div').eq(2).hover(function()
{
$(this).css('color', 'red');
},
function()
{
$(this).css('color', 'blue');
})
6、focus() 当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
if($('#passWord').val() == '')
{
$('#passWord').focus();
}
7、当键盘键被按下时发生 keydown 事件。
8、当键盘键被松开时发生 keyup 事件。
使用 event.which 属性来返回哪个键盘键被按下
$('#email').keydown(function(){
$(this).css('color', 'pink');
})
$('#email').keyup(function(){
$(this).css('color', 'green');
})
$(document).keydown(function(){
//alert(event.which);
})
9、显示show() 隐藏hide()
$('#show').click(function()
{
$('div').eq(3).show();
})
$('#hide').click(function()
{
$('div').eq(3).hide();
})
10,淡入淡出效果
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 如果淡出,则淡入,如果淡入,则淡出。
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
$('#fadeIn').click(function()
{
$('div').eq(4).fadeIn(5000);
})
$('#fadeOut').click(function()
{
$('div').eq(5).fadeOut(5000);
})
$('#fadeToggle').click(function()
{
$('div').eq(6).fadeToggle(5000);
/* 设置透明度
$('div').eq(6).fadeTo(3000,0.4);
*/
})
11滑动效果
slideDown():方法用于向下滑动元素。
slideUp():方法用于向上滑动元素。
slideToggle():可以在 slideDown() 与 slideUp() 方法之间进行切换。
function navJump(leif){
if(leif=='userManage'){
$('.column').eq(0).slideToggle('fast');
}
}