javascript入門實例代碼分析

發(fā)布時間：2022-09-27 10:54:53 來源：億速云閱讀：126 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“javascript入門實例代碼分析”，在日常操作中，相信很多人在javascript入門實例代碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript入門實例代碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

想要學(xué)javascript標(biāo)簽這塊內(nèi)容一定要能拿得下，在學(xué)這個腳本語言之前，我們肯定首先要有一個“編譯器”，其實這個與html所用到的是一樣的，也就是說js代碼其實就是嵌套在html代碼當(dāng)中，只不過js代碼需要套在標(biāo)簽中才能運行。如果你之前學(xué)習(xí)過一些編程語言，想要入門js并不是非常困難。因為各編程語言的思維是相似的，更何況js為弱類型語言，可能對于某些有編程基礎(chǔ)的人來說就更容易入門了。下面是js代碼應(yīng)用的一個例子，其實就是一個下拉菜單的功能。

<!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;
			}

菜單樣式結(jié)束

			.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值獲取菜單項的元素或節(jié)點
				var oSubMenu = document.getElementById('submenu');//通過id值獲取整個子菜單項的元素或節(jié)點 
				oHasMenu.onmouseover = function() {//鼠標(biāo)經(jīng)過菜單項時子菜單顯示同時顯示向上方向箭
					oHasMenu.className='up';
					oSubMenu.style.display = 'block';
				}
				oHasMenu.onmouseout = function() {//鼠標(biāo)移出菜單項時子菜單隱藏同時顯示向下方向箭 
					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">網(wǎng)頁							<ul class="submenu" id="submenu">
								<li>網(wǎng)頁</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><--搜索框結(jié)束-->
			</div><--頭部結(jié)束-->
		</div><--整體的容器結(jié)束-->
	</body> </html>

到此，關(guān)于“javascript入門實例代碼分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

javascript入門實例代碼分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