2022-01-27-JavaScript

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量154 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53743471/article/details/126328122
版权

layout: post
#标题配置
title: JavaScript
#时间配置
date: 2022-01-27 21:44:00 +0800
#目录配置
categories: JavaWeb
#标签配置
tag: 学习笔记

  • content
    {:toc}

一.JavaScript介绍

  • JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

  • 脚本语言：不需要编译，就可以被浏览器直接解析执行了。

  • 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

  • 发展历程
1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来 进行修改，后命名为：JavaScript。
1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。 
1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户 端脚本语言的编码方式。

1.快速入门

  • 实现步骤
  1. 创建一个 HTML。
  2. 在标签下面编写一个
  • 具体实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS快速入门</title>
</head>
<body>
    <button id="btn">点我呀</button>
</body>
</html>
引入js的方式一：内部方式
<script>
    document.getElementById("btn").onclick=function () {
        alert("点我干嘛？");
    }
</script>
引入js的方式一：外部方式

  • 创建js文件

    document.getElementById("btn").onclick=function () {
    alert("点我干嘛？");
}

  • 在html中引用外部js文件

    <script src="js/my.js"></script>

2.开发环境搭建

  • Node.js:JavaScript 运行环境

  • VSCode：编写前端技术的开发工具

    根据《安装工具.pdf》文档安装Node.js和VSCode。相关资料都在“资料”文件夹中。

3.快速入门总结

  • JavaScript 是一种客户端脚本语言。

  • 组成部分

    ECMAScript、DOM、BOM

  • 和 HTML 结合方式

    内部方式：<script></script>
外部方式：<script src=文件路径></script>

二、JavaScript基本语法

1.注释

  • 单行注释

    // 注释的内容

  • 多行注释

    /*
注释的内容
*/

2.输入输出语句

  • 输入框 prompt(“提示内容”);
  • 弹出警告框 alert(“提示内容”);
  • 控制台输出 console.log(“显示内容”);
  • 页面内容输出 document.write(“显示内容”);

3.变量和常量

​ JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

  • 定义局部变量 let 变量名 = 值;

    //1.定义局部变量
let name = "张三";
let age = 23;
document.write(name + "," + age +"<br>");

  • 定义全局变量 变量名 = 值;

    //2.定义全局变量
{
    let l1 = "aa";
    l2 = "bb";
}
//document.write(l1);
document.write(l2 + "<br>");

  • 定义常量 const 常量名 = 值;

    //3.定义常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);

4.原始数据类型和typeof方法

4.1 原始数据类型
数据类型说明
boolean布尔类型，true或false
null声明null值的特殊关键字
undefined代表变量未定义
number整数或浮点数
string字符串
bigint大整数，例如:let num = 10n;
4.2 typeof

typeof 用于判断变量的数据类型

let age = 18; 
document.write(typeof(age)); // number

5.运算符

  • 算数运算符

    运算符说明
    +加法运算
    -减法运算
    *乘法运算
    /除法运算
    %取余数
    ++自增
    –自减

  • 赋值运算符

    运算符说明
    =将等号右边的值赋值给等号左边的变量
    +=相加后赋值相减后赋值
    -=相减后赋值
    *=相乘后赋值
    /=相除后赋值
    %=取余数后赋值

  • 比较运算符

    运算符说明
    ==判断值是否相等
    ===判断数据类型和值是否相等
    >大于
    >=大于等于
    <小于
    <=小于等于
    !=不等于

  • 逻辑运算符

    运算符说明
    &&逻辑与，并且的功能
    ||逻辑或，或者的功能
    !取反

  • 三元运算符

    • 三元运算符格式

      (比较表达式) ? 表达式1 : 表达式2;

    • 执行流程

      如果比较表达式为true，则取表达式1

      如果比较表达式为false，则取表达式2

6.流程控制和循环语句

  • if 语句

    //if语句
let month = 3;
if(month >= 3 && month <= 5) {
    document.write("春季");
}else if(month >= 6 && month <= 8) {
    document.write("夏季");
}else if(month >= 9 && month <= 11) {
    document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("冬季");
}else {
    document.write("月份有误");
}

