javascript入门实例代码分析

2024-04-02 19:04:59 149人浏览薄情痞子

摘要

这篇文章主要介绍“javascript入门实例代码分析”，在日常操作中，相信很多人在javascript入门实例代码分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”java

这篇文章主要介绍“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入门实例代码分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript入门实例代码分析

本文链接: https://www.lsjlt.com/news/98865.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341