1、jQuery的事件有哪些?
javscript的事件:onClick,onmouseover
jquery的事件:click,mouseover
注意jQuery的事件比javascript的事件少一个on
1)鼠标事件
click:单击事件
//dbclick:双击事件
mouseover:鼠标悬念(移入)
mouseout:鼠标移出
<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>
2) 键盘事件
keydown:键盘按下事件
keypress:键盘按下并放开时触发
keydown:键盘放开时触发
<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>
3) 表单事件
focus:获得焦点时触发
blur:失去焦点
select:文本选中时触发
<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>
4)其它事件
bind():绑定事件
unbind():移除绑定事件
<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="解除绑定" />
hover():相当于mouseover和mouseout的组合
.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>
togger():
a) 鼠标连续点击
b) 显示和隐藏
<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>