当前位置： 首页 > backend >正文

JavaScript零基础入门笔记：狂神版

backend 2025/5/16 14:58:50

 前言

本笔记是学习狂神的java教程，建议配合视频，学习体验更佳。

【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

第1-2章：Java零基础入门笔记：(1-2)入门（简介、基础知识）-CSDN博客

第3章：Java零基础入门笔记：(3)程序控制-CSDN博客

第4章：Java零基础入门笔记：(4)方法-CSDN博客

第5章：Java零基础入门笔记：(5)数组-CSDN博客 

第6章：Java零基础入门笔记：(6)面向对象-CSDN博客 

第7章：Java零基础入门笔记：(7)异常-CSDN博客 

多线程：Java零基础入门笔记：多线程_callable-CSDN博客 

HTML：HTML零基础入门笔记：狂神版_狂神说java html笔记-CSDN博客 

CSS：CSS零基础入门笔记：狂神版-CSDN博客

-

-

1.概述

JavaScript是一种高级的、基于原型的、多范式的编程语言，它具有动态性、弱类型和面向对象的特性。它最初是作为浏览器端的脚本语言被设计出来，用于增强网页的交互性，比如实现表单验证、动态更新页面内容、响应用户的鼠标点击和键盘输入等操作。随着技术的发展，JavaScript的应用范围已经远远超出了浏览器环境。在服务器端，通过Node.js这样的运行时环境，JavaScript可以用来构建高性能的网络服务器和后端服务，处理数据库操作、文件系统操作等任务。此外，它还被广泛应用于开发桌面应用程序、移动应用程序以及物联网设备的编程。JavaScript的语法简洁灵活，拥有庞大的生态系统和丰富的库与框架，例如React、Vue.js和Angular等前端框架，以及Express等后端框架，这些工具极大地提高了开发效率，使得开发者能够快速构建各种复杂的应用程序。

JS的优点：适用范围广，实用性高

JS的缺点：高并发缺陷

JavaScript框架

  • jQuery：简化DOM操作
  • Angular：MVC模式、模块化开发
  • React：虚拟DOM的使用提高了前端的渲染效率，但是使用较为复杂，需要额外学习JSX语言
  • Axios：通讯框架、使用jQuery的AJAX通信功能与服务器交互

UI框架

  • Ant-Design：基于React的UI框架
  • ElementUI：基于Vue的UI框架
  • Bootstrap：前端开发的开源工具包
  • AmazeUI：HTML5跨屏前端框架

JavaScript的历史

JavaScript的历史可以追溯到1995年，它的起源和发展与互联网的早期发展紧密相连，经历了从一个简单的网页脚本语言到如今广泛应用于各种领域的复杂编程语言的转变。

在1990年代初，互联网开始兴起，网页主要由HTML静态内容组成，缺乏交互性。当时，Netscape公司（网景公司）是浏览器市场的领导者，其开发的Netscape Navigator浏览器在市场上占据主导地位。为了增强网页的交互性，Netscape公司决定开发一种嵌入式脚本语言，以便让网页开发者能够实现动态效果，如表单验证、动态更新内容等。

创立与命名
1995年，Netscape公司雇佣了程序员布兰登·艾奇（Brendan Eich）。他在短短十天内设计并实现了一种名为“LiveScript”的脚本语言。然而，当时Java语言（由Sun Microsystems开发）正变得非常流行，Netscape公司为了借助Java的热度，将LiveScript重新命名为JavaScript。尽管JavaScript和Java在语法上有一定的相似性，但它们是两种完全不同的语言，JavaScript是一种动态的、弱类型的脚本语言，而Java是一种静态的、强类型的编程语言。

初期发展与标准化
1996年，Netscape公司向欧洲计算机制造商协会（ECMA）提交了JavaScript语言规范的草案。1997年，ECMA正式发布了ECMAScript标准的第一版（ECMAScript 1），为JavaScript语言的语法和功能提供了标准化的定义。此后，JavaScript开始逐渐被其他浏览器厂商支持，包括微软的Internet Explorer等。微软开发了自己的脚本语言JScript，但由于兼容性问题，开发者需要在不同浏览器中编写不同的代码，这给开发带来了很大的困扰。

Web 2.0与AJAX的兴起
2005年左右，随着Web 2.0概念的兴起，JavaScript开始迎来新的发展机遇。Web 2.0强调网页的动态交互性和用户体验，而JavaScript作为实现这些功能的关键技术，得到了更广泛的应用。同年，AJAX（Asynchronous JavaScript and XML）技术被正式提出。AJAX允许网页在不重新加载整个页面的情况下与服务器进行数据交互，从而实现动态更新页面内容的效果。这一技术的出现极大地推动了JavaScript的发展，使得开发者能够构建更加复杂和流畅的网页应用程序，如Gmail、Google Maps等。

现代化与ECMAScript标准的演进
2009年，ECMAScript 5标准发布，引入了许多重要的改进，如严格模式、数组和对象的新方法等，进一步完善了JavaScript语言的功能。此后，JavaScript的发展进入了一个快速演进的阶段。2015年，ECMAScript 2015（通常称为ES6）发布，带来了重大变革，引入了let和const关键字、箭头函数、类语法、模块系统、模板字符串等新特性，极大地增强了JavaScript的表达能力和开发效率。此后，ECMAScript标准以每年发布一次新版本的速度持续发展，例如ES7（ECMAScript 2016）、ES8（ECMAScript 2017）等，不断引入新特性和改进，推动了JavaScript语言的现代化发展。

Node.js与JavaScript的全栈化
2009年，Node.js项目启动，它是一个基于Chrome V8引擎的JavaScript运行时环境，使得JavaScript可以运行在服务器端。Node.js的出现打破了JavaScript仅限于浏览器端的局限，使得JavaScript成为了一种全栈编程语言，可以同时用于前端和后端开发。Node.js的高性能和非阻塞I/O模型使其在构建高性能网络服务器和后端服务方面表现出色，进一步扩大了JavaScript的应用范围。

现代JavaScript生态系统的繁荣
如今，JavaScript已经成为世界上最流行的编程语言之一，拥有庞大的生态系统和丰富的库与框架。在前端开发领域，React、Vue.js和Angular等现代前端框架极大地提高了开发效率，使得开发者能够快速构建复杂的单页面应用程序（SPA）。在后端开发中，Node.js结合Express等框架，可以构建高性能的服务器端应用程序。此外，JavaScript还被广泛应用于开发桌面应用程序（如使用Electron框架）、移动应用程序（如使用React Native）以及物联网设备的编程。

JavaScript的发展历程充分体现了技术的演进和市场需求的推动。从最初的简单网页脚本语言，到如今的全栈编程语言，JavaScript在互联网技术的发展中扮演了不可或缺的角色，并且随着新的技术和应用场景的不断出现，JavaScript的未来仍然充满无限可能。

-

ECMAScript

ECMAScript标准是一种国际规范，用于定义JavaScript语言的核心语法和功能。它是由欧洲计算机制造商协会（ECMA）的第39号技术委员会（TC39）制定的，目的是确保JavaScript语言的统一性和兼容性，让不同浏览器和运行环境中的JavaScript实现保持一致的行为。

