JavaScript补充学习

Renascence.409

于 2024-08-21 14:50:46 发布

阅读量523

点赞数 10

分类专栏：前端学习文章标签：学习前端 javascript es6

本文链接：https://blog.csdn.net/qq_63898506/article/details/141361355

版权

前端学习专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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 (let checkbox of checkboxs) {
            checkbox.checked=true;
        }
    </script>

5、JS事件-事件介绍和绑定

事件：HTML事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移到元素上、按下键盘按键等。
事件监听：JavaScript可以在事件被侦测到时执行代码。
事件绑定
- 方式一：通过HTML标签中的事件属性进行绑定
- 方式二：通过DOM元素属性绑定

    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
    <script>
        // 方式一：通过HTML标签中的事件属性进行绑定
        function on(){
            alert("事件1被点击了");
        }

        // 方式二：通过DOM元素属性绑定
        document.querySelector("#btn2").onclick=function(){
            alert("事件2被点击了");
        }
    </script>

6、JS事件-常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

事件和DOM操作结合使用的步骤：
1. 给标签绑定事件（有两种方式）
2. 在事件函数中获取元素（标签）对象
3. 通过元素（标签）对象操作内容体、属性、样式
JS事件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS学习</title>
</head>
<body>
    <img src="../resource/image/dhimg2.png" alt="" id="img">
    <br>
    <input type="button" value="点亮"  onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br>
    <input type="text" value="ITCAST" id="txt" onfocus="fc()" onblur="br()">
    <br>
    <input type="checkbox" name="box" id="box">电影
    <input type="checkbox" name="box" id="box">旅游
    <input type="checkbox" name="box" id="box">游戏
    <br>
    <input type="button" value="全选" onclick="on1()">
    <input type="button" value="反选" onclick="on2()">
    <script>
        function on(){
            let i = document.querySelector("#img");
            i.src="../resource/image/dhimg3.png";
        }
        function off(){
            let i = document.querySelector("#img");
            i.src="../resource/image/dhimg2.png";
        }
        function fc(){
            let i = document.querySelector("#txt");
            i.value=i.value.toLowerCase();
        }
        function br(){
            let i = document.querySelector("#txt");
            i.value=i.value.toUpperCase();
        }
        function on1(){
            let i = document.querySelectorAll("#box");
            for (let s of i) {
                s.checked=true;
            }
        }
        function on2(){
            let i = document.querySelectorAll("#box");
            for (let s of i) {
                s.checked=false;
            }
        }
    </script>
</body>
</html>