|           编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 下拉菜单JS代码怎么写 【实例描述】 分类下拉菜单可以尽可能地显示网站的导航信息。本例学习如何制作下拉式的导航菜单。 【实例代码】   <html>
<head>
<TITLE>下拉菜单-本站(www.xue51.com)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
//为各个菜单项定义鼠标事件
startList = function() 
{
if (document.all&&document.getElementById) {
  navRoot = document.getElementById("mynav");
//找到菜单根目录
    for (i=0; i<navRoot.childNodes.length; i++) 
    {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
            node.onmouseover=function() {
            this.className+=" over"; }
             node.onmouseout=function() {
            this.className=this.className.replace(" over", ""); }
     }
   }
 }
}
window.onload=startList;
</script> 需要在body中添加一些菜单项,注意菜单项根目录的ID必须为“mynav”代码如下所示: <style type="text/css">
body 
{  font: normal 11px verdana;  }
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; 
  border-bottom: 1px solid #ccc;
  }
ul li 
{  position: relative;  }
li ul {
  position: absolute;
  left: 149px; 
  top: 0;
  display: none;
  } /* 菜单项的样式 */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  }
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
li:hover ul, li.over ul { display: block; }
</style> </head>
<body>
<ul id="mynav"> 
 <li><a href="#">首页</a></li> 
 <li><a href="#">帮助</a> 
 <ul> 
 <li><a href="#">历史</a></li> 
 <li><a href="#">团队</a></li> 
 <li><a href="#">办公室</a></li> 
 </ul> 
 </li> 
 <li><a href="#">客服</a> 
 <ul> 
 <li><a href="http://www.google.com">网页设计</a></li> 
 <li><a href="#">网络销售</a></li> 
 <li><a href="#">站点服务</a></li> 
 <li><a href="#">区域服务</a></li> 
 </ul> 
 </li> 
 <li><a href="#">联系方式</a> 
 <ul> 
 <li><a href="#">国家</a></li> 
 <li><a href="#">城市</a></li> 
 <li><a href="#">地址</a></li> 
 <li><a href="#">电话</a></li> 
 </ul> 
 </li> 
</ul> 
</body>
</html>
 
 【运行效果】   【难点剖析】 本例在设计时使用了“ul”和“li”元素完成菜单项的设计:使用JavaScript中的“childNodes”属性来获取每一个菜单项。注意“childNodes”是JavaScriptDOM的重要组成部分,在Ajax应用中起了关键作用。 【源码下载】 如果你不愿复制代码及提高代码准确性,你可以点击:下拉菜单 进行本实例源码下载  
 使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 
 |