document.write("<br>");

  • switch 语句

    //switch语句
switch(month){
    case 3:
    case 4:
    case 5:
        document.write("春季");
        break;
    case 6:
    case 7:
    case 8:
        document.write("夏季");
        break;
    case 9:
    case 10:
    case 11:
        document.write("秋季");
        break;
    case 12:
    case 1:
    case 2:
        document.write("冬季");
        break;
    default:
        document.write("月份有误");
        break;
}

document.write("<br>");**for 循环**

  • for循环

    //for循环
for(let i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

  • while 循环

    //while循环
let n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

7.数组

  • 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

  • 定义格式

    • let 数组名 = [元素1,元素2,…];

    • let arr = [10,20,30];

  • 索引范围

    • 从 0 开始，最大到数组长度-1

  • 数组长度

    • 数组名.length

    • for(let i = 0; i < arr.length; i++) {
    document.write(arr[i] + "<br>");
}
document.write("==============<br>");

  • 数组高级运算符…

    • 数组复制

       //复制数组
 let arr2 = [...arr];
 //遍历数组
 for(let i = 0; i < arr2.length; i++) {
 document.write(arr2[i] + "<br>");
 }
 document.write("==============<br>");

    • 合并数组

      //合并数组
let arr3 = [40,50,60];
let arr4 = [...arr2 , ...arr3];
//遍历数组
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("==============<br>");

    • 字符串转数组

      //将字符串转成数组
let arr5 = [..."heima"];
//遍历数组
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}

8.函数

  • 函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果

  • 定义格式

    function 方法名(参数列表) {
    方法体; 
    return 返回值; 
}

  • 可变参数

    function 方法名(…参数名) {
    方法体; 
    return 返回值; 
}

  • 匿名函数

    function(参数列表) {
    方法体; 
}

9.小结

  • 注释：单行// 多行/**/
  • 输入输出语句：prompt()、alert()、console.log()、document.write()
  • 变量和常量：let、const
  • 数据类型：boolean、null、undefined、number、string、bigint
  • typeof 关键字：用于判断变量的数据类型
  • 运算符：算数、赋值、逻辑、比较、三元运算符
  • 流程控制和循环语句：if、switch、for、while
  • 数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
  • 函数：类似方法，抽取代码，提高复用性

三.JavaScript DOM

1.DOM介绍

  • DOM(Document Object Model)：文档对象模型。
  • 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
  • 文档包括
    • Document：文档对象（文档）
    • Element：元素对象（，，，，<a>，</a><h1>）</h1>
    • Attribute：属性对象()
    • Text：文本对象(文档标题，我的链接，我的标题)

2.Element元素的获取操作

  • 具体方法
方法名说明
getElementByld(id属性值)根据id获得一个元素
getElementsByTagName(标签名称)根据标签名称获得多个元素
getElementsByName(name属性值)根据name属性获得多个元素
getElementsByClassName(class属性值)根据class属性获得多个元素
子元素对象.parentElement属性获取当前元素的父元素
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>

3.Element元素的增删改操作

  • 具体方法

    方法名说明
    createElement(标签名)创建一个新元素
    appendChild(子元素)将指定子元素添加到父元素中
    removeChild(子元素)用父元素删除指定子元素
    replaceChild(新元素,旧元素)用新元素替换子元素

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的增删改</title>
</head>
<body>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //2. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    //select.removeChild(option);

    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);

</script>
</html>

4.Attribute属性的操作

  • 具体方法

    方法名说明
    setAtrribute(属性名,属性值)设置属性
    getAtrribute(属性名)根据属性名获取属性值
    removeAtrribute(属性名)根据属性名移除指定的属性
    style属性为元素添加样式

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>

5.Text文本的操作

  • 具体方法

    属性名说明
    innerText添加文本内容，不解析标签
    innerHTML添加文本内容，解析标签

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的操作</title>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容，不解析标签
    let div = document.getElementById("div");
    div.innerText = "我是div";
    //div.innerText = "<b>我是div</b>";

    //2. innerHTML   添加文本内容，解析标签
    div.innerHTML = "<b>我是div</b>";

