跟着字节大佬学web前端笔记【JS篇】（四）

最新推荐文章于 2024-10-05 07:39:03 发布
最新推荐文章于 2024-10-05 07:39:03 发布
阅读量1.6k 收藏 37
点赞数 40
分类专栏： 跟着字节大佬学web前端笔记 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61068913/article/details/139330919
版权

一、概念

JavaScript 是一种嵌入式（embedded）语言。操控浏览器的能力、广泛的使用领域、易学性。

二、JS语法

1.js语句

以分号结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js语法</title>
</head>
<body>
    <script>
        var num =  10;   //声明变量num
        var username = “赵姐”;   //声明变量username
        console.log(num,username); //在控制台打印输出
    </script>
</body>
</html>

2.标识符（identifier）

指的是用来识别各种值的合法名称。最常见的 标识符就是变量名。

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字 不能开头
js保留关键字不能作为标识符：JavaScript 保留关键字 | 菜鸟教程

3.js引入方式

嵌入到HTML文件中、引入本地独立js文件、引入网络来源文件 
...
<body>
    <script src="xxx.js"></script> //引入js文件
    <script src="http://xxxxx"></script> //引入网络来源文件
</body>
...

4.js注释与常见输出方式

（1）注释：单行（//）、多行（/* 注释内容*/）   快捷键：ctrl+/

（2）输出方式：弹出窗、页面输出、控制台输出

...
<script>
    alert("弹出框中的内容");
    document.write("页面显示的内容");
    console.log("控制台输出的内容");
</script>
...

5.js的数据类型

（详细见：JavaScript 数据类型 | 菜鸟教程）

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

null一般代表对象为“没有”

undefined一般代表数值为“没有”

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

