<!DOCTYPE html>
<html>
<head>
<title>事件绑定之鼠标悬停</title>
<script src="jquery-3.1.1.js"></script>
<script>
</script>
<style type="text/css">
.head{
width: 200px;
border: 1px solid #000;
background-color: #ccc;
}
.content{
display: none;
}
</style>
</head>
<body>
<h2 class="head">事件绑定</h2>
<div class="content">这是一段文字</div>
</body>
</html>
HTML CSS代码如上下面开始jQuery代码
入门（click）
<script>
$(‘.head‘).bind(‘click‘,function(){
$(this).next().show();
});
</script>
增加效果 鼠标单击标题显示，在此单击隐藏
<script>
$(‘.head‘).bind(‘click‘,function(){
var $content = $(this).next();
if($content.is(‘:visible‘)){
$content.show();
}else{
$content.hide();
}
});
</script>
进阶--改变事件绑定类型
<script>
$(function(){ $(‘.head‘).bind(‘mouseover‘,function(){
$(this).next().show();
}).bind(‘mouseout‘,function(){
$(‘.content‘).hide();
});
}) </script>
精通--简写绑定事件
<script>
$(function(){
$(‘.head‘).mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
})
</script>
骨灰级本以为上面的简写很简单了，没想到jQuery还提供了更为简单的方法
$(function(){
//hover()方法
$(‘.head‘).hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
时间： 2024-12-28 10:31:50