</script>
</html>

6.DOM小结

  • DOM(Document Object Model)：文档对象模型

    • Document：文档对象

  • Element：元素对象

    • Attribute：属性对象

  • Text：文本对象

  • 元素的操作

    • getElementById()
    • getElementsByTagName()
    • getElementsByName()
    • getElementsByClassName()
    • 子元素对象.parentElement属性
    • createElement()
    • appendChild()
    • removeChild()
    • replaceChild()

  • 属性的操作

    • setAtrribute()
    • getAtrribute()
    • removeAtrribute()
    • style属性

  • 文本的操作

    • innerText
    • innerHTML

四.JavaScript 事件

1.事件介绍

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

  • 常用的事件
事件名说明
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容
  • 了解的事件
事件名说明
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

2.事件操作

绑定事件

  • 方式一

    通过标签中的事件属性进行绑定。

    <button id="btn" onclick="执行的功能"></button>

  • 方式二

    通过 DOM 元素属性绑定。

    document.getElementById("btn").onclick = 执行的功能

3.事件小结

  • 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
  • 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
  • 绑定事件方式
    • 方式一：通过标签中的事件属性进行绑定。
    • 方式二：通过 DOM 元素属性绑定。

五.JavaScript综合案例

1.案例效果介绍

  • 在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DoAL3eR8-1660437440335)(F:\黑马Java资料\2.阶段二-JavaWeb\07.JavaScript\01-JavaScript基础\笔记\img\综合案例-添加功能分析.png)]

2.添加功能的分析

  1. 为添加按钮绑定单击事件。
  2. 创建 tr 元素。
  3. 创建 4 个 td 元素。
  4. 将 td 添加到 tr 中。
  5. 获取文本框输入的信息。
  6. 创建 3 个文本元素。
  7. 将文本元素添加到对应的 td 中。
  8. 创建 a 元素。
  9. 将 a 元素添加到对应的 td 中。
  10. 将 tr 添加到 table 中。

3.添加功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");
        //3.创建4个单元格元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4.将td添加到tr中
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //6.根据获取到的信息创建3个文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //7.将3个文本元素添加到td中
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.appendChild(aText);
        //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>

4.删除功能的分析

  • 删除功能介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hNoDLPh-1660437440336)(F:\黑马Java资料\2.阶段二-JavaWeb\07.JavaScript\01-JavaScript基础\笔记\img\综合案例-删除功能分析.png)]

  • 删除功能分析
  1. 为每个删除超链接添加单击事件属性。
  2. 定义删除的方法。
  3. 获取 table 元素。
  4. 获取 tr 元素。
  5. 通过 table 删除 tr。

5.删除功能的实现

//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}

六.JavaScript面向对象

1.面向对象介绍

​ 在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

2.类的定义和使用

  • 定义格式

    class 类名 {
    constructor(变量列表) {
        变量赋值;
    }
    
    方法名(参数列表) {
        方法体;
        return 返回值;
    }
}

  • 使用格式

    let 对象名 = new 类名(实际变量值);
对象名.方法名();

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的定义和使用</title>
</head>
<body>
    
</body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法
        show(){
            document.write(this.name + "," + this.age + "<br>");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
</script>
</html>

3.字面量类的定义和使用

  • 定义格式

    let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    ...
    方法名 : function(参数列表) {
        方法体;
        return 返回值;
    },
    ...
};

  • 使用格式

    对象名.变量名;
对象名.方法名();

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量定义类和使用</title>
</head>
<body>
    
</body>
<script>
    //定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
    person.eat();
</script>
</html>

4.继承

  • 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。

  • 继承关键字：extends

  • 顶级父类：Object

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承</title>
</head>
<body>
    
</body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "<br>");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
</script>
</html>

5.小结

  • 面向对象

    把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。

  • 类的定义

    class 类{} 字面量定义

  • 类的使用

    let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()

  • 继承

    让类和类产生子父类关系，提高代码的复用性和维护性。

    子类 extends 父类

    Object 顶级父类

七.JavaScript内置对象

