毕业已经一个月过去了，我还没学会jQuery的使用，我知道jQuery是我必须要学会的，毕竟技术的东西，懂多点还是有用处，只有掌握了一门技术才能更好地使用它，
在这段时间里，我下决心要学会一个.net的框架，一个javascript的成熟框架（例如exts），jQuery。
不多说了，现在开始学习jQuery了，第一天我要实现的功能就是当点击时，显示标题下的内容，假如内容已经显示，则隐藏内容。
我是学.net的这次我用的设计工具是Dreamweaver。首先创建了一个html的文件，并把jQuery的引用包添加进去，我是直接引用网上的jQuery包，在head标签内添加了
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
紧接着，就是写事件了，事件是javascript的，这个应该地球人都知道，呵呵，下面是我写的事件
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
var parent = $(this).parent().attr("id");
var Id = "#"+parent+"_1";
var css = $(Id).attr("style");
if(css == "display: block;")
{ $(Id).hide();
}
else
{
$(Id).css("display","block");
}
});
$("#firstP").click(function(){
$(this).hide()
$("#setOpen").show();
});
$("#setOpen").click(function(){
$("#firstP").show();
$(this).hide();
});
});
</script>
写完事件，我开始写页面了，
在body标签内的代码
<ul id="nva">
<li id=nva_1>
<p>电脑</p>
<ul id=nva_1_1>
<li>1111</li>
<li>1111</li>
</ul>
</li>
<li id=nva_2>
<p>鼠标</p>
<ul id=nva_2_1>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
<li id=nva_3>
<p>键盘</p>
<ul id=nva_3_1>
<li>3333</li>
<li>3333</li>
<li>3333</li>
</ul>
</li>
<li id=nva_4>
<p>风扇</p>
<ul id=nva_4_1>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
</ul>
}
接下来，为了更好地看实现的效果，我添加了一些简单的样式，不是很好看，呵呵
样式：
<style type="text/css">
*{padding:0px;margin:0px;}
ul {width:200px; display:block;}
p {background:#9C9}
#nva li ul li {background:#CFF}
#nva li ul{display:none;}
#nva_1_1{ display:visible;}
</style>
在这里，我知道*{padding:0px;margin:0px;}这个样式的含义，我解释一下，这是消除浏览器之间初始时定义的padding和margin的值是不一样的，添加了这个样式后，
就不会再出现，在IE是出现左边距或者上边距是10像素，而在hh却是5个像素，这只是个比喻，好了不多说了，下面是完整的页面，我贴出来了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>the first day</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
var parent = $(this).parent().attr("id");
var Id = "#"+parent+"_1";
var css = $(Id).attr("style");
if(css == "display: block;")
{
$(Id).hide();
}
else
{
$(Id).css("display","block");
}
});
});
</script>
<style type="text/css">
*{padding:0px;margin:0px;}
ul {width:200px; display:block;}
p {background:#9C9}
#nva li ul li {background:#CFF}
#nva li ul{display:none;}
#nva_1_1{ display:visible;}
</style>
</head>
<body>
<ul id="nva">
<li id=nva_1>
<p>电脑</p>
<ul id=nva_1_1>
<li>1111</li>
<li>1111</li>
</ul>
</li>
<li id=nva_2>
<p>鼠标</p>
<ul id=nva_2_1>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
<li id=nva_3>
<p>键盘</p>
<ul id=nva_3_1>
<li>3333</li>
<li>3333</li>
<li>3333</li>
</ul>
</li>
<li id=nva_4>
<p>风扇</p>
<ul id=nva_4_1>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
</ul>
</body>
</html>
写得不是很好，请多多指教，有什么建议或者意见希望我们能讨论下。
翱翔之心
浙公网安备 33010602011771号