location和history对象
1.history对象：
1.1back()
1.2forward()
1.3go()
2.location：
2.1href
2.2reload()
三种访问页面元素的区别
getElementById()：按元素的ID名称来访问
getElementsByName()：按元素的name名称来访问
getElementsByTagName()：按标签来访问
案例1：树形菜单
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作树形菜单</title>
<style type="text/css">
body{
font-size: 12px;
color: #000000;
line-height: 20px;
}
img {
vertical-align: middle;
border:0;
}
a{font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover {font-size:13px;
color: #ff0000;
}
ul{
list-style:none;}
ul li{
padding-left:15px;}
</style>
<script type="text/javascript">
function show(menu){
if(document.getElementById(menu).style.display=='none'){
document.getElementById(menu).style.display='block'; //触动的层如果处于隐藏状态，即显示
}
else{document.getElementById(menu).style.display='none'; //触动的层如果处于显示状态，即隐藏
}
}
</script>
</head>
<body>
<ul>
<a href="javascript:οnclick=show('1') "><img src="images/z-1.jpg">分类讨论区</a></ul>
<ul id="1" style="display:none;">
<li><img src="images/z-top.gif" >BBS 系统</li>
<li><img src="images/z-top.gif" >共建水木</li>
<li><img src="images/z-top.gif" >站务公告栏</li>
<li><img src="images/z-top.gif" >妆点水木</li>
<li><img src="images/z-end.gif" >申请版主</li>
</ul>
<ul><a href="javascript: οnclick=show('2') "><img src="images/z-2.jpg">社会信息</a></ul>
<ul id="2" style="display:none;">
<li><img src="images/z-top.gif" >美容品与饰品代理</li>
<li><img src="images/z-top.gif" >考研资料市场</li>
<li><img src="images/z-top.gif" >商海纵横</li>
<li><img src="images/z-top.gif" >动物保护者</li>
<li><img src="images/z-top.gif" >动物世界</li>
<li><img src="images/z-end.gif" >中国风·神州各地</li>
</ul>
<ul><a href="javascript: οnclick=show('3') "><img src="images/z-3.jpg">休闲娱乐</a></ul>
<ul id="3" style="display:none;">
<li><img src="images/z-top.gif" >ASCIIart全国转信</li>
<li><img src="images/z-top.gif" >七彩水木</li>
<li><img src="images/z-top.gif" >网友聚会</li>
<li><img src="images/z-top.gif" >醉品人生</li>
<li><img src="images/z-top.gif" >花木园艺</li>
<li> <img src="images/z-end.gif" >祝福</li>
</ul>
<ul><a href="javascript: οnclick=show('4') "><img src="images/z-4.jpg">电脑技术</a></ul>
<ul id="4" style="display:none;">
<li><img src="images/z-top.gif" >BBS安装管理</li>
<li> <img src="images/z-top.gif" >CAD技术</li>
<li><img src="images/z-top.gif" >数字图像设计</li>
<li> <img src="images/z-top.gif" >电脑音乐制作</li>
<li> <img src="images/z-top.gif" >软件加密与解密</li>
<li><img src="images/z-end.gif" >计算机体系结构</li>
</ul>
</body>
案例2：复选框
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>复选框选中效果</title>
<style type="text/css">
table {
width: 400px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top:1px solid #666666;
border-left:1px solid #666666;
}
td{
font-size:12px;
line-height:25px;
text-align:center;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
}
</style>
<script type="text/javascript">
function all_check(){
var oInput=document.getElementsByName("ic");
for (var i=0;i<oInput.length;i++){
if (document.getElementById("all").checked==true){
oInput[i].checked=true;
}
else {
oInput[i].checked=false;
}
}
}
function single_check(){
var oInput=document.getElementsByName("ic");
var j=0;
for(var i=0;i<oInput.length;i++){
if (oInput[i].checked==true){
j=j+1;
}
}
if(j==oInput.length){
document.getElementById("all").checked=true;
}
else{
document.getElementById("all").checked=false;
}
}
</script>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr style=" font-weight:bold; ">
<td><input id="all" type="checkbox" value="全选" onclick="all_check()" />全选</td>
<td>产品名称</td>
<td>价格（元）</td>
<td>数量</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="诺基亚" onclick="single_check()" /></td>
<td>诺基亚N85手机</td>
<td>2589</td>
<td>6</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="佳能" onclick="single_check()" /></td>
<td>佳能IXUS95ISY数码相机</td>
<td>1865</td>
<td>5</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="戴尔" onclick="single_check()"/></td>
<td>戴尔新版SK8115键盘</td>
<td>60</td>
<td>56</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="联想" onclick="single_check()" /></td>
<td>联想折叠式笔记本电脑桌</td>
<td>59</td>
<td>10</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="康佳" onclick="single_check()" /></td>
<td>康佳32英寸液晶电视</td>
<td>2945</td>
<td>3</td>
</tr>
<tr>
<td><input name="ic" type="checkbox" value="九阳" onclick="single_check()"/></td>
<td>九阳JYDX-78D五谷系列豆浆机</td>
<td>299</td>
<td>8</td>
</tr>
<tr>
<td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;">删除选中的产品</td>
</tr>
</table>
</body>
扫一扫
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
