一、click事件
click事件----鼠标单击事件
$('.bt').click(function() { alert("本身的事件");})
当class为bt的div被但单击时执行函数体的内容部分
$('.bt').click(function() {
$('.bt2').click();
})
当class为bt的div被但单击时执行class为bt2的div的click（）事件
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.bt{
background:#F00;
}
.bt2{
background:#f0f;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="bt">click（）鼠标单击事件</div>
<div class="bt2">间接响应</div>
<script type="text/javascript">
$('.bt').click(function() {
alert("本身的事件");
$('.bt2').click();
})
$('.bt2').click(function() {
alert("调用其他对象绑定的事件");
})
</script>
</body>
</html>
二、mousemove（）和mousemout（）
鼠标移入（当鼠标移入到该元素的内部时触发）和移出事件（当鼠标移出元素的内部时触发）
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style>
.test{
height:100px;
100px;
background:#F00;
}
</style>
<body>
<h2>.mousemove()方法</h2>
<div class="test"></div>
<script type="text/javascript">
//鼠标移入事件
$(".test").mousemove(function(){
$(".test").css({"background":"blue","width":"100px","height":"100px"});
});
//鼠标移出事件
$(".test").mouseout(function(){
$(".test").css({"background":"yellow","width":"50px","height":"50px"});
});
</script>
</body>
</html>
三、hover事件
hover()方法是同时绑定 mouseenter和 mouseleave事件。
使用：hover(function(){
鼠标移入元素时触发的内容
},function(){
鼠标移出元素时触发的内容
})
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.test{
100px;
height:100px;
background:#000;
color:#FFF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="test">hover()事件</div>
<script type="text/javascript">
$(".test").hover(function(){
$(".test").css("background","red");
},function(){
$(".test").css("background","blue");
});
</script>
</body>
</html>
四、focusin（）聚焦事件和focusout（）失焦事件
聚焦事件--当该元素获得聚焦时触发
失焦事件---当该元素失去焦点时触发
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<p>聚焦事件：<input class="in"/></p>
<p>失焦事件：<input class="ot"/></p>
<script type="text/javascript">
//input聚焦元素增加一个边框
$(".in").focusin(function() {
$(this).css('border','2px solid red');
});
$(".ot").focusout(function(){
alert("真的要放弃填写吗?");
});
</script>
</body>
</html>
五、change事件
change事件--当元素的内容发生变化时触发：
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>input、textarea与select</h2>
<p>请输入输入姓名：<input class="name" type="text" value="请输入姓名" />
</p>
<p>选择性别<select class="sex">
<option value="男" selected="selected">男</option>
<option value="女">女</option>
</select>
</p>
<p>个人简介： </p><textarea class="jianjie" rows="3" cols="20">简介</textarea>
<div id="info"></div>
<script type="text/javascript">
//监听input值的改变
$('.name').change(function(e) {
$("#info").text("您的姓名是："+e.target.value)
});
$(".name").focusin(function(){
$(".name").select();
});
//监听select：
$(".sex").change(function(e) {
$("#info").text("您的性别是："+e.target.value)
})
//监听textarea：
$(".jianjie").change(function(e) {
$("#info").text("个人简介："+e.target.value)
})
</script>
</body>
</html>
六、submit事件
表单提交事件：
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<form id="f1" action="aa.html">
<input type="text" value="input" />
<input type="submit" value="提交" />
</form>
<form id="f2" action="bb.html">
<input type="text" value="input2" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
//提交表单并跳转
$('#f1').submit(function(e) {
alert('submit事件被触发，页面跳转')
});
//提交表单阻止页面跳转
$('#f2').submit(function() {
alert('submit事件被触发，通过return false阻止页面跳转')
return false;
});
</script>
</body>
</html>
- keydown()是在键盘按下就会触发
- keyup()是在键盘松手就会触发
on()的多事件绑定
$("#elem").on('click',function(){}) //on方式
$("#elem").on({
mousedown: function(e) {
$(this).text('触发事件：')
},
mouseup: function(e) {
$(this).text('触发事件：')
}
})