JS 和 ES6 补充学习-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63898506/article/details/141361355

1、JS对象-自定义对象

let 对象名 = {
    属性名1：属性值1，
    属性名2：属性值2，
    属性名3：属性值3，
    函数名称：function（形参列表）{}，
    函数名称（形参列表）{}
}；

2、JS对象-JSON对象

JSON概念：本质是通过JavaScript对象标记法书写的文本。

使用场景：现多用于作为数据载体，在网络中进行数据传输。

JSON定义

//两种定义
let 变量名 = {"key":value, "key":value, "key":value,...}

let json = [value,value,value];

value的数据类型为：数字、字符串、逻辑值、数组、对象、null。

js对象转为JSON字符串

let str = JSON.stringify(json);

JSON字符串转为js对象

let json = JSON.parse(str);

3、JS对象-BOM对象

概念：BOM浏览器对象模型，指的是JS将浏览器的各个组成部分封装为对象，使用对象可以操作浏览器。
组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window对象：浏览器窗口对象，可以直接使用，使用的时候也可以省略不写。

alert(msg)：显式带有一段消息和一个确认按钮的警告框。

confirm(msg) - 对话框 -- 确认：true，取消：false

setInterval(function,毫秒值) - 定时器 --按照指定的周期（以毫秒计）循环调用函数

setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数

location对象：地址栏对象，获取或者设置地址栏地址，设置地址栏地址可以实现页面跳转效果。

        // confirm(msg) - 对话框 -- 确认：true，取消：false
        let flag=confirm("您确定要删除吗？");
        if(flag){
            alert("开始删除数据...");
        }

        //setInterval(function,毫秒值) - 定时器 --按照指定的周期（以毫秒计）循环调用函数
        setInterval(function(){
            console.log("循环定时器执行");
        },2000);

        //setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
        setTimeout(function(){
            console.log("一次定时器执行");
        },2000);

        //获取地址栏地址
        let href=location.href;
        location.href="http://www.baidu.com"//效果：会页面跳转
        console.log(href);

4、JS对象-DOM对象

1、概念

DOM是文档对象模型，将HTML的各个组成部分封装为对应的对象：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

改变HTML元素的内容
改变HTML元素的属性
改变HTML元素的样式（CSS）
对HTML DOM事件作出反应

2、DOM操作-获取元素对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
获取：使用Document对象的方法来获取（ES5提供的方法）
- document.getElementById：根据id属性值获取，返回一个Element对象
- document.getElementsByTagName：根据标签名获取，返回Element对象数组
- document.getElementsByName：根据name属性值获取，返回Element对象数组
- document.getElementsByClassName：根据class属性值获取，返回Element对象数组
获取：使用Document对象的方法来获取（ES6提供的方法）
- document.querySelector（"css选择器"）：根据css选择器获取一个Element对象
- document.querySelectorAll（"css选择器"）：根据css选择器获取一个Element对象数组

3、DOM操作-使用元素对象

Element：元素对象的使用（查阅文档）
常用操作：
- 访问内容体：元素对象.innerHTML h2.innerHTML="scc";
- 访问输入框内容：元素对象.value console.log(usernameInput.value);
- 访问属性：元素对象.属性名 img.src="img/on.gif";
- 访问样式：元素对象.style.样式属性名 h2.style.color="red";
步骤：
1. 获取元素对象
2. 操作内容、属性、样式

    <div class="cls">教育</div>
    <div class="cls">程序员</div>
    <input type="checkbox" name="hobby" class="hobby">电影
    <input type="checkbox" name="hobby" class="hobby">旅游
    <input type="checkbox" name="hobby" class="hobby">游戏
    <script>
        // 将所有div标签的内容后面加上：very good(红色字体)
        let divs=document.querySelectorAll(".cls");
        for (let div of divs) {
            div.innerHTML+="<font color='red'>very good</font>";
        }

        // 使所有复选框呈现选中状态
        let checkboxs=document.querySelectorAll(".hobby");
        for