jQuery之事件绑定&合成事件
1.事件绑定
bind(type,fn)
2.绑定方式的简写形式
click(function(){});
示例代码:/jQuery01/WebRoot/event/e1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件绑定</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
/*
//事件绑定正式写法
$('#d1').bind('click',function(){
$(this).html('hello java');
});
*/
//事件绑定简写形式
$('#d1').click(function(){
$(this).html('hello java');
});
});
</script>
</head>
<body>
<div id="d1">hello jQuery</div>
</body>
</html>
3.合成事件
hover(enter,leave) -- 模拟光标悬停事件
toggle(fn1,fn2...) -- 模拟鼠标连续单击事件
示例代码:/jQuery01/WebRoot/event/e2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>合成事件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
.s1{
width:100px;
height:100px;
background-color:red;
}
.s2{
background-color:yellow;
}
</style>
<script type="text/javascript">
$(function(){
/*
//鼠标进入事件
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
//鼠标移除事件
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
*/
/*
//合成事件--hover(enter,leave):模拟光标悬停事件
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
*/
//toggle(fn1,fn2...)--模拟鼠标连续单击事件
//实验结果不理想
$('a').toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide();
});
});
</script>
</head>
<body>
<div class="s1">hello jQuery</div>
<a href="javascript:;">显示所有票价</a>
<div id="d1" style="display:none;">
111<br/>
222<br/>
333<br/>
444<br/>
</div>
</body>
</html>