ECMAScript标准涵盖了JavaScript语言的各个方面，包括基本语法、数据类型（如数字、字符串、布尔值、对象、数组等）、操作符、控制流语句（如if语句、循环语句）、函数、类和模块等。它为JavaScript语言提供了一个标准化的框架，使得开发者可以依赖于这些规范来编写可移植、可维护的代码。

随着时间的推移，ECMAScript标准不断更新和演进。例如，ES5（ECMAScript 5）在2009年发布，引入了许多重要的改进，如严格模式、数组和对象的新方法等。ES6（ECMAScript 2015）更是带来了巨大的变革，引入了诸如let和const关键字、箭头函数、类语法、模块系统、模板字符串等新特性，极大地增强了JavaScript的表达能力和开发效率。此后，ECMAScript标准以每年发布一次新版本的速度持续发展，例如ES7（ECMAScript 2016）、ES8（ECMAScript 2017）等，不断引入新特性和改进，推动了JavaScript语言的现代化发展。

尽管ECMAScript标准本身是一个规范文档，但它的影响力贯穿于整个JavaScript生态系统。浏览器厂商、JavaScript引擎开发者（如Chrome的V8引擎、Firefox的SpiderMonkey引擎等）以及各种JavaScript工具和框架的开发者都会遵循ECMAScript标准来实现和优化JavaScript语言的功能，确保开发者编写的代码能够在不同的环境中稳定运行。

-

-

JavaScript的基本语法

JavaScript的引入

内部引用

在head标签或者body标签的尾部添加script标签，在其中添加JavaScript代码

按照网页的加载顺序来看，位置在body标点尾部实践最佳

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>alert('hello world');</script></head>
<body></body>
</html>

​

-

外部引用

在head标签内用script的src属性引入js文件

要注意和link不同，script无论内部引用和外部引用都是双标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="qj.js"></script>
</head>
<body></body>
</html>
alert('hello world');

-

JavaScript的注释方式

//用于单行注释/*
* 用于多行注释
*/

控制台的使用

alert(message)

alert 是一个浏览器提供的方法，用于弹出一个对话框，显示一条消息，并且要求用户点击“确定”按钮才能继续操作。它的主要用途是向用户显示重要的提示信息或者简单的交互。

alert("欢迎访问我的网站！");

console.log()

console.log 是 JavaScript 的调试工具，用于在浏览器的开发者工具控制台（Console）中输出信息。它的主要用途是帮助开发者调试代码，查看变量的值、程序的执行流程等。 

console.log(value1, value2, ..., valueN);

 示例代码：

let name = "SherlockMa";
let age = 25;
console.log("姓名:", name, "年龄:", age);

-

JavaScript的数据类型和运算符简介

数字

  • 整数
  • 浮点数
  • 科学计数法： 1.123e3
  • 负数
  • NaN：not a number
  • Infinity：无穷

字符串

  • 'abc'，"abc"

布尔值

  • true，false

逻辑运算

  • && 全是真，则为真
  • || 一个是真，则为真
  • !  取反

比较运算符

  • =：赋值
  • ==：等于（值一样就是true）
  • ===：绝对等于（值一样且类型一样才是true）
  • 检查使用===进行判断
  • 须知NaN与所有数值都不相等，包括自己，使用isNaN()来判断NaN
  • 避免浮点数进行比较，存在精度问题： 
    Math.abs(1/3-(1-2/3))<0.00000001

null与undifined

null是定义但是没赋值，undifined是未定义

数组

其中可以放不同类型的元素

var arr = [1,2.3,'abc',"abc",NaN,null,true];

或者使用new Array定义：

new Array(1,2.3,'abc',"abc",NaN,null,true);

使用：

arr[0]

取下标越界只会显示undifined

对象

  • 每个属性之间使用逗号隔开，最后一个不需要
var person = {name: "qinjiang",age: 3,tags: ['js', 'java', 'web', '...']
}

使用：

person.name

-

JavaScript的严格检查模式

JavaScript语法非常随意，甚至用来避免因随意性导致错误的严格检查模式都用的随意，很像是ES6后随意加上去的

'use strict';
  1. 严格检查模式必须放在JavaScript的第一行
  2. IDEA中的JavaScript版本必须是ES6或者ES6+（虽然我现在不用IDEA）

严格检查模式下，let作为局部变量声明并不会报错，而var作为局部变量声明就会有下划线题示报错，所以最好使用：

  • var通常用作全局变量
  • let通常用作局部变量

-

JavaScript基础知识详解

String

在 JavaScript 中，字符串是一种基本数据类型，用于表示文本信息。字符串的常用用法包括字符串的创建、访问、拼接、查找、替换、截取等操作。

创建字符串

  1. 正常字符串使用单引号或者双引号包裹
  2. 可以使用转义字符\ 
// 字符串直接量
let str1 = "Hello, world!";
let str2 = 'JavaScript is fun.';// 使用 String 构造函数
let str3 = new String("This is a string object");

访问字符串中的字符

可以通过 charAt() 方法或方括号语法访问字符串中的单个字符。

let str = "Hello, world!";
console.log(str.charAt(0)); // 输出 "H"
console.log(str[7]);        // 输出 "w"

字符串的拼接

可以使用 + 运算符或 concat() 方法拼接字符串。

let str1 = "Hello, ";
let str2 = "world!";
let str3 = str1 + str2; // 使用 + 拼接
console.log(str3);      // 输出 "Hello, world!"let str4 = str1.concat(str2); // 使用 concat 方法
console.log(str4);           // 输出 "Hello, world!"

查找字符串中的字符 

可以使用 indexOf() 和 lastIndexOf() 方法查找字符或子字符串的位置。

let str = "Hello, world!";
console.log(str.indexOf("world")); // 输出 7
console.log(str.lastIndexOf("o")); // 输出 8

字符串的替换

可以使用 replace() 方法替换字符串中的字符或子字符串。

let str = "Hello, world!";
let newStr = str.replace("world", "JavaScript");
console.log(newStr); // 输出 "Hello, JavaScript!"

字符串的截取

可以使用 slice()、substring() 和 substr() 方法截取字符串。

let str = "Hello, world!";
console.log(str.slice(0, 5));     // 输出 "Hello"
console.log(str.substring(7));    // 输出 "world!"
console.log(str.substr(7, 5));    // 输出 "world"

字符串的大小写转换

可以使用 toUpperCase() 和 toLowerCase() 方法将字符串转换为大写或小写。

let str = "Hello, world!";
console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!"
console.log(str.toLowerCase()); // 输出 "hello, world!"

 字符串的长度

可以使用 length 属性获取字符串的长度。

let str = "Hello, world!";
console.log(str.length); // 输出 13

字符串的分割

可以使用 split() 方法将字符串分割为数组。

let str = "apple,banana,orange";
let fruits = str.split(","); // 使用逗号分割
console.log(fruits);         // 输出 ["apple", "banana", "orange"]

字符串的拼接为数组

可以使用 join() 方法将数组拼接为字符串。

let fruits = ["apple", "banana", "orange"];
let str = fruits.join(","); // 使用逗号拼接
console.log(str);           // 输出 "apple,banana,orange"

字符串的模板（ES6 新特性）