1.Number

  • 方法介绍

    方法名说明
    parseFloat()将传入的字符串浮点数转为浮点数
    parselnt()将传入的字符串整数转为整数

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number</title>
</head>
<body>
    
</body>
<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "<br>");

    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止

</script>
</html>

2.Math

  • 方法介绍

    方法名说明
    ceil(x)向上取整
    floor(x)向下取整
    round(x)把数四舍五入为最接近的整数
    random()随机数,返回的是0.0-1.0之间范围(含头不含尾)
    pow(x,y)幂运算x的y次方

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>
<body>
    
</body>
<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random() + "<br>"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>

3.Date

  • 方法说明

    • 构造方法

      构造方法说明
      Date()根据当前时间创建对象
      Date(value)根据指定毫秒值创建对象
      Date(year,month,[day,hours,minutes,seconds,milliseconds])根据指定字段创建对象(月份是0~11)

    • 成员方法

      成员方法说明
      getFullYear()获取年份
      getMonth()获取月份
      getDate()获取天数
      getHours()获取小时
      getMinutes()获取分钟
      getSeconds()获取秒数
      getTime()返回据1970年1月1日至今的毫秒数
      toLocaleString()返回本地日期格式的字符串

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
    
</body>
<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "<br>");

    //2. Date(value) 根据指定毫秒值创建对象
    let d2 = new Date(10000);
    document.write(d2 + "<br>");

    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "<br>");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d3.getFullYear() + "<br>");

    //2. getMonth() 获取月份
    document.write(d3.getMonth() + "<br>");

    //3. getDate() 获取天数
    document.write(d3.getDate() + "<br>");

    //4. toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString());
</script>
</html>

4.String

  • 方法说明

    • 构造方法

      构造方法说明
      String(value)根据指定字符串创建对象
      let s = “字符串”直接赋值

    • 成员方法

      成员方法说明
      length属性获取字符串长度
      charAt(index)获取指定索引处的字符
      indexOf(value)获取指定字符串出现的索引位置,找不到为-1
      substring(start,end)根据指定索引范围截取字符串(含头不含尾)
      split(value)根据指定规则切割字符串，返回数组
      replace(old,new)使用新字符串替换老字符串

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</title>
</head>
<body>
    
</body>
<script>
    //1. 构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "<br>");

    //2. 直接赋值
    let s2 = "hello";
    document.write(s2 + "<br>");

    //属性
    //1. length   获取字符串的长度
    document.write(s2.length + "<br>");

    //成员方法
    //1. charAt(index)     获取指定索引处的字符
    document.write(s2.charAt(1) + "<br>");

    //2. indexOf(value)    获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "<br>");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    document.write(s2.substring(2,4) + "<br>");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }

    //5. replace(old,new)   使用新字符串替换老字符串
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "<br>");
</script>
</html>

5.RegExp

正则表达式：是一种对字符串进行匹配的规则。

  • 方法说明

    • 构造方法

      构造方法说明
      RegExp(规则)根据指定规则创建对象
      let reg = /^规则$/直接赋值

    • 成员方法

      成员方法说明
      test(匹配的字符串)根据指定规则验证字符串是否符合

    • 规则

      表达式说明
      [a]只能是a
      [abc]只能是abc中的某一个
      [1]只能是1
      [123]只能是123中的某一个
      [a-z]可以是a到z中的某一个
      [A-Z]可以是A到Z中的某一个
      [0-9]可以是0到9中的某一个
      {5}只能出现5次
      {4,6}只能出现4到6次
正则表达式规则：
[a-z]	这个字符必须是小写字母
[abc]	字符必须是abc
[0-9]	这个字符必须是数字
[a-zA-Z0-9]	这个字符必须是字母或者是数字
[^a-z]	这个字符不是小写字母
[\d]	等同于[0-9]
[\w]	等同于[a-zA-Z_0-9] 字母、数字、下划线
[\D]	等同于[^0-9]
[\W]	等同于[^a-zA-Z0-9_]
.	代表匹配任意字符， 若只是想代表普通数据.  需要使用转义字符来表示\.

