jQuery的事件（代码演示如何使用）
1、jQuery的事件有哪些？
javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一个on
1）鼠标事件
click：单击事件
//dbclick：双击事件
mouseover：鼠标悬念（移入）
mouseout：鼠标移出
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
2) 键盘事件
keydown：键盘按下事件
keypress：键盘按下并放开时触发
keydown：键盘放开时触发
- 1
- 2
- 3
- 4
- 5
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3) 表单事件
focus：获得焦点时触发
blur：失去焦点
select：文本选中时触发
- 1
- 2
- 3
- 4
- 5
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
4）其它事件
bind()：绑定事件
unbind()：移除绑定事件
- 1
- 2
- 3
- 4
<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="解除绑定" />
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
hover()：相当于mouseover和mouseout的组合
- 1
- 2
.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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
togger()：
a) 鼠标连续点击
b) 显示和隐藏
- 1
- 2
- 3
- 4
<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>
