1、采用事件绑定bind()
<!DOCTYPE html>
<html>
<head>
<title>Char 4.1.2</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.content{
display: none;//给元素一开始设置为隐藏
}
</style>
<script type="text/javascript">
$(function(){
//1、找到标题所在的元素,绑定bind
$("#titles h2.head1").bind("click",function() {
//2.找到内容所在元素,设置为contents
var $contents=$(this).next();
//3.判断是否是隐藏的
if($contents.is(":visible")){
$contents.hide();
}else{
$contents.show();
}
})
})
</script>
</head>
<body>
<div id="titles">
<h2 class="head1">what is jquery?</h2>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
</div>
</div>
</body>
</html>
2、鼠标滑过操作mouseover()&&mouseout()
<!DOCTYPE html>
<html>
<head>
<title>CHar 4.1.3</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px
}
#div1 {
width: 300px;
border: 1px solid #0050D0
}
.head1 {
height: 24px;
line-height: 24px;
text-indent: 10px;
background: #96E555;
cursor: pointer;
width: 100%;
}
.content {
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none;
}
.highlight {
background-color: #ff3300;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#div1 h3.head1").mouseover(function() {
$(this).addClass('highlight');
$(this).next().show();
}).mouseout(function() {
$(this).removeClass('highlight');
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="div1">
<h3 class="head1">jquery</h3>
<div class="content">this is the jquery.the best!!</div>
</div>
</body>
</html>
3、利用合成事件hover()或者toggle()方法
<!DOCTYPE html>
<html>
<head>
<title>CHar 4.1.3</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px
}
#div1 {
width: 300px;
border: 1px solid #0050D0
}
.head1 {
height: 24px;
line-height: 24px;
text-indent: 10px;
background: #96E555;
cursor: pointer;
width: 100%;
}
.content {
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none;
}
.highlight {
background-color: #ff3300;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<!-- hover -->
<!-- <script type="text/javascript">
$(function(){
$("#div1 h3.head1").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
})
</script> -->
<!-- toggle!!!!!!! -->
<script type="text/javascript">
$(function() {
$("#div1 h3.head1").toggle(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="div1">
<h3 class="head1">jquery</h3>
<div class="content">this is the jquery.the best!!</div>
</div>
</body>
</html>