jquery是 提倡用更少的代码，做更多的事 （write less do morr）
优点：快速获取文档元素
语法：引入jquery库：<script src="" type="text/javascript" charset="utf-8"></script>
基本语法：通过css构建的选择器 快速查询dom文档元素 美元符号$定义jquery ￥（selector）.action（）；
js做法 var p1 = doucument.getelementsbytganame("p")
for(i=0;i<5;i++){
p1[i].style.backgroundcolor="#ccc"
p1[i].style.width='50px'
p1[i].style.height='50px'
}
jquery做法：$("span").css(“background-color”,"red")
$("span").css('font-style‘，‘微软雅黑’)
JS二级导航栏代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏二级</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#nav{
background-color: dodgerblue; width: 600px; height:20px; margin: 0 auto;}
ul li{list-style:none;float: left; line-height: 20px;text-align: center;position: relative;}
a{text-decoration:none ; color: #red; padding: 0 10px;}
a:hover{color:greenyellow;}
ul li ul{position: absolute;top: 20px; left: 0;display: none;}
ul li ul li{float:none; background-color:blueviolet;margin: 1px 0;width: 90px;}
/* ul li:hover li{display: block;} */
ul li ul li a{padding: 0;}
</style>
<script type="text/javascript">
function k1(){
var b1 = document.getElementById("b1");
b1.style.display="block";
}
function k2(){
var b1 = document.getElementById("b1");
b1.style.display="none";
}
</script>
</head>
<body><div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="k1()" onmouseout="k2()"><a href="#">课程大厅</a>
<ul id="b1">
<li><a href="#">web网页实战</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">python技术</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<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><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>