X* 	X这个字符可以出现零次或者多次[0-9]*
X? 	X这个字符可以出现零次或者一次[0-9]? 
X+ 	X这个字符可以出现一次或者多次 [0-9]+

X{m} 	X这个字符出现次数正好m次  
X{m, } 	X这个字符出现次数至少m次
X{m, n} X这个字符出现次数至少m次,最多n次  
(X)+ 	()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次
^X 		^匹配开头
X$ 		$匹配结尾
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegExp</title>
</head>
<body>
    
</body>
<script>
    //1.验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888") + "<br>");

    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123"));
</script>
</html>

6.Array

  • 成员方法

    成员方法说明
    push(元素)添加元素到数组的末尾
    pop()删除数组末尾的元素
    shift()删除数组最前面的元素
    includes(元素)判断数组是否包含给定的值
    reverse()反转数组中的元素
    sort()对数组元素进行排序

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
</head>
<body>
    
</body>
<script>

    let arr = [1,2,3,4,5];

    //1. push(元素)    添加元素到数组的末尾
    arr.push(6);
    document.write(arr + "<br>");

    //2. pop()         删除数组末尾的元素
    arr.pop();
    document.write(arr + "<br>");

    //3. shift()       删除数组最前面的元素
    arr.shift();
    document.write(arr + "<br>");

    //4. includes(元素)  判断数组中是否包含指定的元素
    document.write(arr.includes(2) + "<br>");

    //5. reverse()      反转数组元素
    arr.reverse();
    document.write(arr + "<br>");

    //6. sort()         对数组元素排序
    arr.sort();
    document.write(arr + "<br>");

</script>
</html>

7.Set

JavaScript 中的 Set 集合，元素唯一，存取顺序一致。

  • 方法说明

    • 构造方法

      构造方法说明
      Set()创建Set集合对象

    • 成员方法

      成员方法说明
      add(元素)向集合中添加元素
      size属性获取集合长度
      keys(）获取迭代器对象
      delete(元素)删除指定元素

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set</title>
</head>
<body>
    
</body>
<script>
    // Set()   创建集合对象
    let s = new Set();

    // add(元素)   添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");

    // size属性    获取集合的长度
    document.write(s.size + "<br>");    // 3

    // keys()      获取迭代器对象
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st.next().value + "<br>");
    }

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "<br>");
    }
</script>
</html>

8.Map

JavaScript 中的 Map 集合，key 唯一，存取顺序一致。

  • 方法说明

    • 构造方法

      构造方法说明
      Map()创建Map集合对象

    • 成员方法

      成员方法说明
      set(key,value)向集合中添加元素
      size属性获取集合长度
      get(key)根据key获取value
      entries()获取迭代器对象
      delete(key)根据key删除键值对

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    
</body>
<script>
    // Map()   创建Map集合对象
    let map = new Map();

    // set(key,value)  添加元素
    map.set("张三",23);
    map.set("李四",24);
    map.set("李四",25);

    // size属性     获取集合的长度
    document.write(map.size + "<br>");

    // get(key)     根据key获取value
    document.write(map.get("李四") + "<br>");

    // entries()    获取迭代器对象
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et.next().value + "<br>");
    }

    // delete(key)  根据key删除键值对
    document.write(map.delete("李四") + "<br>");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et2.next().value + "<br>");
    }
</script>
</html>

9.Json

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

    • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。

  • 方法说明

    成员方法说明
    stringify(对象)将指定对象转换为json格式字符串
    parse(字符串)将指定json格式字符串解析成对象

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
    
</body>
<script>
    //定义天气对象
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };

    //1.将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str + "<br>");

    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("温度：" + weather2.wendu + "<br>");
    document.write("湿度：" + weather2.shidu + "<br>");
</script>
</html>