可以使用模板字符串（用反引号 ``）来嵌入表达式。

let name = "Kimi";
let age = 25;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出 "Hello, my name is Kimi and I am 25 years old."

-

数组

在 JavaScript 中，数组是一种用于存储多个值的集合数据结构，可以包含不同类型的元素（如数字、字符串、对象等）。数组提供了丰富的操作方法，用于添加、删除、查找、排序等操作。

数组的创建

数组可以通过直接量语法或构造函数 Array 创建。

// 使用直接量语法创建数组
let fruits = ["apple", "banana", "orange"];// 使用 Array 构造函数创建数组
let numbers = new Array(1, 2, 3, 4, 5);

访问数组元素

可以通过索引访问数组中的元素。数组索引从 0 开始。

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 输出 "apple"
console.log(fruits[2]); // 输出 "orange"

修改数组元素

可以通过索引直接修改数组中的元素。

let fruits = ["apple", "banana", "orange"];
fruits[1] = "grape"; // 修改索引为 1 的元素
console.log(fruits); // 输出 ["apple", "grape", "orange"]

添加元素

可以使用 push()（向数组末尾添加元素）和 unshift()（向数组开头添加元素）。

let fruits = ["apple", "banana"];
fruits.push("orange"); // 向末尾添加 "orange"
console.log(fruits);   // 输出 ["apple", "banana", "orange"]fruits.unshift("grape"); // 向开头添加 "grape"
console.log(fruits);     // 输出 ["grape", "apple", "banana", "orange"]

删除元素

可以使用 pop()（删除数组末尾的元素）和 shift()（删除数组开头的元素）。

let fruits = ["apple", "banana", "orange"];
let lastItem = fruits.pop(); // 删除末尾的 "orange"
console.log(lastItem);       // 输出 "orange"
console.log(fruits);         // 输出 ["apple", "banana"]let firstItem = fruits.shift(); // 删除开头的 "apple"
console.log(firstItem);         // 输出 "apple"
console.log(fruits);            // 输出 ["banana"]

查找元素

可以使用 indexOf()（查找元素的索引）和 includes()（检查数组是否包含某个元素）。

let fruits = ["apple", "banana", "orange"];
console.log(fruits.indexOf("banana")); // 输出 1
console.log(fruits.includes("grape")); // 输出 false

遍历数组

可以使用 for 循环、for...of 循环或 forEach() 方法遍历数组。

let fruits = ["apple", "banana", "orange"];// 使用 for 循环
for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);
}// 使用 for...of 循环
for (let fruit of fruits) {console.log(fruit);
}// 使用 forEach 方法
fruits.forEach(function(fruit) {console.log(fruit);
});

数组的排序

可以使用 sort() 方法对数组进行排序。默认情况下，sort() 方法会将数组元素转换为字符串并按字典顺序排序。

let numbers = [4, 2, 5, 1, 3];
numbers.sort(); // 默认按字典顺序排序
console.log(numbers); // 输出 [1, 2, 3, 4, 5]// 自定义排序（按数值大小排序）
numbers.sort(function(a, b) {return a - b;
});
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

数组的拼接

可以使用 concat() 方法将多个数组拼接为一个新数组。

let fruits1 = ["apple", "banana"];
let fruits2 = ["orange", "grape"];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // 输出 ["apple", "banana", "orange", "grape"]

数组的截取

可以使用 slice() 方法截取数组的一部分。

let fruits = ["apple", "banana", "orange", "grape"];
let slicedFruits = fruits.slice(1, 3); // 截取索引为 1 到 3（不包括 3）的元素
console.log(slicedFruits); // 输出 ["banana", "orange"]

arr.length

length 属性表示数组的长度，可以通过修改 length 属性来截断或扩展数组。

let arr = [1, 2, 3, 4, 5];
arr.length = 3; // 截断数组
console.log(arr); // 输出 [1, 2, 3]arr.length = 5; // 扩展数组，新位置的值为 undefined
console.log(arr); // 输出 [1, 2, 3, undefined, undefined]

arr.indexof(x)

通过元素获取下标索引

多维数组

// 使用嵌套数组字面量创建二维数组
let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];// 动态创建二维数组
let rows = 3;
let cols = 3;
let matrix2 = [];
for (let i = 0; i < rows; i++) {matrix2[i] = [];for (let j = 0; j < cols; j++) {matrix2[i][j] = i * cols + j + 1;}
}
console.log(matrix2);
// 输出 [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

可以通过多层索引访问多维数组中的元素。

let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];console.log(matrix[1][2]); // 输出 6

可以通过多层索引直接修改多维数组中的元素。

let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];matrix[1][2] = 10; // 修改第二行第三列的元素
console.log(matrix);
// 输出 [[1, 2, 3], [4, 5, 10], [7, 8, 9]]

-

对象

在 JavaScript 中，对象是一种非常重要的数据结构，用于存储键值对（key-value pairs）。对象可以用来表示复杂的数据结构，例如用户信息、配置选项等。

对象的创建

对象可以通过对象字面量语法或构造函数 Object 创建。

// 使用对象字面量语法创建对象
let person = {firstName: "John",lastName: "Doe",age: 30,hobbies: ["reading", "gaming", "traveling"],address: {street: "123 Main St",city: "Anytown",state: "CA"}
};// 使用 Object 构造函数创建对象
let person2 = new Object();
person2.firstName = "Jane";
person2.lastName = "Smith";
person2.age = 25;

访问对象的属性

可以通过点语法（.）或方括号语法（[]）访问对象的属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};// 使用点语法访问属性
console.log(person.firstName); // 输出 "John"// 使用方括号语法访问属性
console.log(person["lastName"]); // 输出 "Doe"

修改对象的属性

可以通过点语法或方括号语法直接修改对象的属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};// 修改属性
person.age = 31; // 使用点语法
person["lastName"] = "Smith"; // 使用方括号语法
console.log(person); // 输出 { firstName: "John", lastName: "Smith", age: 31 }

 添加新属性

可以通过点语法或方括号语法动态添加新属性。

let person = {firstName: "John",lastName: "Doe"
};// 添加新属性
person.age = 30; // 使用点语法
person["email"] = "john.doe@example.com"; // 使用方括号语法
console.log(person); // 输出 { firstName: "John", lastName: "Doe", age: 30, email: "john.doe@example.com" }

删除属性

可以使用 delete 操作符删除对象的属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};// 删除属性
delete person.age;
console.log(person); // 输出 { firstName: "John", lastName: "Doe" }

遍历对象的属性

可以使用 for...in 循环遍历对象的所有可枚举属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};for (let key in person) {console.log(key, person[key]);
}
// 输出：
// firstName John
// lastName Doe
// age 30

检查对象是否包含某个属性

可以使用 in 操作符或 hasOwnProperty() 方法检查对象是否包含某个属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};console.log("age" in person); // 输出 true
console.log(person.hasOwnProperty("firstName")); // 输出 true
console.log(person.hasOwnProperty("email")); // 输出 false

 对象的解构赋值

可以使用解构赋值语法从对象中提取属性并赋值给变量。

let person = {firstName: "John",lastName: "Doe",age: 30
};let { firstName, lastName, age } = person;
console.log(firstName, lastName, age); // 输出 John Doe 30