...
<script>
//复合数据类型，object
var user = {
    age:18,
    name:"xiaohuihui",
    marriage:false,
</script>
...

6.typeof运算符

判断数据类型

typeof "xiaoweiwei"                         // 返回 string
typeof 3.14                                      // 返回 number
typeof false                                     // 返回 boolean
typeof [1,2,3,4]                                // 返回 object
typeof {name:'xiaoweiwei', age:18} // 返回 object

7.运算符

（详细见：JavaScript 运算符 | 菜鸟教程、JavaScript 比较和逻辑运算符 | 菜鸟教程）

注意： == 等于      ===绝对等于（值和类型均相等）

8.随意笔记

switch(条件表达式){

        case"结果1":

        ....

                break;

        case"结果2":

                 break;

        default:

        ...

}

三元符：条件? 真值:假值

break语句和continue语句

  •         break语句用于跳出代码块或循环
  •         continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

 9.字符串常用方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>字符串常用方法</title>
</head>

<body>
    <script>
        // 1.charAt()获取指定位置的字符
        var str = "I love web";
        length = str.length;          //获取字符串长度
        str1 = str.charAt(0);         //获取指定位置的字符，参数是从 0 开始编号的
        str2 = str.charAt(11);        //如果参数为负数，或大于等于字符串的长度， charAt 返回空字符串
        document.write("length = ", length, "<br>");   //return 10
        document.write("str1 = ", str1, "<br>");       //return I
        document.write("str2 = ", str2, "<br>");       //return ""

        // 2.charCodeAt()获取指定位置的字符的 Unicode 编码
        str3 = str.charCodeAt(0)               //获取指定位置的字符的 Unicode 编码，参数是从 0 开始编号的 
        document.write("str3 = ", str3, "<br>"); // return 73

        // 3.concat()链接字符串
        var s1 = 'xiaohuihui';
        var s2 = ' is so cute';
        s3 = s1.concat(s2);                 //返回一个新字符串，不改变原字符串
        document.write("s3 = ", s3, "<br>");  //return xiaohuihui is so cute
        document.write("s1 = ", s1, "<br>");  //return xiaohuihui

        // 4.substring()截取字符串
        var s4 = 'I love web';
        s5 = s4.substring(0, 6);      //参数是开始位置和结束位置，不包含结束位置，返回一个新的字符串，不改变原字符串
        s6 = s4.substring(6);        //如果省略第二个参数，则表示子字符串一直到原字符串的结束
        s7 = s4.substring(10, 6);     //如果第一个参数大于第二个参数，会自动更换两个参数的位置
        s8 = s4.substring(-1);       //如果参数是负数，会自动将负数转为0
        document.write("s5 = ", s5, "<br>");   //return I love
        document.write("s6 = ", s6, "<br>");   //return web
        document.write("s7 = ", s7, "<br>");   //return web
        document.write("s8 = ", s8, "<br>");   //return I love web

        //5.substr()截取字符串
        var s9 = 'I love web';
        s10 = s9.substr(0, 6);      //参数是开始位置和长度，返回一个新的字符串，不改变原字符串
        s11 = s9.substr(6);        //如果省略第二个参数，则表示子字符串一直到原字符串的结束
        s12 = s9.substr(10, -6);     //如果第一个参数大于第二个参数，会自动转为0
        s13 = s9.substr(-6);       //如果第一个参数是负数，表示倒数计算的字符位置。
        document.write("s10 = ", s10, "<br>");   //return I love
        document.write("s11 = ", s11, "<br>");   //return web
        document.write("s12 = ", s12, "<br>");   //return ""
        document.write("s13 = ", s13, "<br>");   //return ve web

        //6.indexof()匹配字符串
        var s14 = 'I love web';
        s15 = s14.indexOf('love');      //返回字符串中匹配到的第一个字符的位置，不区分大小写，返回-1表示没有匹配到
        s16 = s14.indexOf('love', 3);    //从指定位置开始匹配
        s17 = s14.indexOf('love', -1);   //如果参数是负数，则从字符串的末尾开始匹配
        s18 = s14.indexOf('love', 10);   //如果参数大于字符串的长度，则从字符串的末尾开始匹配
        document.write("s15 = ", s15, "<br>");  //return 2
        document.write("s16 = ", s16, "<br>");  //return -1
        document.write("s17 = ", s17, "<br>");  //return 2
        document.write("s18 = ", s18, "<br>");  //return -1

        //7.trim()去除字符串两端的空格,该方法去除的不仅是空格，还包括制表符（\t 、 \v）、换行符（\n）和回车符（\r）
        var s19 = '   I love web   ';
        s20 = s19.trim();
        s21 = s19.trimEnd();
        s22 = s19.trimStart();
        document.write("s20 = ", s20, "<br>");  //return I love web
        document.write("s21 = ", s21, "<br>");  //return   I love web
        document.write("s22 = ", s22, "<br>");  //return I love web  

        //8.split()将字符串分割成数组
        var s23 = 'I|love|web';
        s24 = s23.split('|');
        s25 = s23.split('');
        s26 = s23.split();
        s27 = s23.split('|', 2);
        document.write("s24 = ", s24, "<br>");   //return ["I", "love", "web"]
        document.write("s25 = ", s25, "<br>");   //return ["I", "l", "o", "v", "e", "w", "b", "e"]
        document.write("s26 = ", s26, "<br>");   //return ["I|love|web"]
        document.write("s27 = ", s27, "<br>");   //return ["I", "love"]

        //9.99九九乘法表
        for (var i = 1; i <= 9; i++) {
            document.write("<br>");
            for (var j = 1; j <= i; j++) {
                sum = i * j;
                document.write(j,"*", i, "=", sum, " ");
                }
        }
    </script>
</body>

</html>

​

 10.数组（array）常用方法

是按次序排列的一组值。每个值的位置都有编号（从 0开始），整个数组用方括号表示。

（1）数组的遍历可以考虑使用for循环、while循环或 for...in遍历数组。数组越界输出undefined

var a = ["苹果","香蕉","梨","荔枝","草莓"];

        for (var i in a) {

        console.log(a[i]);

 }

console.log(Array.isArray(a));  //判断是否为数组，返回值有true,false

（2）数组静态方法Array.isArray()：该方法返回一个布尔值，表示参数是否为数组。它可以弥补 typeof 运算符的不足。

（3）数组方法push()/pop()

  1. push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
  2. pop 方法用于删除数组的最后一个元素，并返回该元素。
  3. 注意，这两种方法会改变原数组。

（4）数组方法shift()/unshift()

  1. shift 方法用于删除数组的第一个元素，并返回该元素。
  2. unshift 方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
  3. 注意，这两种方法会改变原数组。

（5）数组方法join()：以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。如果数组成员是undefined或null或空位，会被转成空字符串。数组的join配合字符串的split可以实现数组与字符串的互换。

（6）数组方法concat():用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。除了数组作为参数， concat 也接受其他类型的值作为参数，添加到目标数组尾部。应用场景：上拉加载，合并数据。

（7）reverse()方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

（8）indexOf()方法返回给定元素在数组中第一次出现的位置，如果没有出 现则返回 -1。接受第二个参数，表示搜索的开始位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>

<body>
    <script>
        var a = ["苹果","香蕉","梨","荔枝","草莓"];
        // 1.数组的遍历
        for (var i in a) {
            console.log("遍历 " + i + a[i]);
        }

        //2.Array.isArray()数组静态方法,判断是否为数组,返回值有true,false 
        console.log("Array.isArray:",Array.isArray(a)); //return true

        //3.pop()在数组末尾删除元素
        console.log("pop:" , a.pop())  //return "草莓"
        console.log("pop()在数组末尾删除元素", a);

        //4.push()在数组末尾添加元素
        console.log("push:" + a.push("西瓜")) //return 5
        console.log("push()在数组末尾添加元素", a);
  
        var b = ["苹果","香蕉","梨","荔枝","草莓"];
        //5.shift()在数组开头删除元素              
        console.log("shift:",b.shift()); //return "苹果"
        console.log("shift()在数组开头删除元素", b);


        //6.unshift()在数组开头添加元素
        console.log("unshift:",b.unshift("葡萄")); //return 5
        console.log("unshift()在数组开头添加元素", b);

        //7.join()将数组转换为字符串
        var c = ["Hello","world","!"];
        s1 = c.join(" ")
        console.log("join()将数组转换为字符串",s1);  //return Hello world !
        console.log(s1.split(" "));  //return ["Hello", "world", "!"]

        //8.concat()连接数组
        var d = ["Hello","world","!"];
        var e = ["你好","世界","!"];
        var f = d.concat(e);
        console.log("concat()连接数组",f);  //return ["Hello", "world", "!", "你好", "世界", "!"]

        //9.split()将字符串转换为数组,reverse()数组反转,join()数组转换为字符串
        var g = "Hello world !";
        var h = g.split(" ").reverse().join(" ");
        console.log("split()将字符串转换为数组,reverse()数组反转,join()数组转换为字符串",h);  //return ! world Hello

        //10.indexOf()查找数组元素,返回值有索引值,没有返回-1
        var i = ["Hello","world","!"];
        console.log("indexOf()查找数组元素",i.indexOf("world"));  //return 1
        console.log("indexOf()查找数组元素",i.indexOf("你好"));   //return -1
        console.log("indexOf()查找数组元素",i.indexOf("!",1));   //return 2

    </script>
</body>
</html>

三、函数

函数的声明：

function 函数名（参数1,.....）｛

        函数体

｝

 1.对象（object）

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>对象</title>
</head>

<body>
<script>
    var obj = {
        name: "小明",
        age: 18,
        sex: "女",
        say: function () {
            console.log("我叫" + this.name + "今年" + this.age + "岁了");
        },
        container:{
            name:"小红",
            age:20
        }
    }
    obj.say();
    console.log(obj.container.name);
</script>
</body>
</html>

2.Math对象

  • Math.abs()方法返回参数值的绝对值
  • Math.max()方法返回参数之中最大值， Math.min()返回最小值。如果参数为空,Math.min 返回 Infinity , Math.max 返回 -Infinity
  • Math.floor()方法返回小于参数值的最大整数；Math.ceil()方法返回大于参数值的最小整数。
  • Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

 3.Data对象

Date对象是 JavaScript 原生的时间库。它以 1970 年 1 月 1 日 00:00:00作为时间的零点，可以表示的时间范围是前后各1 亿天（单位为毫秒）。
Date.now方法返回当前时间距离时间零点（ 1970 年 1 月 1 日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以 1000。
实例方法 get 类
getTime() ：返回实例距离 1970 年 1 月 1 日 00:00:00 的毫秒数
getDate() ：返回实例对象对应每个月的几号（从 1 开始）
getDay() ：返回星期几，星期日为 0 ，星期一为 1 ，以此类推
getYear() ：返回距离 1900 的年数
getFullYear() ：返回四位的年份
getMonth() ：返回月份（0表示 1 月， 11 表示 12 月）
getHours() ：返回小时（ 0-23 ）
getMilliseconds() ：返回毫秒（ 0-999 ）
getMinutes() ：返回分钟（ 0-59 ）
getSeconds() ：返回秒（ 0-59 ） 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Date</title>
    <style>
        body {
            text-align: center;
            font-size: 70px;
            color: red;
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
<script>
    function leftDays(){
        var now = new Date();
        var end = new Date(now.getFullYear(),11,31,23,59,59,999);
        var msPerDay = 24*60*60*1000;
        var result =  Math.floor((end.getTime()-now.getTime())/msPerDay);
        document.write("距离元旦剩余天数：",result);
    }
    leftDays();
</script>
</body>
</html>

四、DOM概述

DOM 是 JavaScript 操作网页的接口，全称为 “ 文档对象模型 ” （Document Object Model ）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）

1.节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。

节点的类型：

  1. Document：整个文档树的顶层节点
  2. DocumentType：doctype标签
  3. Element ：网页的各种 HTML 标签
  4. Attribute：网页元素的属性（比如 class="right" ）
  5. Text：标签之间或标签包含的文本
  6. Comment：注释
  7. DocumentFragment：文档的片段
Node.nodeType 属性
不同节点的 nodeType 属性值和对应的常量如下
  • 文档节点（document）：9，对应常量 Node.DOCUMENT_NODE
  • 元素节点（element）：1，对应常量Node.ELEMENT_NODE
  • 属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
  • 文本节点（text）：3，对应常量Node.TEXT_NODE
  • 文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_

2.document对象_方法/获取元素

  • document.getElementsByTagName():搜索目标标签名，返回标签中的内容
  • document.getElementsByClassName():搜索目标标签所带的类名，返回标签中的内容
  • document.getElementsByName():搜索name,返回对象
  • document.getElementById():搜索目标ID，返回标签中的内容
  • document.querySelector():接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。
  • document.querySelectorAll():与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点。

3.document对象_方法/创建元素

  • document.createElement():添加标签节点，并返回该节点。
  • document.createTextNode():添加文本节点，并返回该节点。
  • document.createAttribute():添加属性节点，并返回该节点。

 4.Element对象_属性

  • ××.id:返回指定元素的id属性，该属性可读写。
  • ××.className:读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割。
  • ××.classList:
    • ××.classList.add():增加一个class。
    • ××.classList.remove():移除一个class。
    • ××.classList.contains():检查当前元素是否包含某个class。
    • ××.classList.toggle():将某个class移入或移出当前元素
  • ××.innerHTML:修改内容
  • ××.innerText:修改内容
    • innerHTML和innerText的区别：
      •  innerHTML可以识别标签（识别http，跳转）
      • innerText会把标签识别成一个字符串（识别字符串，返回字符串）

 5.Element获取元素位置

属性描述
clientHeight
获取元素高度包括 padding 部分，但是不包括 border 、 margin
clientWidth
获取元素宽度包括 padding 部分，但是不包括 border 、 margin
scrollHeight
元素总高度，它包括 padding ，但是不包括 border 、 margin包括溢出的不可见内容
scrollWidth
元素总宽度，它包括 padding ，但是不包括 border 、 margin包括溢出的不可见内容
scrollLeft
元素的水平滚动条向右滚动的像素数量
scrollTop
元素的垂直滚动条向下滚动的像素数量
offsetHeight
元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth
元素的 CSS 水平宽度（单位像素），包括元素本身的高度、 padding 和 border
offsetLeft
到定位父级左边界的间距
offsetTop
到定位父级上边界的间距

HTML DOM 教程：HTML DOM 教程 | 菜鸟教程

五、CSS操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS操作</title>
</head>

<body>
    <div class="box" id="box"></div>
    <script>
        var box = document.getElementById("box")
        // 1.HTML元素的style属性
        // box.setAttribute("style", "width:200px;height:200px;background:darksalmon;")

        //2.样式表
        // box.style.width = "300px"
        // box.style.height = "300px"
        // box.style.backgroundColor = "darksalmon"

        //3.style.cssText
        // box.style.cssText = "width:400px;height:400px;background:darksalmon;"
    </script>
</body>

</html>

六、事件处理程序

1.HTML事件处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML事件处理</title>
</head>

<body>
    <button onclick="htmlclick()">按钮</button>
    <script>
        // HTML事件：缺点：HTML和JS没有分开
        function htmlclick(){
            console.log("点击了按钮")
        }
    </script>
</body>

</html>

2.DOM0级事件处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM0级事件处理</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        // DOM0事件：优点：HTML和JS是分离的  缺点：无法同时添加多个事件
        var btn = document.getElementById("btn")

        // 被覆盖了
        btn.onclick = function () {
            console.log("点击了1");
        }

        btn.onclick = function () {
            console.log("点击了2");
        }
    </script>
</body>

</html>

3.DOM2级事件处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM2级事件处理</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        // DOM2事件：优点：事件不会被覆盖 缺点：写起来麻烦
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function(){
            console.log("点击了1");
        })
        btn.addEventListener("click",function(){
            console.log("点击了2");
        })
    </script>
</body>

</html>

七、鼠标事件

  • onclick：按下鼠标时触发
  • ondblclick：在同一个元素上双击鼠标时触发
  • onmousedown：按下鼠标键时触发
  • onmouseup：释放按下的鼠标键时触发
  • onmousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
  • onmouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
  • onmouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
  • onmouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件  
  • onmouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
  • onwheel：滚动鼠标的滚轮时触发
这些方法在使用的时候，除了 DOM2 级事件，都需要添加前缀 on

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        .btn5{
            width: 100px;
            height: 100px;
            background-color:aquamarine;
        }
        .fatherstyle{
            width: 400px;
            height:400px;
            background-color:burlywood;
        }
        .sonstyle{
            width: 200px;
            height:200px;
            background-color:blueviolet;
        }
    </style>
</head>

<body>
    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>
    <button id="btn5" class="btn5">鼠标移动</button>
    <div id="father1" class="fatherstyle">
        <div id="son1" class="sonstyle">
            <p>鼠标进入mouseenter和离开mouseleave</p>
        </div>
    </div>

    <div id="father2" class="fatherstyle">
        <div id="son2" class="sonstyle">
            <p>鼠标进入mouseover</p>
        </div>
    </div>

    <div id="father3" class="fatherstyle">
        <div id="son3" class="sonstyle">
            <p>鼠标离开mouseout</p>
        </div>
    </div>

    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var btn5 = document.getElementById("btn5");

        var father1 = document.getElementById("father1");
        var father2 = document.getElementById("father2");
        var father3 = document.getElementById("father3");

        btn1.onclick = function(){
            console.log("单击事件");
        }
        btn2.ondblclick = function(){
            console.log("双击事件");
        }
        btn3.onmousedown = function(){
            console.log("鼠标按下");
        }
        btn4.onmouseup = function(){
            console.log("鼠标抬起");
        }
        btn5.onmousemove = function(){
            console.log("鼠标移动了");
        }

        father1.onmouseenter = function(){
            console.log("鼠标进入了1");
        }
        father1.onmouseleave = function(){
            console.log("鼠标离开了1");
        }

        father2.onmouseover = function(){
            console.log("鼠标进入了2");
        }
        father3.onmouseout = function(){
            console.log("鼠标离开了3");
        }
    </script>
</body>

</html>

八、Event事件对象

1.Event对象属性

  • Event.Target：返回事件当前所在节点
  • Event.type：返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

 2.Event对象方法

  • Event.preventDefault()：取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了
  • Event.stopPropagation()：阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .root{
            width: 200px;
            height: 200px;
            background-color: #999;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color:red;
        }

    </style>
</head>
<body>

    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>

    <script>
        
        var root = document.getElementById("root")
        var box = document.getElementById("box")

        root.onclick = function(){
            console.log("root");
        }

        box.onclick = function(e){
            e.stopPropagation(); //如果注释掉这一行，点击box会打印root和box
            console.log("box");
        }


    </script>
    
</body>
</html>

九、键盘事件

  • keydown：按下键盘时触发。
  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件 
  • keyup：松开键盘时触发该事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="username">
    <input type="text" id="password">

    <script>

        var username = document.getElementById("username");
        username.onkeydown = function(e){
            console.log("按下了");
        }

        username.onkeyup = function(e){
            console.log(e.target.value); // value属性就是输入框的数据
        }

        //  Ctrl、Alt、Shift、Meta :数字和字母是有值的，其他的无值
        username.onkeypress = function(){
            console.log("keypress");
        }


        var password = document.getElementById("password")
        password.onkeyup = function(e){
            //keyCode:代表每个按键的唯一标识
            console.log(e.keyCode);
            if(e.keyCode === 13){
                console.log("开始搜索");
            }
        }

    </script>
    
</body>
</html>

十、表单事件

  1. oninput事件：实时监听输入的数据
  2. onselect事件：选中的文本
  3. onChange事件：失去焦点和回车才会触发
  4. 这两个事件发生在表单对象 <form> 上，而不是发生在表单的成员上。
    1. onreset事件：清空表单
    2. onsubmit事件：提交表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="username">
    <input type="text" id="password">

    <script>

        var username = document.getElementById("username");
        username.oninput = function(e){
            console.log(e.target.value); // 读取数据
        }

        username.onselect = function(){
            console.log("选中了");
        }

        // 失去焦点和回车的时候触发
        var password = document.getElementById("password")
        password.onchange = function(e){
            console.log(e.target.value);
        }
    </script>
    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="服务器地址" id="myForm">
        <input type="text" name="username">
        <button id="resetBtn">重置</button>
        <button id="submitBtn">提交表单</button>
    </form>

    <script>
        var resetBtn = document.getElementById("resetBtn")
        var myForm = document.getElementById("myForm")
        var submitBtn = document.getElementById("submitBtn")
        resetBtn.onclick = function(){
            myForm.reset(); // 触发在表单上:清空表单
        }
        submitBtn.onclick = function(){
            myForm.submit(); // 触发在表单上:提交表单
        }
    </script>
</body>
</html>

 十一、事件代理（事件委托）

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation ） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <list id="list">
        <p>五元素</p>
        <li>金</li>
        <li>木</li>
        <li>水</li>
        <li>火</li>
        <li>土</li>
    </list>
    <script>
        var list = document.getElementById("list")
        //点击事件发生在list列表中
        // list.onclick = function(e){
        //     console.log(e.target.innerHTML);
        // }
        //点击事件只发生在li上
        list.onclick = function(e){
            if(e.target.tagName.toLowerCase() === "li"){
                console.log(e.target.innerHTML);
            }
        }
    </script>
</body>
</html>

 十二、定时器

1.setTimeout()函数

用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

setTimeout(function(){

        想要做的事情

},

毫秒数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // setTimeout(() => {
        //     console.log("3秒之后执行");
        // },3000)

        //取消定时器
        // clearTimeout(time)

        // this永远指向当前调用者
        
        // var username = "xiaohuihui"
        // var user = {
        //     username:"xiyangyang",
        //     getName:function(){
        //         setTimeout(function(){
        //             console.log(this.username);
        //         },1000)
        //     }
        // }
        // user.getName(); //打印出来是：xiaohuihui

        var username = "xiaohuihui"
        var user = {
            username:"xiyangyang",
            getName:function(){
                var that = this
                setTimeout(function(){
                    console.log(that.username);
                },1000)
            }
        }
        user.getName();// 打印出来是：xiyangyang
    </script>
</body>
</html>

2.setInterval()函数

用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

十三、防抖和节流

1.防抖（debounce）

对于短时间内连续触发的事件，防抖的含义就是让某个时间期限 内，事件处理函数只执行一次，
但是如果事件一直不结束，不能得出结果 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
           height: 400px; 
        }
    </style>
</head>
<body>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <script>
        function debounce(fn,delay){
            var time = null;
            //闭包
            return function(){
                if(time){
                    clearTimeout(time)
                }
                time = setTimeout(fn,delay)
            }
        }
        function showTop(){
            var scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
        }
        window.onscroll = debounce(showTop,2000);
    </script> 
</body>
</html>

2.节流（throttle）

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
           height: 400px; 
        }
    </style>
