Javascript

jQuery 实现显示隐藏效果

Posted in Javascript on 十二月 14th, 2007 by admin – Be the first to comment

jQuery 是一个 JavaScript 库。我听说很久了，但一直没来得及学习。我是个 JavaScript 超超超菜鸟（就是什么也不懂了），如果 jQuery 真那么神奇，那真是太好了。

来试着做一下吧。先下载 jQuery，然后建立这样一个 html 文档：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// jQuery 代码
  $( document ).ready( function(){
   $("dt").mouseover( function(){
     $("dd").slideDown("slow");
   });
   $("dt").mouseout( function(){
     $("dd").slideUp("slow");
   });
 });
</script>
</link></head>
 
<body>
<dl>
<dt>鼠标放上来看看
<dd>一个方框出来了吧
</dd></dt></dl>
<br />
</body>
</html>

style.css 的内容是这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

dl, dt, dd {
	margin: 0;
	padding: 0;
}
dt {
	width: 200px;
	color: width;
	font-weight: bold;
	background-color: #99aabb;
	border: 1px solid gray;
	text-align: center;
}
dd {
	display: none;
	width: 200px;
	height: 200px;
	background-color: #F5F7F9;
	border: 1px solid #CDD5DE;
}

完成了！

Powered by ScribeFire.