这篇文章主要介绍“javascript入门实例代码分析”,在日常操作中,相信很多人在javascript入门实例代码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript入门实例代码分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
想要学javascript标签这块内容一定要能拿得下,在学这个脚本语言之前,我们肯定首先要有一个“编译器”,其实这个与html所用到的是一样的,也就是说js代码其实就是嵌套在html代码当中,只不过js代码需要套在 标签中才能运行。如果你之前学习过一些编程语言,想要入门js并不是非常困难。因为各编程语言的思维是相似的,更何况js为弱类型语言,可能对于某些有编程基础的人来说就更容易入门了。下面是js代码应用的一个例子,其实就是一个下拉菜单的功能。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .search { width: 760px; height: 70px; margin: 0 auto; } .logo { float: left; width: 188px; height: 70px; margin-right: 44px; } .logo img { width: 100%; height: 100%; } /*菜单样式开始*/ .menu { float: left; width: 60px; height: 40px; margin-top: 11px; border: 2px solid dodgerblue; border-right: none; } .menu #hasmenu{ width: 60px; height: 40px; line-height: 40px; padding-left: 10px; color: grey; } .menu .up{background: url(img/up.png) no-repeat 46px center;} .menu .down{background: url(img/down.png) no-repeat 46px center;} .menu .submenu { width: 60px; height: 223px; margin-left: -11px; border:1px solid dodgerblue; border-top: none; display: none; background: #FFFFFF; } .menu .submenu li{ width: 60px; height: 25px; line-height: 25px; text-align: center; color: grey; }
菜单样式结束
.input-text { width: 200px; height: 40px; margin-top: 11px; border: 2px solid dodgerblue; border-left: none; } .btn { width: 120px; height: 40px; border: 0; background: dodgerblue; color: #fff } </style> <script type="text/javascript"> window.onload = function() { var oHasMenu = document.getElementById('hasmenu');//通过id值获取菜单项的元素或节点 var oSubMenu = document.getElementById('submenu');//通过id值获取整个子菜单项的元素或节点 oHasMenu.onmouseover = function() {//鼠标经过菜单项时子菜单显示同时显示向上方向箭 oHasMenu.className='up'; oSubMenu.style.display = 'block'; } oHasMenu.onmouseout = function() {//鼠标移出菜单项时子菜单隐藏同时显示向下方向箭 oHasMenu.className='down'; oSubMenu.style.display = 'none'; } } </script> </head> <body> <div class="wrap"><--整体的容器开始--> <div class="head"><--头部开始--> <div class="search"><--搜索框开始--> <p class="logo"><img src="img/logo.png" /></p> <ul class="menu"> <li class="down" id="hasmenu">网页 <ul class="submenu" id="submenu"> <li>网页</li> <li>图片</li> <li>视频</li> <li>音乐</li> <li>地图</li> <li>问问</li> <li>百科</li> <li>新闻</li> <li>购物</li> </ul> </li> </ul> <input type="text" class="input-text" /> <input type="button" class="btn" value="搜狗搜索" /> </div><--搜索框结束--> </div><--头部结束--> </div><--整体的容器结束--> </body> </html>
到此,关于“javascript入门实例代码分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。