导航栏二级菜单案例
二级菜单实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
background-color: darkgray;
width: 600px;
height:40px;
margin: 0 auto ;
}
ul{
list-style: none;}
ul li{
float: left;
line-height:40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: blue;
padding: 0 10px;
display: block;
}
a:hover{
background-color:green;
color: #4bffe8;
}
ul li ul {
position: absolute;
top:40px;
left:0px;
display: none;
}
ul li ul li{
float: none;
background-color: #f7ff3d;
margin-top: 2px;
}
ul li ul li a{
background-color: hotpink;
}
ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a><li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">javajqurrerjqurrer</a><li>
<li><a href="#">jqurrer</a><li>
<li><a href="#">js</a><li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">javajqurrerjqurrer</a><li>
<li><a href="#">jqurrer</a><li>
<li><a href="#">js</a><ul>
</ul>
<li>
<li><a href="#">经典案例</a><li>
<li><a href="#">关于我们</a><ul>
</ul>
</div>
</body>
</html>
jquery学习:
特点:(1)快速获取文档元素
jquery的选择机制构建于CSS的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。jquery
(2)提供漂亮的页面动态效果
jquery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jquery的内置效果,比如淡入淡出、元素移除等动态特效。
(3)创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称,可以开发出非常灵敏无刷新的网页。
jquery基本语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:
$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
eg:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素