对象的键名和键值

可以使用 Object.keys()、Object.values() 和 Object.entries() 方法获取对象的键名、键值和键值对。

let person = {firstName: "John",lastName: "Doe",age: 30
};console.log(Object.keys(person)); // 输出 ["firstName", "lastName", "age"]
console.log(Object.values(person)); // 输出 ["John", "Doe", 30]
console.log(Object.entries(person)); // 输出 [["firstName", "John"], ["lastName", "Doe"], ["age", 30]]

属性名的类型：对象的键名可以是字符串或符号（Symbol），但通常使用字符串。 

let obj = {"key1": "value1",key2: "value2"
};
console.log(obj["key1"]); // 输出 "value1"
console.log(obj.key2); // 输出 "value2"

对象的遍历顺序：for...in 循环会遍历对象的所有可枚举属性，包括继承的属性。如果只想遍历对象自身的属性，可以结合 hasOwnProperty() 使用。

let obj = Object.create({ inherited: "value" });
obj.own = "property";
for (let key in obj) {if (obj.hasOwnProperty(key)) {console.log(key); // 输出 "own"}
}

-

流程控制

在 JavaScript 中，流程控制语句用于控制程序的执行顺序，包括条件语句（如 if、switch）、循环语句（如 for、while）以及跳转语句（如 break、continue、return）。这些语句是实现复杂逻辑和控制程序流程的基础工具。

条件语句

let score = 85;if (score >= 90) {console.log("Grade: A");
} else if (score >= 80) {console.log("Grade: B");
} else if (score >= 70) {console.log("Grade: C");
} else {console.log("Grade: F");
}

循环语句

while(age < 100){age = age + 1;
}
for(var num in arr){console.log(arr[num])
}

for...of 循环（ES6）

for...of 循环用于遍历可迭代对象（如数组、字符串等）。

let fruits = ["apple", "banana", "orange"];for (let fruit of fruits) {console.log(fruit);
}

for...in 循环

for...in 循环用于遍历对象的可枚举属性。

let person = {firstName: "John",lastName: "Doe",age: 30
};for (let key in person) {console.log(key, person[key]);
}

 数组的遍历 

var arr = [5,1,6,8,7,3,4,9];
arr.forEach(function(value){console.log(value)
})

-

map

Map 是一种内置的数据结构，用于存储键值对（key-value pairs）。与普通对象相比，Map 有以下特点：

  1. 键可以是任意类型：Map 的键可以是任何数据类型，包括对象、函数等，而普通对象的键只能是字符串或符号（Symbol）。

  2. 键值对的顺序：Map 会按照插入的顺序保存键值对，而普通对象的键是无序的。

  3. 迭代方便：Map 提供了多种迭代方法，如 forEach、keys、values 和 entries，方便遍历。

  4. 性能优化：对于频繁的插入和删除操作，Map 的性能通常优于普通对象。

创建 Map

可以通过 new Map() 构造函数创建一个空的 Map，也可以通过传入一个可迭代对象（如数组）初始化 Map。

// 创建一个空的 Map
let myMap = new Map();// 通过数组初始化 Map
let mapFromArray = new Map([["key1", "value1"],["key2", "value2"],[1, "number"],[true, "boolean"]
]);console.log(mapFromArray.get("key1")); // 输出 "value1"
console.log(mapFromArray.get(1));      // 输出 "number"

添加键值对

可以使用 set 方法向 Map 中添加键值对。

let myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set(true, "boolean");console.log(myMap); // 输出 Map(3) { 'key1' => 'value1', 'key2' => 'value2', true => 'boolean' }

获取键值对

可以使用 get 方法根据键获取对应的值。如果键不存在，get 方法返回 undefined。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);console.log(myMap.get("key1")); // 输出 "value1"
console.log(myMap.get("key3")); // 输出 undefined

检查键是否存在

可以使用 has 方法检查 Map 中是否存在某个键。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);console.log(myMap.has("key1")); // 输出 true
console.log(myMap.has("key3")); // 输出 false

 删除键值对

可以使用 delete 方法删除 Map 中的键值对。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);myMap.delete("key1");
console.log(myMap); // 输出 Map(1) { 'key2' => 'value2' }

清空 Map

可以使用 clear 方法清空 Map 中的所有键值对。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);myMap.clear();
console.log(myMap); // 输出 Map(0) {}

迭代 Map

Map 提供了多种迭代方法，包括 forEach、keys、values 和 entries。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);// 使用 forEach 遍历
myMap.forEach((value, key) => {console.log(key, value);
});
// 输出：
// key1 value1
// key2 value2// 使用 for...of 遍历键值对
for (let [key, value] of myMap.entries()) {console.log(key, value);
}
// 输出：
// key1 value1
// key2 value2// 使用 for...of 遍历键
for (let key of myMap.keys()) {console.log(key);
}
// 输出：
// key1
// key2// 使用 for...of 遍历值
for (let value of myMap.values()) {console.log(value);
}
// 输出：
// value1
// value2

获取 Map 的大小

可以使用 size 属性获取 Map 中的键值对数量。

let myMap = new Map([["key1", "value1"],["key2", "value2"]
]);console.log(myMap.size); // 输出 2

细节和注意事项

  1. 键的唯一性：Map 的键是唯一的，即使使用相同的值作为键，也会被视为不同的键。

  2. 键的比较：Map 使用严格相等（===）比较键，因此对象和数组作为键时，即使内容相同，也会被视为不同的键。

-

set

在 JavaScript 中，Set 是一种内置的数据结构，用于存储唯一的值。与数组不同，Set 中的每个值都是唯一的，不会出现重复。Set 提供了一系列方法来操作集合，例如添加、删除、检查是否存在等。它适用于需要去重或处理唯一值的场景。

创建 Set

可以通过 new Set() 构造函数创建一个空的 Set，也可以通过传入一个可迭代对象（如数组）初始化 Set。

// 创建一个空的 Set
let mySet = new Set();// 通过数组初始化 Set
let setFromArray = new Set([1, 2, 3, 4, 5]);
console.log(setFromArray); // 输出 Set(5) { 1, 2, 3, 4, 5 }

添加值

可以使用 add 方法向 Set 中添加值。如果值已经存在，则不会重复添加。

let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(1); // 重复值不会被添加console.log(mySet); // 输出 Set(3) { 1, 2, 3 }

检查值是否存在

可以使用 has 方法检查 Set 中是否存在某个值。

let mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // 输出 true
console.log(mySet.has(4)); // 输出 false

删除值

可以使用 delete 方法从 Set 中删除某个值。

let mySet = new Set([1, 2, 3]);
mySet.delete(2);
console.log(mySet); // 输出 Set(2) { 1, 3 }

清空 Set

可以使用 clear 方法清空 Set 中的所有值。

let mySet = new Set([1, 2, 3]);
mySet.clear();
console.log(mySet); // 输出 Set(0) {}

获取 Set 的大小

可以使用 size 属性获取 Set 中的值的数量。

let mySet = new Set([1, 2, 3]);
console.log(mySet.size); // 输出 3

迭代 Set

Set 提供了多种迭代方法，包括 forEach、keys、values 和 entries。由于 Set 中的值是唯一的，keys 和 values 方法返回的结果相同。

