原生JavaScript
为了方便查看. 所有的js和css代码都是嵌入式直接写在html代码中
1.js的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<script>
// 注: 部分js代码写错了也不报错
var obj = document.getElementsByClassName('box1')[0];
obj.onclick = function(){
this.style.backgroundColor = "green";
}
</script>
<!-- <script src="js/a.js"></script>-->
</body>
</html>
2.数组对象
var arr = ["Maxs_hu", 11, 3, 4]
// 取数组中内容
arr[0]
// 数组长度
arr.length
// 取出数组中最后一个元素
arr.pop() // 即使内部放置索引也会取出最后一个
// 头部插入元素
arr.unshift("xxx")
// 头部移出元素
arr.shift('xxx')
// 切片
arr.slice(0, 3) // 顾头不顾尾
// 反序
arr.reverse()
// 数组拼接
arr.join(':')
// 两个数组的拼接
arr.concat(数组1)
// 排序
arr = [5, 3, "a", "-1"] // 使用sort函数默认使用ascii排序
// sort会取出两个值进行减法运算(减法运算会将字符串转乘number类型进行运算). 最终比出大小
arr.sort(function (x, y){
return x - y
})
// splice用法: 可以删头删尾删中间
// 从1位置开始. 删除两个. 然后在1位置插入后面的三个字符串
arr.splice(1, 2, "xxx", "yyy", "zzz")
// 遍历列表中每个元素
arr.forEach(function(item){console.log(item)}) // 没有返回值
arr.map(function(item){console.log(item)}) // 有返回值
// 案例:
var res = arr.forEach(function(item){return item + "_sb"})
// output: undefined -> void function return value is used
var result = arr.map(function(item){return item + "_sb"})
// map可以拿到返回值
3.Date日期对象
// 四种生成时间的方法
var d1 = new Date() // 获取当前时间
var d2 = new Date('2022/9/29 9:08:08')
var d3 = new Date(7000)
var d4 = new Date(2022, 11, 11, 11, 11, 11, 3000)
// 获取本地时间
d1.toLocaleString()
// 获取当前时间
d1.getDate()
d1.getHours()
d1.getDay()
d1.getSeconds()
// 具体用法可查看文档 https://www.cnblogs.com/linhaifeng/article/9346128.html
4.Math对象
// 向下取整
Math.floor(5.9) // 5
// 向上取整
Math.cell(5.9) // 6
// 取最大. 最小
Math.max(1, 2, 3, 4)
Math.min(1, 2, 3, 4)
// 取0-1中十五位小数的随机数
Math.random()
//取3-7中的随机数
3 + Math.random()*4
5.Json对象
// Json字符串转化成对象
var str1='{"name":"egon","age":18}';
var obj1=JSON.parse(str1);
console.log(obj1.name);
console.log(obj1["name"]);
// dic对象转化成JSON对象
var obj2={"name":"egon","age":18};
var str2 = JSON.stringify(obj2)
console.log(str2)
6.RegExp对象
// 1. 创建正则对象的方式1
// 参数1 正则表达式
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
// 注意：正则放到引号内，{}内的逗号后面不要加空格
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
reg1.test("egon_123") // true
// 2. 创建正则对象的方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号
reg2.test("egon_123") // true
// 3. String对象与正则结合的4个方法
var s1="hello world";
s1.match(/l/g) // 符合正则的内容["l", "l", "l"]
s1.search(/h/g) // 符合正则的内容的索引0
s1.split(/ /) // ["hello", "world"]
s1.replace(/l/g,'L') // "heLLo worLd"
// 4. 匹配模式g与i
var s2="name:Egon age:18"
s2.replace(/e/,"赢") // "nam赢:Egon age:18"
s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"
s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"
// 5. 注意1：
// 1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 4、当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 5、因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
var reg3 = /egon/g;
reg3.lastIndex
0
reg3.test("egon") // true，匹配成功
true
reg3.lastIndex // 匹配成功reg3.lasIndex=4
4
reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
false
reg3.lastIndex // 匹配失败，lastIndex归为0
0
reg3.test("egon") // 再次匹配成功
true
// 6. 注意2：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
7.流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 小案例
var d = new Date()
if (d.getDay() == 0){
alert('今天是星期天')
} else if (d.getDay() == 6){
alert('今天是星期六')
} else {
alert('老老实实工作吧')
}
var x = 0
switch (x) {
case 0:
console.log('星期天出去浪')
break
case 6:
console.log('星期六出去浪')
break
default:
console.log('老老实实工作')
break
}
// for循环
for (var i=0;i<=5;i++){
console.log(i)
}
// for循环遍历数组
arr = ['Maxs_hu', 'Mcoco', 'xiaoergu']
for (var i=0; i<arr.length; i++){
console.log(arr[i])
}
// while循环
var count = 0
while (count<5){
if (count == 5){
count += 1
console.log(count)
continue
}
console.log(count)
count++
}
</script>
</body>
</html>
8.函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f1(){
console.log('无参函数')
}
function f2(a, b){
console.log('有参函数', a+b)
}
function f3(){
// 只能返回一个值,如果想返回多个.必须在数组内
return [111, 222, 333]
}
var f = function (a, b){
console.log(a+b)
}
f(111, 333)
// 自执行函数
(function (a, b){
console.log(a+b)
})(1, 2)
// argument参数
function f4 (a, b){
console.log('argument', arguments.length, arguments[0])
}
f4(111, 222)
</script>
</body>
</html>
9.闭包函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = []
for (var i=0;i<5;i++){
var x
function outter(x){ // 将数据通过outter传入并储存封锁在函数局部内. local
function f(){
console.log(x);
}
arr.push(f)
return f
}
outter(i)
}
arr[0]()
arr[1]()
</script>
</body>
</html>
10.变量与函数提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 实例1: 变量提升
console.log(x); // 变量提升. 所以不会报错
var x = 11; // 先声明变量存在. 在做赋值变量
console.log(x);
// 实例二: 函数
var y = 111;
function f(){
console.log("--->", y); // undefined --> 先检索局部变量里面有没有y. 发现有就不会去看全局变量了
var y = 333;
console.log("===>", y); // 333
}
// 实例三: if语句
var z = 333;
if (1) {
console.log(z) // 这里if语句内也是全局的
var z = 444;
console.log(z)
}
console.log(z)
// 实例四: 函数提升
console.log(func)
func() // 函数提升
function func(){
console.log(111)
}
func()
</script>
</body>
</html>
11.let语法补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
l = []
for (let i=0;i<5;i++){ // 可以打到闭包函数的效果. 但是能不使用就不要使用
function f(){
console.log(i)
}
l.push(f)
}
l[0]()
l[1]()
l[2]()
l[3]()
l[4]()
</script>
</body>
</html>
12.BOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">我是div. 点我啊</div>
<script>
// window.location = "https://www.baidu.com"
// window.location.reload()
// window.history.back() // 现在浏览器已经高度整合了这些操作
// window.history.forward()
// window.history.go(0) // 0: 刷新 1: 前进 -1: 后退
// window中navigator对象: 包含浏览器相关属性
// navigator.appCodeName
// navigator.appName // web浏览器全称
// navigator.userAgent // 客户端绝大部分信息
// navigator.platform // 浏览器运行所在的操作系统
// 写一个点div标签的跳转操作: location
// document.getElementsByClassName('box')[0].onclick = function (){
// window.location.href = "https://www.baidu.com"
// }
// 浏览器弹窗操作
// alert(123)
// var res = confirm('what you name')
// var username = prompt('请输入用户名')
// var password = prompt('请输入密码')
// window.open('https://www.baidu.com', "_blank", 'width:500px,height:500px')
// 设置定时器
// window.setTimeout(function (){ // 只执行一次
// window.location.href = "https://www.baidu.com"
// window.location.reload()
// console.log(123) // 只会打印一次
// }, 3000)
// var count = 1
// window.setInterval(function (){ // 循环执行
// count += 1
// console.log(count)
// }, 5000)
// 清除定时器
var s2 = setInterval(function (){
alert(234);
}, 5000)
clearInterval(s2)
</script>
</body>
</html>
13.dom-js查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div name="xxxx"></div>
<div>
<span>what are you doing!!!</span>
<div id="btn">
1111
<p>1212</p>
2222
<p>3434</p>
</div>
<a href="https://www.baidu.com"></a>
</div>
<script>
var box = document.getElementsByClassName('box')
var btn = document.getElementById('btn') // 通过id去查找标签
var res = document.getElementsByTagName('div') // 通过TagName查找标签
var res1 = document.getElementsByName('xxxx') // name属性去查找标签
console.log(res.length)
console.log(res1)
var res2 = document.getElementById('btn').childNodes // 寻找所有的儿子节点. 包括文本在内
var res3 = document.getElementById('btn').children // 寻找所有的儿子节点. 不包括文本
var res4 = document.getElementById('btn').parentNode // 寻找父亲节点
var res5 = document.getElementById('btn').nextSibling // 寻找下一个兄弟节点. 包括text节点
var res6 = document.getElementById('btn').nextElementSibling // 寻找下一个兄弟节点. 不包括text节点
var res7 = document.getElementById('btn').previousElementSibling // 寻扎上一个兄弟节点. 不包括text节点
var res8 = document.getElementById('btn').firstElementChild // 寻找第一个儿子节点. 不包括text节点
var res9 = document.getElementById('btn').firstChild // 寻找第一个儿子节点. 包括text节点
var res10 = document.getElementById('btn').lastElementChild // 寻找最后一个儿子节点. 不包括text节点
var res11 = document.getElementById('btn').lastChild // 寻找最后一个儿子节点. 包括text节点
console.log(res10)
</script>
</body>
</html>
14.dom-创建 删除 替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
</div>
<script>
// 创建元素
var oDiv = document.createElement('div')
// console.log(oDiv)
oDiv.style.width = '50px'
oDiv.style.height = "50px";
oDiv.style.backgroundColor = 'red'
// 末尾添加元素
var box = document.getElementsByClassName('box')[0]
box.appendChild(oDiv)
// 插入子元素
// box.insertBefore(新节点, 某个节点)
var p3 = document.getElementsByTagName("p")[2]
// console.log(p3)
box.insertBefore(oDiv, p3)
// 删除子元素
// var p4 = document.getElementsByTagName('p')[3]
// box.removeChild(p4)
// 替换子元素
var p5 = document.getElementsByTagName('p')[3] // 寻找第四个p标签
console.log(p5)
box.replaceChild(oDiv, p5)
</script>
</body>
</html>
15.dom-修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box" name="123213123" style="background-color: pink">
<div class="box2"></div>
<p>333333</p>
</div>
<img src="http://www.xxx.com/1.png" alt="">
<p id="ppp" name="new attribute">4444444</p>
<!--<input type="text">-->
<script>
// 修改子元素
var box=document.getElementsByClassName("box")[0]
box.innerText="哈哈哈"
box.innerHTML="<p>1111</p>"
box.innerText="<p>哈哈哈哈啊</p>" // 会覆盖之前的标签
// 属性操作
var res=box.getAttribute("name")
var res=box.setAttribute("x","11111")
box.removeAttribute("class")
console.log(res)
box.setAttribute("style","background-color: red;width:100px")
// 样式操作
box.style.fontSize="50px"
box.style.backgroundColor="red"
// 默认属性操作
var img = document.getElementsByTagName('img')[0]
console.log( img.getAttribute("src"))
console.log(img.src)
var p=document.getElementById("ppp")
alert(p.innerText)
var inp = document.getElementsByTagName('input')[0]
alert(inp.getAttribute("value"))
alert(inp.value)
var p=document.getElementById("ppp")
alert(ppp.name)
</script>
</body>
</html>
16.dom-类元素操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
background-color: red;
}
.box3 {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>11111</div>
<hr>
<div>2222</div>
<hr>
<div class="box22222">3333</div>
<script>
// 设置类属性
var arr=document.getElementsByTagName('div')
for (var i=0;i<arr.length;i++){
arr[i].classList.add("box")
}
var oDiv=document.getElementsByClassName("box3")[0]
oDiv.classList.remove('box3')
var oDiv=document.getElementsByClassName("box3")[0]
alert(oDiv.classList.contains("box3"))
var oDiv=document.getElementsByTagName("div")[2]
oDiv.classList.toggle("box3") // 找不到box3的情况下会自动添加
</script>
</body>
</html>
17.模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body input {
/*设置成block可以居中显示*/
display: block;
margin: 0 auto;
margin-top: 100px;
background-color: pink;
/*position: absolute;*/
/*top: 100px;*/
/*left: 50%;*/
}
.box {
background-color: rgba(21,0,10,0.35);
/*float: left;*/
/*width: 100%;*/
/*height: 100%;*/
/*绝对定位*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.alert {
width: 300px;
height: 200px;
background: white;
/*margin: 0 auto;*/
/*margin-top: 100px;*/
/*这个好*/
position: absolute;
top: 100px;
left: 50%;
margin-left: -150px;
text-align: center;
line-height: 200px;
}
.x {
width: 20px;
height: 20px;
background-color: red;
text-align: center;
line-height: 20px;
float: right;
}
</style>
</head>
<body>
<input type="button" value="点击模态框" id="btn">
<script>
var btn = document.getElementById('btn')
btn.onclick = function (){
// alert(123); 测试
var oDiv = document.createElement('div')
oDiv.classList.add('box') // 给类绑定属性
var body = document.getElementsByTagName('body')[0]
// body.replaceChild(oDiv, btn); // 替换
body.appendChild(oDiv)
// 添加一个提示窗口
var box1 = document.createElement('div')
var box2 = document.createElement('div')
box1.innerText = '这是一个模态框'
box2.innerText = "x"
box1.classList.add('alert') // 给类绑定属性. 方便添加样式
box2.classList.add('x')
oDiv.appendChild(box1)
box1.appendChild(box2)
// 给x点击事件绑定回退操作
box2.onclick = function (){
body.removeChild(oDiv) // 删除掉第一个窗口即可
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body>input {
/*设置成block可以居中显示*/
display: block;
margin: 0 auto;
margin-top: 100px;
background-color: pink;
/*position: absolute;*/
/*top: 100px;*/
/*left: 50%;*/
}
.box {
background-color: rgba(21,0,10,0.35);
/*float: left;*/
/*width: 100%;*/
/*height: 100%;*/
/*绝对定位*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.alert {
width: 300px;
height: 200px;
background: white;
/*margin: 0 auto;*/
/*margin-top: 100px;*/
/*这个好*/
position: absolute;
top: 100px;
left: 50%;
margin-left: -150px;
/*text-align: center;*/
/*line-height: 200px;*/
}
.x {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 0;
right: 0;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<input type="button" value="点击模态框" id="btn">
<div class="box">
<div class="alert">
<p>
用户名: <input type="text" name="username">
</p>
<p>
密码: <input type="password" name="password">
</p>
<p>
<input type="button" value="submit">
</p>
<div class="x">x</div>
</div>
</div>
<script>
// 绑定点击事件: 通过将display: block实现
var btn = document.getElementById('btn')
var box1 = document.getElementsByClassName('box')[0] // 一定记得加上索引
btn.onclick = function (){
box1.style.display = 'block'
}
// 绑定回退事件
var box3 = document.getElementsByClassName('x')[0]
box3.onclick = function (){
box1.style.display = "none";
// 将输入框清空
document.getElementsByName('username')[0].value = ''
document.getElementsByName('password')[0].value = ''
}
</script>
</body>
</html>
18.点击有惊喜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 25px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
color: white;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜
</div>
<script>
var oDiv = document.getElementsByClassName('box')[0];
var count = 0;
oDiv.onclick = function (){
count++
if (count == 1){
this.style.backgroundColor = 'green'
this.innerText = '继续点击'
}else if (count == 2){
this.style.backgroundColor = 'yellow'
this.innerText = '精彩即将揭晓'
}else if (count == 3){
this.style.backgroundColor = 'pink'
this.innerText = '骗你的傻逼'
}else {
this.style.backgroundColor = 'red'
this.innerText = '点击有惊喜'
count = 0
}
}
</script>
</body>
</html>
19.简易评论框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100%;
background-color: pink;
text-align: center;
font-size: 20px;
word-break: break-all;
}
ul>li{
list-style: none;
text-align: left;
/*height: 50px;*/
width: 80%;
background-color: #0e94ea;
border: 1px dotted black;
margin: 0 auto;
margin-bottom: 10px;
margin-left: 71px;
border-radius: 10px;
}
.font {
font-size: 15px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
}
</style>
</head>
<body>
<div class="box1">
评论区
<ul></ul>
</div>
<hr>
<div class="box2">
<!-- onblur: 失去焦点-->
<textarea cols="30" rows="10" id="content"
onfocus="if(value=='留下你的脚印'){value=''}"
onblur="if (value==''){value=''}">留下你的脚印</textarea>
</div>
<input type="button" value="submit" id="btn">
<input type="button" value="count" id="cal">
<script>
var btn = document.getElementById('btn')
btn.onclick = function (){
var li = document.createElement('li') // 每一个楼层
var text = document.getElementById("content") // 评论内容
var val = text.value
if (val.length != 0){
var ul = document.getElementsByTagName('ul')[0]
var p1 = document.createElement('p')
var p2 = document.createElement('p')
p2.classList.add("font")
// 设置时间和评论数量
var count = document.getElementsByTagName('li').length + 1
var ctime = new Date().toLocaleString()
// 处理楼层内容
p1.innerHTML = '#' + '<span class="num">'+ count + "</span>" + '楼' + ' '+ ctime + ' ' + '<span class="del">删除</span>'
// 处理评论内容
p2.innerHTML = val
// 添加到列表li中
li.appendChild(p1)
li.appendChild(p2)
// 处理不存在文字
ul.appendChild(li)
text.value = ""
var delButton = document.getElementsByClassName('del')
var currentButton = delButton[delButton.length-1] // 获取到当前按钮
// 每一个评论绑定点击的事件
currentButton.onclick = function(){
// alert(123123)
// 把后面的楼层都减1
var allNum = document.getElementsByClassName('num') // 拿到所有的楼层信息列表
var currentNum = this.previousElementSibling
// 核心操作: 将所有的num信息循环并找到当前点击的索引. 根据索引
for (var i=0;i<allNum.length;i++){
if (currentNum === allNum[i]){
for(var j=i+1;j<allNum.length;j++){
allNum[j].innerText = parseInt(allNum[j].innerText) -1; // 将num标签中的数字-1
}
}
}
ul.removeChild(this.parentNode.parentNode) // 删除li标签
}
}
}
</script>
</body>
</html>
20.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
border: 1px solid red;
margin: auto;
}
ul>li {
list-style: none;
float: left;
width: 198px;
height: 80px;
background-color: gray;
text-align: center;
font-size: 30px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
line-height: 80px;
border: 1px solid white;
}
/*添加外墙. 防止父级塌陷*/
ul:after {
display: table;
content: "";
clear: both;
}
.content {
width: 600px;
height: 320px;
background-color: pink;
display: none;
text-align: center;
line-height: 320px;
font-size: 50px;
}
div.active {
display: block;
}
li.active {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">首页</li>
<li>双色球</li>
<li>大乐透</li>
</ul>
<div class="content active">这里是首页</div>
<div class="content">这里是双色球</div>
<div class="content">这里是大乐透</div>
</div>
<script>
var arr = document.getElementsByTagName('li')
for (var i=0;i<arr.length;i++){
// 绑定点击事件并添加样式
arr[i].n = i
arr[i].onclick = function(){
// 删除所有的样式
for (var j=0;j<arr.length;j++){
arr[j].classList.remove('active')
document.getElementsByClassName('content')[j].classList.remove('active')
}
this.classList.add('active')
document.getElementsByClassName('content')[this.n].classList.add('active')
}
}
</script>
</body>
</html>