jQuery 简单介绍，二级菜单（HTML+css；JavaScript；jQuery三种实现方式）

最新推荐文章于 2024-05-06 21:09:29 发布

豆皮没有豆

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量3.2k

点赞数 1

分类专栏： JQuery 文章标签： jQuery简单介绍，二级菜单（HTML+css；JavaScript 二级菜单 jQuery实现二级菜单 JavaScript实现二级菜单 HTML+css实现二级菜单

本文链接：https://blog.csdn.net/qq_43434300/article/details/88991749

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery简介
jQuery 库可以通过一行简单的标记被添加到网页中。
在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTML、CSS、JavaScript。
什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，Jquery还提供了大量的插件。
为什么使用 jQuery ？
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery，例如:
Google
Microsoft
IBM
Netflix
jQuery插件下载及引入到页面
下载地址：https://jquery.com/
在这里我用的是jquery-3.3.1版本–min。j为压缩版本，两个都可以

例：
入口函数：相当于加载事件
进一步学习可以通过jQuery帮助手册：http://jquery.cuishifeng.cn/index.html
案例
（1）二级下拉菜单案例
①html+css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#firsts{
				width: 460px;
				height: 30px;
				margin: 100px auto;
			}
			#firsts>li{
				width: 150px;
				height: 30px;
				list-style: none;
				float: left;
				background: aqua;
				border: 1px solid gainsboro;
			}
			#firsts>li>a{
				display: inline-block;
				width: 150px;
				height: 30px;
				font-family: "微软雅黑";
				font-size: 15px;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
				color: black;
			}
			.second{
				width: 150px;
				height: 60px;
				display: none;
			}
			.second>li{
				width: 150px;
				height: 30px;
				list-style: none;
				background: aqua;
				border: 1px solid gainsboro;
			}
			.second>li>a{
				display: inline-block;
				width: 150px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-family: "微软雅黑";
				font-size: 15px;
				color: black;
				text-decoration: none;
			}
			#first1:hover #second1{
				display: block;
			}
			#first2:hover #second2{
				display: block;
			}
			#first3:hover #second3{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul id="firsts">
			<li id="first1">
				<a href="#">一级菜单1</a>
				<ul class="second" id="second1">
					<li> 
						<a href="#">二级菜单11</a>
					</li>
					<li> 
						<a href="#"> 二级菜单12</a>
					</li>
					<li> 
						<a href="#">二级菜单13</a>
					</li>
				</ul>
			</li>
			<li id="first2">
				<a ,href="#">一级菜单2</a>
				<ul class="second" id="second2">
					<li> 
						<a href="#">二级菜单21</a>
					</li>
					<li> 
						<a href="#"> 二级菜单22</a>
					</li>
					<li> 
						<a href="#">二级菜单23</a>
					</li>
				</ul>
			</li>
			<li id="first3">
				<a href="#">一级菜单3</a>
				<ul class="second" id="second3">
					<li> 
						<a href="#">二级菜单31</a>
					</li>
					<li> 
						<a href="#"> 二级菜单32</a>
					</li>
					<li> 
						<a href="#">二级菜单33</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

②JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	        #nav {
	            list-style: none;
	            text-align: center;
	        }
	
	        a {
	            text-decoration: none;
	            display: inline-block;
	            width: 100px;
	        }
	
	        #nav li {
	            float: left;
	            width: 100px;
	            height: 30px;
	            color: white;
	            line-height: 30px;
	            background-color: skyblue;
	        }
	
	        #menu {
	            list-style: none;
	            padding: 5px;
	            display: none;
	            margin-left: -5px;
	            margin-top: -5px;
	        }
	
	        #menu li {
	            background-color: pink;
	            width: 100px;
	        }
	
	        #menu li a:hover {
	            background-color: mistyrose;
	            color: white;
	        }
   		</style>
   		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
   		<script type="text/javascript">
   			window.onload=function(){
	          var lis=document.getElementById("nav").getElementsByTagName('li');
	          var i=0;
	          for( i=0;i<lis.length;i++){
	            lis[i].onmouseover = function () {
	            var ulObj = this.getElementsByTagName('ul')[0].style.display="block";
	              
	            }
	            lis[i].onmouseout=function(){
	              var ulObj=this.getElementsByTagName('ul')[0].style.display="none";
	            }
	          }
	        }
   		</script>
	</head>
	<body>
		 <ul id="nav">
	        <li class="child">
	           	 一级菜单1
	            <ul id="menu">
	                <li><a href="#">二级菜单1.1</a></li>
	                <li><a href="#">二级菜单1.2</a></li>
	                <li><a href="#">二级菜单1.3</a></li>
	            </ul>
	        </li>
	        <li class="child">
	          	  一级菜单2
	            <ul id="menu">
	                <li><a href="#">二级菜单2.1</a></li>
	                <li><a href="#">二级菜单2.2</a></li>
	                <li><a href="#">二级菜单2.3</a></li>
	            </ul>
	        </li>
	        <li class="child">
	            	一级菜单3
	            <ul id="menu">
	                <li><a href="#">二级菜单3.1</a></li>
	                <li><a href="#">二级菜单3.2</a></li>
	                <li><a href="#">二级菜单3.3</a></li>
	            </ul>
	        </li>
	    </ul>
	</body>
</html>

③jQuery实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	        #nav {
	            list-style: none;
	            text-align: center;
	        }
	
	        a {
	            text-decoration: none;
	            display: inline-block;
	            width: 100px;
	        }
	
	        #nav li {
	            float: left;
	            width: 100px;
	            height: 30px;
	            color: white;
	            line-height: 30px;
	            background-color: skyblue;
	        }
	
	        #menu {
	            list-style: none;
	            padding: 5px;
	            display: none;
	            margin-left: -5px;
	            margin-top: -5px;
	        }
	
	        #menu li {
	            background-color: pink;
	            width: 100px;
	        }
	
	        #menu li a:hover {
	            background-color: mistyrose;
	            color: white;
	        }
   		</style>
   		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
   		<script type="text/javascript">
             $(function(){
             	var lis=$("#nav>li");
             	console.log(lis);
             	lis.mouseenter(function(){
             		$(this).children("ul").show();
             	});
             	lis.mouseleave(function(){
             		$(this).children("ul").hide();
             	});
             });
   		</script>
	</head>
	<body>
		 <ul id="nav">
	        <li class="child">
	           	 一级菜单1
	            <ul id="menu">
	                <li><a href="#">二级菜单1.1</a></li>
	                <li><a href="#">二级菜单1.2</a></li>
	                <li><a href="#">二级菜单1.3</a></li>
	            </ul>
	        </li>
	        <li class="child">
	          	  一级菜单2
	            <ul id="menu">
	                <li><a href="#">二级菜单2.1</a></li>
	                <li><a href="#">二级菜单2.2</a></li>
	                <li><a href="#">二级菜单2.3</a></li>
	            </ul>
	        </li>
	        <li class="child">
	            	一级菜单3
	            <ul id="menu">
	                <li><a href="#">二级菜单3.1</a></li>
	                <li><a href="#">二级菜单3.2</a></li>
	                <li><a href="#">二级菜单3.3</a></li>
	            </ul>
	        </li>
	    </ul>
	</body>
</html>

豆皮没有豆

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 简单介绍，二级菜单（HTML+css；JavaScript；jQuery三种实现方式）

jQuery简介jQuery 库可以通过一行简单的标记被添加到网页中。在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTML、CSS、JavaScript。什么是 jQuery ？jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作C...
复制链接

扫一扫