let mySet = new Set([1, 2, 3]);// 使用 forEach 遍历
mySet.forEach(value => {console.log(value);
});
// 输出：
// 1
// 2
// 3// 使用 for...of 遍历值
for (let value of mySet.values()) {console.log(value);
}
// 输出：
// 1
// 2
// 3// 使用 for...of 遍历键（与值相同）
for (let key of mySet.keys()) {console.log(key);
}
// 输出：
// 1
// 2
// 3// 使用 for...of 遍历键值对（键和值相同）
for (let [key, value] of mySet.entries()) {console.log(key, value);
}
// 输出：
// 1 1
// 2 2
// 3 3

细节和注意事项

  1. 值的唯一性：Set 中的值是唯一的，即使尝试添加相同的值，也不会重复。

  2. 值的比较：Set 使用严格相等（===）比较值，因此对象和数组作为值时，即使内容相同，也会被视为不同的值。

-

-

函数

定义与调用

定义函数

function 方法名称(参数){执行处理return 返回值;
}
  • 一旦执行到return，就会返回结果
  • 如果没有执行return，函数执行完也会返回结果，结果是undefined

使用匿名函数定义函数

var 变量名称 = function(参数){执行处理return 返回值;
}    // 这个相当于Java里的匿名内部类let 变量名称 = function(参数){执行处理return 返回值;
}    // 这个相当于Java里的匿名内部类

调用函数

函数名(参数)

示例

// 函数声明
function greet(name) {return "Hello, " + name + "!";
}// 函数表达式
var greet = function(name) {return "Hello, " + name + "!";
};// 函数表达式
let greet = function(name) {return "Hello, " + name + "!";
};// 调用方法
console.log(person.greet()); // 输出 "Hello, John Doe!"

参数问题：

  • JavaScript可以传入任意多个参数，也可以不传递参数

-

参数

默认参数

ES6 引入了默认参数值，可以在函数定义时指定参数的默认值。

function greet(name = "Guest") {return "Hello, " + name + "!";
}console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet("Kimi")); // 输出 "Hello, Kimi!"

- 

arguments

arguments 是一个类数组对象，用于访问函数的所有参数。它在函数体内自动可用，无需显式声明。arguments 对象的每个属性对应一个传递给函数的参数，索引从 0 开始。

JavaScript函数中并没有重载函数的功能，但是arguments可以实现（模拟）重载，有些函数功能的实现借助于arguments将会变得更容易理解（相较于不适用arguments的时候）

function sum() {let total = 0;for (let i = 0; i < arguments.length; i++) {total += arguments[i];}return total;
}console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(10, 20, 30, 40)); // 输出 100

- 

rest

rest 参数是 ES6 引入的一种新语法，使用 ... 表示。它可以将函数中多余的参数收集为一个数组，从而方便处理可变数量的参数。

  • 真正的数组：rest 参数是一个真正的数组，可以使用数组的所有方法（如 map、filter、forEach 等）。

  • ES6引入
  • rest只能写在最后面，必须用...标识
function ways(num1,num2,...rest){//rest只能写在最后console.log("num1=>"+num1);console.log("num2=>"+num2);console.log(rest);
}
function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(10, 20, 30, 40)); // 输出 100

- 

特性arguments 对象rest 参数
类型类数组对象真正的数组
语法自动可用，无需声明需要显式声明，使用 ... 语法
可读性较低，需要通过索引访问较高，可以直接使用数组方法
修改参数在非严格模式下可以修改参数值不能直接修改参数值，但可以修改数组内容
适用场景适用于处理可变数量的参数，但语法较繁琐适用于处理可变数量的参数，语法简洁且功能强大
性能性能稍差（因为它是类数组对象）性能更好（因为它是真正的数组）

 -

作用域

全部作用域

var 声明的变量具有函数作用域。如果变量在函数内部声明，它只在该函数内部有效；如果在函数外部声明，则为全局变量。

  • 在函数体内定义，则在函数体外不可使用。如：
function example() {var x = 10;console.log(x); // 输出 10
}
example();
console.log(x); // ReferenceError: x is not defined
  • 对于局部变量和全局变量在使用规范和习惯上都和Java一样
  • 内部函数可以访问外部函数的成员，反之不行
  • 内外重名，由内向外使用
  • var 声明的变量会被提升到函数或全局作用域的顶部，但初始化不会被提升。这意味着在声明之前访问变量会返回 undefined，即相当于开头就声明了；建议所有变量在开头定义，便于代码维护，如：
console.log(x); // 输出 undefined
var x = 10;
console.log(x); // 输出 10
function test(){var a = 1;console.log(a+b);var b = 1;
}
function test(){console.log(a+b);var a = 1;var b = 1;
}

全局变量绑定在window下面：

  • 所有的全局变量都会绑定在window对象（就是网页窗口）上，这样多段js代码的全局变量就若是相同就会冲突，需要定义唯一全局变量
  • 如果全局变量作用域都没有找到，报错ReferenceError
var x = 1;
alert(x);
alert(window.x)window.alert(window.x)

底层原理：把全局变量全部放入自己定义的唯一命名空间中，降低全局变量命名冲突的概率

// 定义唯一全局变量
var App = {};// 定义全局变量
App.name = "SherlockMa";
App.add = function(a, b){return a+b;
}

-

局部作用域

let 声明的变量具有块级作用域。它只在声明它的代码块（如 if 语句、for 循环等）内有效。

在for循环中，var出了循环还能使用，但let不行

function aaa(){for (let i = 0; i < 100; i++){console.log(i);}
}
if (true) {let x = 10;console.log(x); // 输出 10
}
console.log(x); // ReferenceError: x is not defined

 let 声明的变量也会被提升，但与 var 不同的是，let 声明的变量在声明之前处于“暂时性死区”（Temporal Dead Zone, TDZ），访问这些变量会抛出 ReferenceError。

console.log(x); // ReferenceError: x is not defined
let x = 10;
console.log(x); // 输出 10

-

特性varlet
作用域函数作用域或全局作用域块级作用域
变量提升提升到函数或全局作用域顶部，初始化不会提升提升到块的顶部，但处于暂时性死区（TDZ）
重复声明允许重复声明不允许重复声明
性能稍微低（因为作用域链查找）更高（因为块级作用域更明确）
适用场景旧代码、全局变量现代代码、局部变量

使用建议

  • 优先使用 let：let 提供了更严格的语法和更明确的作用域规则，有助于减少变量提升和作用域相关的错误。

  • 避免使用 var：除非需要兼容旧版本的 JavaScript，否则尽量避免使用 var。

- 

常量const

用const定义常量，并且常量名称要全大写

const PI = 3.14

-

方法

在 JavaScript 中，方法本质上是绑定到对象上的函数。方法的定义和调用与普通函数类似，但它们通常通过对象来调用。

使用对象字面量定义方法：在对象字面量中，方法是对象的属性，其值是一个函数。

let person = {firstName: "John",lastName: "Doe",greet: function() {return "Hello, " + this.firstName + " " + this.lastName + "!";}
};console.log(person.greet()); // 输出 "Hello, John Doe!"

拆开写，分别定义函数与方法