10.表单校验

  • 案例说明

    • 1．为表单绑定提交事件(true提交、false不提交)。
    • 2．获取用户名和密码。
    • 3．判断用户名是否满足条件(4到16位纯字母)。
    • 4．判断密码是否满足条件(6位纯数字)。

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <div class="login-form-wrap">
        <h1>黑马程序员</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>
    //1.为表单绑定提交事件
    document.getElementById("regist").onsubmit = function() {
        //2.获取填写的用户名和密码
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //3.判断用户名是否符合规则  4~16位纯字母
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)) {
            alert("用户名不符合规则，请输入4到16位的纯字母！");
            return false;
        }

        //4.判断密码是否符合规则  6位纯数字
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)) {
            alert("密码不符合规则，请输入6位纯数字的密码！");
            return false;
        }

        //5.如果所有条件都不满足，则提交表单
        return true;
    }
    
</script>
</html>

11.小结

  • 内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型。
  • 数字日期 Number Math Date
  • 字符串 String RegExp
  • 数组集合 Array Set Map
  • 结构化数据 JSON

八.JavaScript BOM

  • BOM(Browser Object Model)：浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
  • Window：窗口对象
  • Location：地址栏对象
  • Navigator：浏览器对象
  • History：当前窗口历史记录对象
  • Screen：显示器屏幕对象

1.Windows窗口对象

  • 定时器
    • 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
    • clearTimeout(标识)：取消一次性定时器。
    • 唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
    • clearInterval(标识)：取消循环定时器。
  • 加载事件
    • window.onload：在页面加载完毕后触发此事件的功能。
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window窗口对象</title>
    <script>
        //一、定时器
        function fun(){
            alert("该起床了！");
        }
    
        //设置一次性定时器
        //let d1 = setTimeout("fun()",3000);
        //取消一次性定时器
        //clearTimeout(d1);
    
        //设置循环定时器
        //let d2 = setInterval("fun()",3000);
        //取消循环定时器
        //clearInterval(d2);
    
        //加载事件
        window.onload = function(){
            let div = document.getElementById("div");
            alert(div);
        }
    </script>
</head>
<body>
    <div id="div">dddd</div>
</body>
<!-- <script>
    //一、定时器
    function fun(){
        alert("该起床了！");
    }

    //设置一次性定时器
    //let d1 = setTimeout("fun()",3000);
    //取消一次性定时器
    //clearTimeout(d1);

    //设置循环定时器
    //let d2 = setInterval("fun()",3000);
    //取消循环定时器
    //clearInterval(d2);

    //加载事件
    let div = document.getElementById("div");
    alert(div);
</script> -->
</html>

2.Location地址栏对象

  • href 属性

    就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

  • 例：注册成功，5秒后跳转到首页

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location地址栏对象</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>
    //1.定义方法。改变秒数，跳转页面
    let num = 5;
    function showTime() {
        num--;

        if(num <= 0) {
            //跳转首页
            location.href = "index.html";
        }

        let span = document.getElementById("time");
        span.innerHTML = num;
    }

    //2.设置循环定时器，每1秒钟执行showTime方法
    setInterval("showTime()",1000);
</script>
</html>

3.案例-动态广告

  • 案例分析和实现
<!-- 广告图片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
  • 在 css 样式中，display 属性可以控制元素是否显示
style="display: none;"
  • 设置定时器，3 秒后显示广告图片
//1.设置定时器，3秒后显示广告图片
setTimeout(function(){
    let img = document.getElementById("ad_big");
    img.style.display = "block";
},3000);
  • 设置定时器，3 秒后隐藏广告图片
//2.设置定时器，3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);

4.小结

  • **BOM(Browser Object Model)：**浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
    • Window：窗口对象
    • Location：地址栏对象
    • Navigator：浏览器对象
    • History：当前窗口历史记录对象
    • Screen：显示器屏幕对象
  • Window 窗口对象
    • setTimeout()、clearTimeout()：一次性定时器
    • setInterval()、clearInterval()：循环定时器
    • onload 事件：页面加载完毕触发执行功能
  • Location 地址栏对象 href 属性：跳转到指定的 URL 地址

九.JavaScript封装

封装思想

  • **封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。

  • 获取元素的方法

    • document.getElementById(id值)：根据 id 值获取元素
    • document.getElementsByName(name值)：根据 name 属性值获取元素们
    • document.getElementsByTagName(标签名)：根据标签名获取元素们

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    // let div1 = document.getElementById("div1");
    // alert(div1);

    // let divs = document.getElementsByName("div2");
    // alert(divs.length);

    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
