javscript的事宜：onClick,onmouseover
jquery的事宜：click,mouseover
把稳jQuery的事宜比javascript的事宜少一个on
1）鼠标事宜
click：单击事宜
//dbclick：双击事宜
mouseover：鼠标悬念（移入）
mouseout：鼠标移出
123456789<style>
.abc{
background-color: #aaa;
}
</style>
<script type=\公众text/javascript\"大众>
$(function(){
$(\"大众#nav li\"大众).mouseover(function(){
$(this).addClass(\"大众abc\公众);//当鼠标移入li元素时添加样式
}).mouseout(function(){
//$(this).removeClass() //当鼠标移出时删除所有样式
$(this).removeClass(\公众abc\"大众) //当鼠标移出时删除指定样式
});
});
</script>
<div id=\公众nav\"大众>
<ul>
<li><a href=\"大众#\公众>首页</a></li>
<li><a href=\"大众#\"大众>服装</a></li>
<li><a href=\公众#\"大众>电器</a></li>
<li><a href=\公众#\"大众>团购</a></li>
<li><a href=\"大众#\"大众>在线浏览</a></li>
</ul>
</div>
12345678910111213141516171819202122232425262) 键盘事宜
keydown：键盘按下事宜
keypress：键盘按下并放开时触发
keydown：键盘放开时触发
12345<script type=\"大众text/javascript\"大众>
$(function(){
//按回车键自动登录(不用再点击登录按钮)
$(document).keydown(function(event){
if(event.keyCode==13){
$(\"大众#actionForm\"大众).submit();
return true;
}
return false;
})
});
</script>
<form id=\公众actionForm\公众 action=\"大众../index.html\公众>
登录名：<input id=\"大众txtLoginName\"大众 /><br />
密码：<input type=\公众password\公众 />
<input type=\"大众button\"大众 value=\"大众登录\"大众 />
</form>
1234567891011121314151617183) 表单事宜
focus：得到焦点时触发
blur：失落去焦点
select：文本选中时触发
12345<script type=\"大众text/javascript\公众>
$(function(){
//文本框得到焦点时，将当前文本框的内容清空（值即是\"大众请输入登录名..\公众）
//文本框失落去焦点时，判断内容是否为\"大众请输入登录名..\"大众或是否为空，那么将这个值\公众请输入登录名..\"大众设回到文本框
$(\公众#txtLoginName\"大众).focus(function(){
if($(this).val()=='请输入登录名...'){
$(this).val('');//清空内容
}
}).blur(function(){
if($(this).val().trim()==''){
$(this).val('请输入登录名...');//清空内容
}
});
});
</script>
<form id=\"大众actionForm\"大众 action=\"大众../index.html\"大众>
登录名：<input id=\公众txtLoginName\"大众 value=\"大众请输入登录名...\"大众 /><br />
密码：<input type=\"大众password\公众 />
<input type=\"大众button\"大众 value=\"大众登录\"大众 />
</form>
123456789101112131415161718192021224）其它事宜
bind()：绑定事宜
unbind()：移除绑定事宜
1234<script type=\"大众text/javascript\"大众>
$(function(){
//绑定单个事宜
// $(\"大众#btn1\"大众).bind('click',function(){
// alert(\"大众OK\"大众);
// });
//绑定多个事宜
$(\"大众#btn1\公众).bind({
mouseover:function(){
alert(\"大众鼠标悬念\"大众);
},
mouseout:function(){
alert(\"大众鼠标移出\公众);
}
})
//解除绑定事宜
$(\"大众#btn2\"大众).click(function(){
//$(\"大众#btn1\"大众).unbind(\公众click\"大众);//解除绑定的单个事宜
$(\公众#btn1\"大众).unbind(\"大众mouseover mouseout\"大众);//解除多个绑定的事宜，用空格分隔
//$(\"大众#btn1\"大众).unbind();//解除所有绑定的事宜
});
});
</script>
<input type=\"大众button\公众 id=\"大众btn1\"大众 value=\"大众点我\公众 /><br />
<input type=\"大众button\"大众 id=\公众btn2\"大众 value=\公众解除绑定\公众 />
1234567891011121314151617181920212223242526hover()：相称于mouseover和mouseout的组合
12.abc{
background-color: #aaa;
}
</style>
<script type=\"大众text/javascript\"大众 src=\"大众../js/jquery-1.8.3.js\"大众 ></script>
<script type=\公众text/javascript\"大众>
$(function(){
// $(\"大众#nav li\"大众).mouseover(function(){
// $(this).addClass(\"大众abc\"大众);//当鼠标移入li元素时添加样式
// }).mouseout(function(){
// //$(this).removeClass() //当鼠标移出时删除所有样式
// $(this).removeClass(\公众abc\公众) //当鼠标移出时删除指定样式
// });
$(\"大众#nav li\"大众).hover(
function(){
$(this).addClass(\"大众abc\"大众);//当鼠标移入li元素时添加样式
},
function(){
$(this).removeClass(\公众abc\"大众) //当鼠标移出时删除指定样式
}
);
});
</script>
12345678910111213141516171819202122232425togger()：
a) 鼠标连续点击
b) 显示和隐蔽
1234<script type=\"大众text/javascript\"大众>
$(function(){
//点击当前页面时显示红绿蓝的背景色
$(\公众body\公众).toggle(
function(){
$(this).css(\"大众background-color\"大众,\公众red\"大众);
},
function(){
$(this).css(\"大众background-color\公众,\公众green\"大众);
},
function(){
$(this).css(\"大众background-color\"大众,\"大众blue\"大众);
}
);
});
</script>
</head>
<body>
测试
</body>