function Greet() {return "Hello, " + this.firstName + " " + this.lastName + "!";
}let person = {firstName: "John",lastName: "Doe",greet: Greet();
};console.log(person.greet()); // 输出 "Hello, John Doe!"

调用

  • apply 方法可以指定方法的 this 值，并传递参数，参数以数组的形式传递。
console.log(person.greet());     // 输出 "Hello, John Doe!"    // 标准方法console.log(greet.apply(person));     // 输出 "Hello, John Doe!"   // apply方法
console.log(greet.apply(person, []));   // apply方法，参数为空

-

-

内部对象

Date

获得有关时间的数据，像是现在的年、月、日、时、分、秒、周几、时间戳（从1970年1月1日00：00：00到现在的毫秒数）

var now = new Date();
now.getFullYear();    // 年
now.getMonth();    // 月
now.getDate();    // 日
now.Day();        // 星期几
now.getHours();    // 时
now.getMinutes();    // 分
now.getSeconds();    // 秒
now.getTime();    // 时间戳var d = new Date(1234567654);    // 时间戳转Date对象
now.toLocaleString    // 转当地时间
now.toGMTString        // 转GMT时间

-

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。它基于文本，完全独立于语言，但与 JavaScript 的语法非常相似，因此在 JavaScript 中处理 JSON 数据非常自然和方便。

JSON 的核心是一个字符串，它由属性-值对组成，这些属性-值对被封装在大括号 {} 中（对于对象）或方括号 [] 中（对于数组）。JSON 支持的数据类型包括字符串、数字、布尔值、数组、对象以及 null。它不支持复杂的数据类型，如函数、日期或未定义的值，这些需要在使用时进行转换或处理。

var user = {name: "sherlockMa",age: 3
};// 对象转JSON
var jsonUser = JSON.stringify(user);// JSON转对象
var obj = JSON.parse('{"name": "sherlockMa","age": 3}');

-

Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的开发技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交互并动态更新页面内容。这种技术的核心是通过 JavaScript 实现异步通信，从而提升用户体验，使网页应用更加流畅和响应迅速。

是原生的js写法，可以使用jQuery中的$("#name").ajax("")，现在推荐axios请求

-

-

面向对象

继承

原型继承

JavaScript的继承可用proto实现

子类.__proto__=父类;

示例：

var Student = {name: "Sher",age: 3,run: function(){console.log(this.name + "run ...");}
};var sherlockma = {name: "SherlockMa"
}
sherlockma.__proto__ = Student;

-

class继承

ES6 引入了 class 语法，使 JavaScript 的面向对象编程更加简洁和直观。class 是基于原型继承的语法糖，底层仍然是原型链机制。

使用 class 关键字定义类，并使用 constructor 方法初始化实例。

// 定义类
class Student{constructor(name){this.name = name;}hello(){alert('hello');}
}// 实例化
var sher = new Student('SherlockMa');// 继承
class XiaoStudent extends Student {constructor(name, age) {super(name);this.age = age;}sayAge(age) {console.log(age + 'years old');}
}// 实例化
var sher = new XiaoStudent ('SherlockMa', 99);
特性原型继承基于 class 的继承
语法使用 Object.create() 或直接操作 __proto__使用 class 和 extends
可读性较低，需要理解原型链较高，语法更接近传统面向对象语言
底层机制基于原型链基于原型链（语法糖）
性能稍微低（因为需要手动操作原型链）更高（因为语法更简洁，底层优化）
适用场景适用于需要灵活操作原型链的场景适用于现代 JavaScript 开发，更符合面向对象编程

使用建议

  • 优先使用 class：在现代 JavaScript 开发中，建议优先使用 class，因为它提供了更简洁的语法和更明确的继承机制。

  • 理解原型链：即使使用 class，也需要理解原型链的工作原理，因为底层仍然是基于原型链的。

-

BOM对象

BOM（Browser Object Model，浏览器对象模型）是 JavaScript 中用于操作浏览器窗口及其内容的一组对象。它提供了一系列的接口，允许开发者通过 JavaScript 与浏览器进行交互，包括控制窗口的大小、位置、状态，以及获取浏览器的信息等。

BOM 的核心对象是 window，它代表了浏览器窗口本身，同时也是全局对象。window 对象包含了许多属性和方法，用于操作浏览器窗口、文档、历史记录等。

  • window对象——JS最顶层对象，直接代表浏览器窗口
  • document对象——文档对象，在JavaScript中，代表整个HTML文档，可以进行写入、访问、修改等等
  • location对象——浏览器当前URL信息，用于获得当前页面的地址，并把浏览器重定向到新的页面。
    • 获取cookie
    • 获取具体的文档树节点
  • navigator——浏览器本身信息，可通过此得到浏览器名称、内核、版本、用户信息等等，可以知道浏览器客户端为手机端或者PC端等等
  • screen——客户端屏幕信息，像是屏幕大小（我的是1920*1080px）
  • history——浏览器访问历史信息！！

-

window

window 是 BOM 的核心对象，代表浏览器窗口。它包含了许多属性和方法，用于操作浏览器窗口及其内容。

  • window.innerWidth 和 window.innerHeight：获取浏览器窗口的宽度和高度。

  • window.innerWidth 和 window.innerHeight：获取浏览器窗口的宽度和高度。

  • window.screen.width 和 window.screen.height：获取屏幕的宽度和高度。

  • window.location：获取或设置当前窗口的 URL。

  • window.history：操作浏览器的历史记录。

  • window.open()：打开一个新的浏览器窗口。

  • window.close()：关闭当前浏览器窗口。

  • window.alert()：显示一个警告对话框。

  • window.confirm()：显示一个确认对话框。

  • window.prompt()：显示一个提示对话框。

// 获取窗口大小
console.log(window.innerWidth); // 输出窗口宽度
console.log(window.innerHeight); // 输出窗口高度// 获取屏幕大小
console.log(window.screen.width); // 输出屏幕宽度
console.log(window.screen.height); // 输出屏幕高度// 获取当前 URL
console.log(window.location.href);// 打开新窗口
let newWindow = window.open("https://example.com", "_blank");// 关闭窗口
// newWindow.close();// 显示警告对话框
window.alert("Hello, World!");// 显示确认对话框
let isConfirmed = window.confirm("Are you sure?");
console.log(isConfirmed); // 输出 true 或 false// 显示提示对话框
let userName = window.prompt("What is your name?");
console.log(userName); // 输出用户输入的内容

location 对象

location 对象是 window 的一个属性，用于获取和设置当前窗口的 URL。它提供了许多方法和属性，用于操作 URL。

  • location.href：获取或设置当前 URL。

  • location.protocol：获取当前 URL 的协议（如 http: 或 https:）。

  • location.host：获取当前 URL 的主机名和端口号。

  • location.pathname：获取当前 URL 的路径部分。

  • location.search：获取当前 URL 的查询字符串部分。

  • location.hash：获取当前 URL 的锚点部分。

  • location.assign(url)：加载一个新的文档。

  • location.reload()：重新加载当前文档。

  • location.replace(url)：用新的文档替换当前文档。

