1、JS对象 - JSON
1.1、JS对象如下所示：
//定义对象
let Student = {
name:"张三",
age: 21,
show:function(){
document.write(this.name + this.age);
}
};
//调用对象
Student.show();
1.2、JSON是通过JavaScript对象标记法书写的文本。由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
JSON的基础语法：
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试一</title>
<script>
//定义一个JSON对象
let Student = '{"name":"酋长","age":21,"adress":["成都","宜宾","泸州"]}';
//将JSON字符串转换为JSON对象
let student = JSON.parse(Student);
//然后调用里面的属性
document.write(student.name);
</script>
</head>
<body>
</body>
</html>
2、BOM对象
2.1、window对象
常用方法如下所示：
//在浏览器弹出对话框，如果点击确定，那么就会返回true，否则返回false
let flag = window.confirm("您确认取消吗？");
document.write(flag);
//定义函数
let show = function (){
document.write("哈哈，我是酋长呀");
}
//周期性的执行某个函数
window.setInterval(show,2000);
//指定延迟时间然后执行一次
window.setTimeout(show,1000);
2.2、Location
//获取地址栏的URL
let name = window.location.href;
document.write(name);
//设置地址栏的URL
window.location.href = "https://www.baidu.com";
document.write("<\br>")
document.write(window.location.href);
4、DOM对象
4.1、DOM标准
4.2、获取标签对象
测试代码如下所示：
//通过ID获取
let elementById = document.getElementById('cl');
window.alert(elementById);
//通过标签获取，返回的是一个数组
let elementsByTagName = document.getElementsByTagName('div');
//通过name属性获取，返回的也是一个数组
let elementsByName = document.getElementsByName('hobby');
//通过Class属性获取
let elementsByClassName = document.getElementsByClassName('cls');
通过DOM操作修改数据，如下所示：
//通过class来获取对象
let elementsByClassName = document.getElementsByClassName('cls');
//获取第一个元素对象
let element = elementsByClassName[0];
//通过对象调用方法来修改HTML中的内容，是可以识别HTML标签的
element.innerHTML = "酋长大人，你好呀!";
3、事件监听
3.1、事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试三</title>
</head>
<body>
<input type="button" onclick="show1()" id="btn1" value="事件绑定一">
<input type="button" id="btn2" value="事件绑定二">
</body>
<script>
//使用第一种事件绑定的方式
let show1 = function () {
alert("事件绑定一!")
}
function show2() {
alert("事件绑定二!");
}
//使用第二种事件绑定的方式
document.getElementById('btn2').onclick = function () {
alert("事件绑定二!");
}
</script>
</html>
3.2、常见事件