</script>
</html>

    js封装

    function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

我们之前的操作都是基于原生 JavaScript 的，比较繁琐。 JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！
ElementById(“ad_big”);
img.style.display = “block”;
},3000);


- **设置定时器，3 秒后隐藏广告图片**

```js
//2.设置定时器，3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);

4.小结

  • **BOM(Browser Object Model)：**浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
    • Window：窗口对象
    • Location：地址栏对象
    • Navigator：浏览器对象
    • History：当前窗口历史记录对象
    • Screen：显示器屏幕对象
  • Window 窗口对象
    • setTimeout()、clearTimeout()：一次性定时器
    • setInterval()、clearInterval()：循环定时器
    • onload 事件：页面加载完毕触发执行功能
  • Location 地址栏对象 href 属性：跳转到指定的 URL 地址

九.JavaScript封装

封装思想

  • **封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。

  • 获取元素的方法

    • document.getElementById(id值)：根据 id 值获取元素
    • document.getElementsByName(name值)：根据 name 属性值获取元素们
    • document.getElementsByTagName(标签名)：根据标签名获取元素们

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    // let div1 = document.getElementById("div1");
    // alert(div1);

    // let divs = document.getElementsByName("div2");
    // alert(divs.length);

    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
</script>
</html>

    js封装

    function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

我们之前的操作都是基于原生 JavaScript 的，比较繁琐。 JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！

拾光1024
关注
学习 JavaScript 一篇博客就够了（珍藏版）
南淮北安的博客
02-29 1781
文章目录一、学习目录二、扩展目录 一、学习目录 JavaScript 基础语法 JavaScript 基本对象 （1） RegExp 正则表达式对象 DOM 和事件的简单学习 BOM（Browser Object Model ） DOM（Document Object Model） 动态表格案例实现 事件监听机制 表格全选案例 表单验证案例 二、扩展目录 innerHTML 与 innerT...
【2022-07-06】某问财请求头参数hexin-v分析
不愿意透露姓名的网友
03-16 2303
网站： 二、分析 随便搜索一些东西，我们看到请求头中有加密参数,我们发现这个参数和cookie中的v是相同的。 我们全局搜索这个参数,没有匹配到 那么我们可以通过hook来hook headers里的，或者hook cookie里的v，这里我们hook这个参数，打开fiddler注入hook代码 重新搜索抓包，成功定位到，s就是结果 s是D()生成的，进入D函数，打断点，调试 再进入，返回值就是结果，打断点，调试 进入，返回值就是结果，打断点，调试 这里还获取了一些鼠标键盘时间，然后加密的，进入
JavaScript基础
小小前端攻城狮的博客
02-24 1139
前言： 这是之前假期复习js累计下来的笔记，以用来后续复习之用。由于当时没有定期整理发博客，一直在复习，所以内容可能有点多，这个也是特别基础的内容，也不打算拆分发了，源码和笔记内容来自b站pink老师。 文章内容如有错误，欢迎指正批评✔️✔️ 教程传送门 接下一篇 学习目标: 掌握编程的基本思维 掌握编程的基本语法 编程基础 「计算机语言」分为机器语言，汇编语言，高级语言。计算机内部最终执行的都是机器语言，由0和1这样的二进制数构成。 数据存储单位 加粗样式8bit(比特) = 1B(Byt.
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 77万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
2022-01-03 服务端登录校验（jwt）
weixin_44295310的博客
01-03 103
后端 routes.js const jwt = require('jsonwebtoken') // 资源列表 router.get('/', async (req, res, next) => { const token = String(req.headers.authorization || '').split(' ').pop() const { id } = jwt.verify(token, app.get('secret')) req.user = await AdminUse
js如何将时间的标准格式和时间戳格式和2022-01-27 000000（年月日时分秒）格式相互转换
m0_67392273的博客
03-11 3606
目录 前言 一、new Date()？ 1. new Date() 是什么？ 2. 怎么用？ 二、格式化工具函数 1.如何调用函数： 2.代码如下（示例）： 总结 前言 这里主要讲的是如何将我们的在项目中遇到的时间格式，进行处理，做的一个总结。 首先我们，一般在new Date（）的时候，可以获得一个时间对象，这个对象表示的就是我们当前的时间。然后是为标准格式。 但是现在我们需要在前端展示出一个方便用户查看的格式，这里我们讲解的是：2022-01-27 00:00:00（年月日时分秒）
【webrtc】Windows平台WebRTC编译-VS2022 - 官方m98分支
突围
03-05 1475
参考之前的dep_tools记录 一些webrtc的网站 native-code 官方构建指南 启用代理很关键，windows用set linux是export 过程 先安装dep_tools Microsoft Windows [版本 10.0.22000.493] (c) Microsoft Corporation。保留所有权利。 C:\Users\zhangbin>gclient fatal: unable to access 'https://chromium.goo..
【2022-07-29】某公英x-s参数加密分析
不愿意透露姓名的网友
04-08 3167
拖更半个月了，哈哈哈，赶紧看这个网站。
2022-07-03 vue项目-通用后台管理系统(二) Login页面的样式和校验,使用element-ui表单方法实现表单的提交和重置
GAARA
07-03 652
一.登录页面Login.vue的样式 1.实现登录页面天蓝色背景色和中间白色登录框 2.实现登录框中logo引入并放置在登录框左上角 3.使用Element-UI表单功能实现用户密码的输入框样式 二.登录页面的规则校验 思路 代码 效果 注意事项 1.`prop="username"`是为了data中rules的username属性做绑定 2.实现验证规则的几个要点: 三.登录按钮和重置按钮的功能实现,登录按钮的验证逻辑 代码 效果:登陆成功后跳转到home页 注意事项 1.调用refs的resetFiel
2022-07-04 vue项目-通用后台管理系统(三) 其他页面路由守卫回login页,使用ElementUI进行home主页布局,主页设置登录退出功能,对Aside侧边栏的菜单数据进行动态绑定
GAARA
07-04 351
文章目录 零.设置路由守卫:需要先登录才能访问其他页面 一.使用ElementUI进行home主页快速布局,并设置登录退出功能 二.左侧菜单Aside布局 1.编写(复制)一个mock接口到vue.config.js 2.使用Element-UI的NavMenu功能进行Aside样式布局:抽屉式导航菜单 教程 代码 3.菜单数据的绑定:动态遍历数据[难点] 七.知识点 1.路由导航守卫有哪些? 2.vue插槽的用法 ———————————————— 版权声明：本文为CSDN博主「前端OnTheRun」的原创
学会JavaScript这一篇就够了~
lesileqin的博客
12-29 5159
文章目录【One】 JavaScript语言基础一、数据类型1、数值型2、字符串型3、布尔型二、常量和变量1、常量2、变量——例子：输出球员的信息三、运算符1、算术运算符——例子：将华氏度转换为摄氏度2、字符串运算符——例子：显示票房信息3、比较运算符——例子：比较两个数值的大小4、赋值运算符5、逻辑运算符6、条件运算符7、其他运算符8、运算符优先级【Two】JavaScript基本语句一、条件判...
新手入门JavaScript看这篇就够了~
技术专家
04-20 1379
新手入门JavaScript看这篇就够了~
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2807
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 842
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 428
实现中国地图各省数据案例
funListT07: [ { id: 1, name: "零部件01", start: "2022-01-01", end: "2022-01-05", }, { id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", }, { id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", }, { id: 4, name: "零部件04", start: "2022-01-02", end: "2022-01-09", }, { id: 5, name: "零部件05", start: "2022-01-05", end: "2022-01-10", }, { id: 6, name: "零部件06", start: "2022-01-06", end: "2022-01-12", }, { id: 7, name: "零部件07", start: "2022-01-03", end: "2022-01-10", }, ],如何实现甘特图，echarts
05-31
start: "2022-01-01", end: "2022-01-05", }, { id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", }, { id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", }, {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拾光1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值