// 获取当前 URL
console.log(window.location.href);// 获取协议
console.log(window.location.protocol);// 获取主机名和端口号
console.log(window.location.host);// 获取路径部分
console.log(window.location.pathname);// 获取查询字符串部分
console.log(window.location.search);// 获取锚点部分
console.log(window.location.hash);// 加载新文档
window.location.assign("https://example.com");// 重新加载当前文档
window.location.reload();// 替换当前文档
window.location.replace("https://example.com");

history 对象

history 对象是 window 的一个属性，用于操作浏览器的历史记录。它允许开发者前进、后退或跳转到特定的历史记录项。

  • history.back()：返回上一页。

  • history.forward()：前进到下一页。

  • history.go(number)：跳转到指定的历史记录项。

  • history.pushState(state, title, url)：向历史记录中添加一个新条目。

  • history.replaceState(state, title, url)：替换当前历史记录条目。

// 返回上一页
window.history.back();// 前进到下一页
window.history.forward();// 跳转到指定的历史记录项
window.history.go(-2); // 返回两页// 添加一个新历史记录条目
window.history.pushState({ page: 1 }, "title 1", "?page=1");// 替换当前历史记录条目
window.history.replaceState({ page: 2 }, "title 2", "?page=2");

screen 对象

screen 对象是 window 的一个属性，用于获取屏幕的尺寸和颜色深度等信息。

  • screen.width：屏幕的宽度（以像素为单位）。

  • screen.height：屏幕的高度（以像素为单位）。

  • screen.availWidth：屏幕可用宽度（以像素为单位）。

  • screen.availHeight：屏幕可用高度（以像素为单位）。

  • screen.colorDepth：屏幕的颜色深度（以位为单位）。

// 获取屏幕宽度
console.log(window.screen.width);// 获取屏幕高度
console.log(window.screen.height);// 获取屏幕可用宽度
console.log(window.screen.availWidth);// 获取屏幕可用高度
console.log(window.screen.availHeight);// 获取屏幕颜色深度
console.log(window.screen.colorDepth);

navigator 对象

navigator 对象是 window 的一个属性，用于获取浏览器的信息，如浏览器的名称、版本、用户代理字符串等。

  • navigator.userAgent：用户代理字符串，包含浏览器的名称、版本等信息。

  • navigator.appName：浏览器的名称。

  • navigator.appVersion：浏览器的版本。

  • navigator.platform：运行浏览器的操作系统平台。

  • navigator.language：浏览器的语言设置。

// 获取用户代理字符串
console.log(window.navigator.userAgent);// 获取浏览器名称
console.log(window.navigator.appName);// 获取浏览器版本
console.log(window.navigator.appVersion);// 获取操作系统平台
console.log(window.navigator.platform);// 获取浏览器语言
console.log(window.navigator.language);

document 对象

虽然 document 对象属于 DOM（Document Object Model），但它也是 BOM 的一部分，因为它是 window 的一个属性。document 对象用于操作 HTML 文档的内容和结构。

  • document.getElementById(id)：通过 ID 获取元素。

  • document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。

  • document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素。

  • document.createElement(tagName)：创建一个新的元素。

  • document.createTextNode(text)：创建一个新的文本节点。

  • document.appendChild(node)：将一个节点追加到指定的父节点中。

  • document.removeChild(node)：从指定的父节点中移除一个子节点。

  • document.write(text)：向文档流中直接写内容。

// 获取元素
let element = document.getElementById("myElement");
console.log(element);// 获取第一个匹配的元素
let firstElement = document.querySelector(".myClass");
console.log(firstElement);// 获取所有匹配的元素
let elements = document.querySelectorAll(".myClass");
console.log(elements);// 创建新元素
let newDiv = document.createElement("div");
newDiv.textContent = "Hello, World!";
document.body.appendChild(newDiv);// 移除元素
document.body.removeChild(newDiv);// 向文档流中写内容
document.write("<p>Hello, World!</p>");

-

DOM对象

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口，它将文档表示为一个节点树，每个节点代表文档中的一个部分（如元素、属性或文本）。通过 DOM，开发者可以使用 JavaScript 动态地访问和操作文档的内容、结构和样式。

DOM 提供了一种结构化的文档表示方法，使得开发者可以通过编程方式访问和修改文档的各个部分。DOM 的核心是节点（Node），节点可以是元素（Element）、属性（Attribute）、文本（Text）等。这些节点组成了一个树形结构，称为 DOM 树。

获得DOM节点

获取元素的方法

  • document.getElementsByTagName(tagName)：返回一个包含所有指定标签名的元素的 HTMLCollection。
  • document.getElementById(id)：返回一个具有指定 ID 的元素。
  • document.getElementsByClassName(className)：返回一个包含所有指定类名的元素的 HTMLCollection。

操作 DOM 树

  • children：返回一个包含当前节点所有子节点的 HTMLCollection。
  • firstChild：返回当前节点的第一个子节点。
  • lastChild：返回当前节点的最后一个子节点。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM学习</title></head><body><div class="father"><h1 id="c">一级标题</h1><p id="p1">p1</p><p class="p2">p2</p></div><script>var h1 = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');var father = document.getElementById('father');var children = father.children;    // 获取父节点下所有的子节点// father.firstChild;    // 获取父节点下第一个子节点// father.lastChild;    // 获取父节点下最后一个子节点</script></body>
</html>

更新DOM节点

先用上述方法获得DOM节点id1，然后：

操作文本

  • id1.innerText="xxx"：修改文本的值
  • id1.innerHTML="<strong>XXX<\strong>"：修改为HTML能解析的值

操作js

  • id1.style.color="yellow";
  • id1.style.fontsize="20px";
  • id1.style.padding="2em";

删除DOM节点

若要删除此节点，要先获取此节点的父节点，然后移除掉此节点

<div class="father"><h1 id="c">一级标题</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var self = document.getElementById('p1');    // 要删除的节点var father = p1.parentElement;               // 获取当前节点father.removeChild(self);	                // 通过父节点删除father.removeChild(father.removeChild[0]);    // 删除第一个节点
</script>

插入DOM节点

直接对DOM节点进行修改会覆盖掉原来的内容。所以一般我们会追加节点或者创造节点

移动节点

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js');    // 获取id=jsvar list = document.getElementById('list')    // 获取id=listlist.append(js)        // 将js移动到list
</script>

创建节点并追加

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js');    // 获取id=jsvar list = document.getElementById('list')    // 获取id=list// 创建一个新节点var newP = document.createElement('p');newP.id = 'newP';newP.innerText = "SherlockMa";list.appendChild(newP)        // 放入list
</script>
特性appendChild()append()
参数类型只能接受一个节点（如元素、文本节点等）可以接受多个节点或字符串
返回值返回被添加的节点没有返回值
功能添加单个节点到父节点的末尾添加多个节点或字符串到父节点的末尾
兼容性在所有现代浏览器中都支持在较新的浏览器中支持（IE 不支持）

-

表单

操作表单

表单：

  • 文本框text
  • 下拉框select
  • 单选框radio
  • 多选框checkbox
  • 隐藏域hidden
  • 密码框password以及MD5加密
