DOM和BOM相关
DOM，对页面上的HTML标签进行操作。
DOM：文档对象模型，js代码去操作HTML标签
document.getElementById("content")
BOM：浏览器对象模型，浏览器内置功能
alert("点击了");
confirm("是否删除")；
// setInterval(function (){
// console.log(123);
// }, 1000); //定时调用函数
注意：用这两个模块可以实现页面的所有效果。但是比较费劲，所以jQuery诞生，这是一个别人封装好了的模块（类库），代码量更少的实现我们想要的功能。
var tag' = document.getElementById("content")； 使用jQuery后可以写成如下 ${"#content"}
案例：菜单切换
切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.group{
width: 300px;
border: 1px solid #ddd;
}
.group .header{
background-color: gold;
padding: 8px 5px;
}
.group .menu a{
display: block;
}
/*隐藏样式*/
.hide{
display: none;
}
</style>
</head>
<body>
<div class="group">
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMenu(this);">头部</div>
<div class="menu">
<a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
<a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
</div>
</div>
</div>
<script>
function clickMenu(ths) {
//ths,代指当前点击的标签
//1、找到自己下面的一个兄弟标签
//2、给他加上一个样式hide
var tag = ths.nextElementSibling;
if(tag.className == "menu"){
tag.classList.add("hide");
}else{
tag.classList.remove("hide");
}
}
</script>
</body>
</html>
由上面可以看出使用DOM比较繁琐，所以引出jQuery模块
