您的位置：首页 > Web前端 > JQuery

jQuery之事件绑定&合成事件

2015-12-09 13:26 656 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航