<form action="post"><p><span>用户名：</span><input type="text" id="username"></p><!-- 单选框 --><p><span>性别：</span><input type="radio" name="gender" value="man" id="boy"> 男<input type="radio" name="gender" value="woman" id="girl"> 女</p></form><script>var input_text = document.getElementById('username');var boy_ratio = document.getElementById('boy');var girl_ratio = document.getElementById('girl');// 得到输入框的值input_text.value// 修改值input_text.value = "123"// 对于单选框、多选框，.value只能得到固定值，使用.checked判断是否被选中boy_radio.checked;        // 查看是否被选中boy_radio.checked = true;
</script>

提交表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Title</title><script src="https>//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></head>
<body><form action="#" method="post"><p><span>用户名：</span><input type="text" id="username" name="username"></p><!-- 单选框 --><p><span>密码：</span><input type="password" id="password" name="password"></p><!--绑定事件 onclick被点击--><button type="submit" onclick="submit()">提交</button></form><script>function submit() {var uname = document.getElementById('username');var pwd = document.getElementById('password');// MD5算法加密pwd.value = md5(pwd.value);console.log(pwd.value);}
</script></body>
</html>

 -

-

jQuery

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档操作、事件处理、动画和 Ajax 交互，使得开发者能够以更简洁的代码实现复杂的网页功能。jQuery 的核心理念是“写得少，做得多”（Write Less, Do More），它通过封装复杂的 DOM 操作、事件处理和 Ajax 交互，帮助开发者更高效地完成开发任务。

jQuery的使用：

// selector以CSS的选择器方法进行选择
// action是事件，如click$(selector).action(function(){XXX;
};)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Title</title><script src="https>//cdn.bootcss.com/jquery/3.4.1/core.js"></head>
<body><a href="" id="test">点我</a><script>$('#test').click(function () {alert("hello, jQuery!");});
</script></body>
</html>

基础选择器selector

  • id选择器：#id
  • 标签选择器：element
  • 类选择器：.class

-

常用事件action

  • 点击click
  • 鼠标mouse

    • mouseover 和 mouseout：绑定鼠标悬停和移出事件。

    • mousemove：绑定鼠标移动事件。

  • 键盘key

    • keydown：绑定按键按下事件。

    • keypress：绑定按键事件（已废弃，建议使用 keydown 或 keyup）。

    • keyup：绑定按键释放事件。

下面代码实现了在指定 div 内移动鼠标时，实时更新鼠标的位置并显示在页面上。当用户在 div 内移动鼠标时，<span> 元素会实时显示鼠标的坐标，格式为 x: 100, y: 200。

  • $('#divMove').mousemove(function (e) { ... });：为 div 绑定 mousemove 事件。

  • e.pageX 和 e.pageY：分别表示鼠标相对于页面左上角的水平和垂直坐标。

  • $('#mouseMove').text('x: ' + e.pageX + ', y: ' + e.pageY);：将鼠标的位置更新到 <span> 元素中。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Title</title><script src="https>//cdn.bootcss.com/jquery/3.4.1/core.js"></head>
<body>mouse: <span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div><script>$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX+', y:'+e.pageY)});
</script></body>
</html>

在 JavaScript 和 jQuery 中，e 是一个常见的参数名，通常用于表示事件对象（Event Object）。当事件被触发时，浏览器会自动将一个事件对象传递给事件处理函数。这个事件对象包含了关于事件的详细信息，例如事件的类型、触发事件的元素、鼠标的位置、按键信息等。 

-

操作DOM

<ul id="test-ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul>

节点文本操作

$('#test-ul li[name=python]').text(); //获取值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获取值
$('#test-ul').html('<strong>123</strong>'); //设置值

 CSS的操作

$('#test-ul li[name=python]').css({"color", "red"})

元素的显示和隐藏：本质 display: none;

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

-

-

总结

JavaScript是一种高级的、解释型的编程语言，广泛应用于网页开发中，用于增强网页的交互性。它能够实现动态内容更新、表单验证、动画效果等。JavaScript可以在浏览器端运行，也可以在服务器端运行（例如使用Node.js）。它支持面向对象编程，并且具有事件驱动的特性，可以对用户的操作做出响应。

在网页中，JavaScript通常与HTML和CSS一起使用，HTML负责页面的结构，CSS负责页面的样式，而JavaScript负责页面的行为。它可以通过操作DOM（文档对象模型）来动态地修改网页内容和结构。此外，JavaScript还可以用于操作CSS，实现动态的样式变化，以及控制页面的显示和隐藏。

随着现代Web开发的发展，JavaScript的生态系统也在不断壮大，出现了许多流行的框架和库，如React、Angular和Vue.js，这些工具帮助开发者更高效地构建复杂的Web应用。此外，JavaScript也常用于开发跨平台的移动应用，例如使用React Native或Ionic。

总之，JavaScript是一种功能强大、灵活且广泛使用的编程语言，对于现代Web开发至关重要。

🌟 感谢您的陪伴！ 🌟

亲爱的朋友们，感谢您一直以来的支持和鼓励！👏

👍 点赞：如果您喜欢我们的内容，一个简单的点赞就能让我们知道您的心意，也是对我们最大的鼓励！

👥 关注：点击关注，不错过任何精彩瞬间。我们将持续为您带来有趣、有料、有价值的内容！

💼 收藏：如果您觉得我们的内容对您有帮助，不妨收藏起来，方便日后查阅，也让我们知道哪些内容最受欢迎！

您的每一次互动都是我们前进的动力。我们承诺，将继续努力，为您带来更多高质量的内容。感谢有您，让我们共同成长！

http://www.xdnf.cn/news/6557.html

相关文章：

  • C# Try Catch Finally 执行顺序是什么？有返回值呢？
  • Openlayers：如何注册一个新的坐标系统
  • web第二次课后作业--设计一个注册登录系统
  • MyBatis：从入门到深度理解
  • 从入门到实战：时序图核心知识与高效绘制全解析（附模板）
  • 如何利用芯片模型提升终端PCB的SIPI热仿真精度
  • 如何让open-mpi在不同版本的OS上运行
  • shell常用语法
  • 晶振的核心参数
  • 会计要素+借贷分录+会计科目+账户,几个银行会计的重要概念
  • 从 Vue3 回望 Vue2：组件设计升级——Options API vs Composition API
  • OpenResty Manager 介绍与部署（Docker部署）
  • C++算法（22）：二维数组参数传递，从内存模型到高效实践
  • ERP知识手册【第三弹：INV（库存管理）】
  • Windows软件插件-写mp3
  • 2021-10-25 C++三的倍数含五
  • 动态规划之数列
  • 前端缓存策略
  • 【数据结构】栈与队列
  • Redis6为什么引入了多线程？
  • 20、工业协议转换与数据采集中间件 (模拟) - /数据与物联网组件/protocol-converter-middleware
  • std::deque 底层实现结构
  • 老字号焕新案例：天猫代运营如何让传统品牌年轻化破圈
  • SEO双核驱动：关键词与长尾词优化
  • JAVA:多线程使用哈希表
  • Web前端入门：JavaScript 的应用领域
  • [数据结构]7. 堆-Heap
  • undefined reference to vtable for DeviceAllocator‘
  • 【补充笔记】修复“NameError: name ‘ZhNormalizer‘ is not defined”的直接方法
  • Python基础