您的位置: 首页  >  文章  >  web实训知识点_0326

web实训知识点_0326

分类: 文章 • 2024-02-22 11:11:16

学到的新标签：tagname

用到的地方：js的获取标签（类似于getelementdyid）
tagname，获取页面上所有的（该标签）的名字
[0]代表之后的第一个（第0个）

例子：用tagname实现js的二级菜单效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS实现导航栏tagname</title>
		<style>
			*{
				list-style: none;
				text-decoration: none;
				font-family: "黑体";
			}
			a{
				color: black;
			}
			nav{
				height: 40px;
				width: 500px;
				background-color: aqua;
				margin: 0 auto;
			}
			nav ul {
				margin: 0 auto;
			}
			nav ul li{
				height: 40px;
				width: 70px;
				text-align: center;
				line-height: 40px;
				float: left;
				margin-left: 8px;
				position: relative;
			}
			nav ul li:hover{
				background-color: green;
			}
			nav ul li:hover a{
				color: yellow;
			}
			nav ul li ul{
				float: none;
				padding: 0;
				position: absolute;
				left: -8px;
				display: none;
			}
			nav ul li ul li{
				background-color: indigo;
				height: 40px;
				width: 90px;
			}
			nav ul li ul li:hover{
				background-color: yellow;
				
			}
			nav ul li ul li:hover a{
				color: indigo;
				
			}
		</style>
		<script>
			function divDisplay(li){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "list-item";
			}
			function div(li){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "none";
			}
			
		</script>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li onmouseout="divDisplay(this)" onmouseleave="div(this)">
					<a href="#">课程大厅</a>
					<ul id="one">
						<li>
							<a href="#">web网页实战</a>
						</li>
						<li>
							<a href="#">服务端技术</a>
						</li>
						<li>
							<a href="#">Python技术</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">学习中心</a>
				</li>
				<li onmouseout="divDisplay(this)" onmouseleave="div(this)">
					<a href="#">经典案例</a>
					<ul id="two">
						<li>
							<a href="#">Java</a>
						</li>
						<li>
							<a href="#">HTML</a>
						</li>
						<li>
							<a href="#">C#</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">关于我们</a>
				</li>
			</ul>
		</nav>
	</body>
</html>

 效果图：

web实训知识点_0326

jQuery的核心
用更少的代码，做更多的事


jQuery基础语法


jq的选择机构基于css的选，他提供了快速查询DOM文档中元素的能力，而且大大强化了js中获取页面元素的方式。
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作
基础语法是$(selector).action()

selector：“查询和查找”html元素
action：执行操作

例子：p.style.background

下面是用jQuery进行操作的演示

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
			jquery学习
		</title>
		<style>
			width
		</style>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			
		</script>
	</head>
	<body>
		<p>asd</p>
		<p>asd</p>
		<p>asd</p>
		<p>asd</p>
		<p>asd</p>
		<p>asd</p>
		<a>asdasdasdasd</a>
		<span>asd</span>
		<span>asd</span>
		<span>asd</span>
		<span>asd</span>
		<script>
			for(var i = 0;i < 4;i++){
				var a = document.getElementsByTagName("p")[i];
				a.style.backgroundColor = '#ccc';
			}
			$("a").css({color:"#ff0011",background:"blue"});
			$('span').css("background-color","red").css('color','blue');
		</script>
	</body>
</html>

 

相关推荐