</head>
<body>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <h2>js学习倒计时芜湖</h2>
    <script>
        function throttle(fn,delay){
            var valid = true;
            return function(){
                if(!valid){
                    return false;
                }
                valid = false;
                setTimeout(function(){
                    fn();
                    valid = true;
                },delay)
            }
        }
        function showTop(){
            var scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
        }
        window.onscroll = throttle(showTop,2000);
    </script> 
</body>
</html>
下面介绍一下平时开发中常遇到的场景 :
  • 搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使 用哪种方案要看业务需求
  • 页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这 种情形一般是使用防抖，因为只需要判断最后一次的变化情况）
到底要努力多久
关注
专栏目录
2023年总结的web前端学习路线分享（学习导读）
ztK63LrD的博客
03-06 2万+
以上是博主自学一年前端总结的一些经验，虽然不是特别的准确但是至少能够给刚入学的前端小白一个借鉴的分享，我也会把一些人可能问到的问题总结如下，给大家分享一下我的经历：前端难不难？前端相较于后端语言来说还是比较简单的，不用考虑太多的算法方面知识，如果你的编程能力不是特别的优秀又想从事编程行业，前端可以说是一个不错的选择。前端好就业吗？近几年由于培训机构输出大量的程序员，导致现在前端有一点饱和，人数的众多导致企业对人才的要求也提高了，如果你想从事前端，建议早最准备学习多项技术才能让自己不被淘汰下去。
2024年Web前端最新字节大佬推荐：261页前端面试题宝典，巩固复习，2024年阿里前端岗面试必问
2401_84436095的博客
05-06 894
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
Web前端最全Vue3-2-setup概述，字节跳动前端三面凉凉
2401_84617477的博客
05-08 942
我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。返回的是一个ref对象，对象中value属性，如果需要对数据操作，通过ref对象调用value属性方式进行操作。
字节跳动Web前端金三银四解析，Vue源码解析：虚拟dom详解，零基础学习web前端
2301_79054215的博客
04-08 823
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
web前端开发学什么，JavaScript逻辑运算符与赋值运算符
m0_60305422的博客
07-22 88
问题: 从浏览器地址栏输入url到请求返回发生了什么 你一看这种烂掉牙的问题，小case，但996面试大佬由此延展的问题已经远远超越了这个问题本身了，不信你就接着看。 我回答了首先会进行 url 解析，根据 dns 系统进行 ip 查找。 话音刚落，此时一位喜欢修福报的公司的大佬打断了我，说url为啥要解析，dns查询规则是什么？我一听就心里想，不按套路出牌啊，网上一般都没问这两个问题，心里再一想，俗话说，万事开头难，扛过这一波，答出来，就是阳光明媚，万物骚动的春天！ 先说为什么url要解析（也就是编码)
10段代码打通js学习的任督二脉(2)，2024年最新三面美团Web前端岗
m0_61068088的博客
04-20 289
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
开发常用代码笔记，2024年最新2024年京东Web前端岗面试必问
m0_60453176的博客
04-20 959
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
Node.js学习笔记
gl199555的博客
12-28 2267
基于nodejs学习笔记
web前端开发前景，一个前端妹子的面试笔记
m0_60305027的博客
07-21 116
一面 css 如何实现垂直居中？ position 有哪几种？分别说一下对应的效果和用法 css 选择器优先级 js 原型链，问了js 如何创建对象 页面渲染和响应 式 MVVM 和 MVC的区别 Vue 生命周期，在哪个阶段可以获取页面 dom 信息 Vue 的组件通信 ，聊到一些网络相关 TCP 和 UDP 的区别 TCP 的三次握手和四次挥手 promise 有哪几种状态 手写一个 promise 算法题：最长公共前缀 算法题：多层数组嵌套降级 二面 问项目的情况 根据项目问了一点我的工作，接
BAT大佬写下的面试手册，我看完28天直接拿下字节跳动前端开发2-2Offer，入职就是40K16薪
学前端的第五个月
06-30 4589
我当时反复看了N遍后，感觉真是牛逼！！！然后花了点积分下载，如果把这位大佬的面试笔记研究透，感觉互联网大厂面试随便虐！
什么是NaN？以及如何检查值是否为NaN？，Web前端开发新手入门教程
m0_63174618的博客
04-18 430
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
【春招&实习&秋招】前端学习の优质资料整理&心路历程（已上岸）
超逸の学习技术博客
06-29 7562
引言 CSS篇 JS篇 追梦子：彻底理解 JS 中 this 的指向 追梦子：JavaScript中call,apply,bind方法的总结 计算机网络篇 神三元：(建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系 神三元：(建议收藏）TCP协议灵魂之问，巩固你的网路底层基础 浏览器篇 神三元：(1.6w字）浏览器灵魂之问，请问你能接得住几个？ 数据结构与算法篇 awesome-coding-js：用JS玩转数据结构与算法 ConardLi：前端该如何准备数据结构和算法？ 源码篇 心路历程 / 大佬
「前端必看」这篇Nginx反向代理技巧，助你准时下班陪女神(1)
m0_60634964的博客
04-18 353
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。可以看到，我在配置中注释了X-Real-IP，而我们在生产环境下配置Nginx时，一般会保留这几项Host，X-Real-IP，X-Forwarded-For，用以保留请求的服务器域名，原始客户端和代理服务器的IP等信息。
基于web的机票管理系统设计与实现（一），2024前端面经
04-20 885
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
C++学习笔记----8、掌握类与对象（四）---- 不同类型的数据成员（1）
最新发布
weixin_71738303的博客
10-05 731
c++对于数据成员给了你许多选项。除了在类中声明简单的数据成员，可以生成静态数据成员供所有类的对象共享，const成员，引用成员，reference-to-const成员，等等。本节我们解释一下这些不同类型的数据成员的细节。
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
haidizym的博客
10-02 477
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
江科大笔记—LED闪烁& LED流水灯& 蜂鸣器
m0_62005595的博客
09-28 491
LED闪烁& LED流水灯& 蜂鸣器
OpenGL笔记十九之相机系统
小勇博客
10-02 499
— 2024-10-02 晚上。
Web前端开发规范与指南
"Web前端开发规范手册详细介绍了前端开发中的各种规范，包括文件命名规则、文件存放位置、CSS和HTML书写规范、JavaScript规范、图片规范以及注释规范，旨在提升团队协作效率，确保代码质量和可维护性。" 一、规范...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值