JavaScript

1. 基本数据类型

  1. 字符串（String） - 用于表示文本数据。

    1
    let greeting = "Hello, World!";

  2. 数字（Number） - 用于表示数值，包括整数和浮点数。

    1
    2
    let number = 42;
    let pi = 3.14;

  3. 布尔值（Boolean） - 用于表示真或假。

    1
    2
    let isJavaScriptFun = true;
    let isCodingHard = false;

  4. 空值（Null） - 表示空值或者不存在的值。

    1
    let emptyValue = null;

  5. 未定义（Undefined） - 表示未赋值的变量或缺少值。

    1
    let undefinedValue;

  6. 对象（Object） - 可以存储多个值的容器，使用键值对表示。

    1
    2
    3
    4
    5
    let person = {
        name: "Alice",
        age: 30,
        isStudent: false
    };

  7. 数组（Array） - 用于在单个变量中存储多个值。

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

  8. 符号（Symbol） - 用于创建唯一的标识符。

2. 比较运算符

JavaScript中的比较运算符用于比较两个值，并返回一个布尔值（true或false）

  1. 相等（==） - 检查两个值是否相等，会进行类型转换。

    1
    2
    3
    let a = 10;
    let b = "10";
    console.log(a == b); // true

  2. 全等（===） - 检查两个值是否严格相等，不会进行类型转换。

    1
    2
    3
    let a = 10;
    let b = "10";
    console.log(a === b); // false

  3. 不相等（!=） - 检查两个值是否不相等，会进行类型转换。

    1
    2
    3
    let a = 10;
    let b = "10";
    console.log(a != b); // false

  4. 不全等（!==） - 检查两个值是否严格不相等，不会进行类型转换。

    1
    2
    3
    let a = 10;
    let b = "10";
    console.log(a !== b); // true

  5. 大于（>） - 检查左侧的值是否大于右侧的值。

    1
    2
    3
    let a = 5;
    let b = 3;
    console.log(a > b); // true

  6. 小于（<） - 检查左侧的值是否小于右侧的值。

    1
    2
    3
    let a = 5;
    let b = 3;
    console.log(a < b); // false

  7. 大于等于（>=） - 检查左侧的值是否大于或等于右侧的值。

    1
    2
    3
    let a = 5;
    let b = 5;
    console.log(a >= b); // true

  8. 小于等于（<=） - 检查左侧的值是否小于或等于右侧的值。

    1
    2
    3
    let a = 5;
    let b = 3;
    console.log(a <= b); // false

3. 基本数据类型的常用方法

==字符串（String）：==

  • length：返回字符串的长度。

    1
    2
    let str = "Hello, World!";
    console.log(str.length); // 13

  • toUpperCase()：将字符串转换为大写字母形式。

    1
    2
    let str = "hello";
    console.log(str.toUpperCase()); // "HELLO"

  • toLowerCase()：将字符串转换为小写字母形式。

    1
    2
    let str = "WORLD";
    console.log(str.toLowerCase()); // "world"

  • charAt(index)：返回指定索引位置的字符。

    1
    2
    let str = "JavaScript";
    console.log(str.charAt(4)); // "S"

  • substring(startIndex, endIndex)：返回位于 startIndex 和 endIndex 之间的子字符串。

    1
    2
    let str = "Hello, World!";
    console.log(str.substring(7, 12)); // "World"

数字（Number）

toFixed(n)：将数值转换为字符串，保留n位小数。

1
2
let num = 3.1415926;
console.log(num.toFixed(2)); // "3.14"

toString()：将数值转换为字符串。

1
2
let num = 42;
console.log(num.toString()); // "42"

数组

  1. **push()**：向数组末尾添加一个或多个元素，并返回新的长度。

    1
    2
    3
    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // [1, 2, 3, 4]

  2. **pop()**：移除并返回数组的最后一个元素。

    1
    2
    3
    let arr = [1, 2, 3];
    let removedElement = arr.pop();
    console.log(removedElement); // 3

  3. **join()**：将数组中所有元素连接成一个字符串，使用指定的分隔符。

    1
    2
    let arr = ["apple", "orange", "banana"];
    console.log(arr.join(", ")); // "apple, orange, banana"

  4. **concat()**：用于合并两个或多个数组。

    1
    2
    3
    4
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    let newArr = arr1.concat(arr2);
    console.log(newArr); // [1, 2, 3, 4, 5, 6]

  5. **reverse()**：颠倒数组中元素的顺序。

    1
    2
    3
    let arr = [1, 2, 3, 4, 5];
    arr.reverse();
    console.log(arr); // [5, 4, 3, 2, 1]

  6. **slice()**：从已有的数组中返回选定的元素。

    1
    2
    3
    let arr = [1, 2, 3, 4, 5];
    let slicedArr = arr.slice(1, 3);
    console.log(slicedArr); // [2, 3]

  7. **splice()**：向/从数组中添加/删除项目，然后返回被删除的项。

    1
    2
    3
    let arr = [1, 2, 3, 4, 5];
    arr.splice(2, 1, 'a', 'b');
    console.log(arr); // [1, 2, 'a', 'b', 4, 5]

  8. **indexOf()**：返回数组中搜索值的第一个索引。

    1
    2
    let arr = [10, 20, 30, 40, 50];
    console.log(arr.indexOf(30)); // 2

  9. **unshift()**：压入到头部

  10. **shift()**：弹出头部的一个元素

  11. **sort()**：排序

对象

JavaScript的对象是一种复合数据类型，用于存储和组织多个值（属性）并对其进行操作。对象可以包含基本数据类型、其他对象以及函数。

创建对象

有几种创建对象的方式：

  1. 使用对象字面量：
1
2
3
4
5
6
7
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};
  1. 使用构造函数：
1
2
3
4
5
6
7
8
9
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

let person = new Person("John", 30);
访问对象属性和方法

可以使用点号或者方括号来访问对象的属性和方法：

1
2
3
console.log(person.name); // 输出: John
console.log(person['age']); // 输出: 30
person.greet(); // 输出: Hello, my name is John
修改和添加属性

对象的属性是可变的，可以动态修改和添加属性：

1
2
person.name = "Alice"; // 修改属性值
person.job = "Engineer"; // 添加新属性
删除属性

使用 delete 关键字可以删除对象的属性：

1
delete person.age; // 删除age属性
原型

所有的 JavaScript 对象都有一个原型。可以使用原型来实现属性和方法的继承。

1
2
3
4
5
6
7
8
function Student(name, age, school) {
  this.school = school;
}
Student.prototype = new Person();

let student = new Student("Bob", 20, "ABC School");
student.greet(); // 继承自Person对象的greet方法

对象方法

对象也可以包含方法，方法是在对象中定义的函数。这些方法可以访问和修改对象的属性，甚至创建新属性。

1
2
3
4
5
6
7
8
9
let car = {
  brand: "Toyota",
  model: "Camry",
  start: function() {
    console.log("Starting the " + this.brand + " " + this.model);
  }
};
car.start(); // 输出: Starting the Toyota Camry

4. 严格检查模式

  1. 语法：

    1
    use strict;

  2. 作用：预防js的随意性导致产生的一些问题。

  3. 注意：必须写在js的第一行，局部变量建议都使用let定义。

5. 流程控制

JavaScript中的流程控制用于根据条件或循环执行不同的代码块。主要有条件语句和循环语句两种类型。

条件语句

1. if语句

1
2
3
4
5
6
7
8
let num = 10;
if (num > 0) {
console.log("Number is positive");
} else if (num < 0) {
console.log("Number is negative");
} else {
console.log("Number is zero");
}

2. switch语句

1
2
3
4
5
6
7
8
9
10
11
let day = 3;
switch (day) {
case 1:
 console.log("Monday");
 break;
case 2:
 console.log("Tuesday");
 break;
default:
 console.log("Other day");
}

循环语句

1. for循环

1
2
3
for (let i = 0; i < 5; i++) {
console.log("Index " + i);
}

2. while循环

1
2
3
4
5
let count = 0;
while (count < 5) {
console.log("Count is " + count);
count++;
}

3. do…while循环

1
2
3
4
5
let x = 0;
do {
console.log("x is " + x);
x++;
} while (x < 5);

4. forEach循环（数组方法）

1
2
3
4
let colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
console.log(color);
});

5. for…in循环（对象属性遍历）

1
2
3
4
let person = {name: 'Alice', age: 25};
for (let key in person) {
console.log(key + ': ' + person[key]);
}

跳出循环

使用break关键字可以跳出当前循环，continue关键字可以跳过当前迭代。

1
2
3
4
5
6
7
8
9
for (let i = 0; i < 5; i++) {
if (i === 3) {
 continue; // 跳过值为3的迭代
}
console.log(i);
if (i === 4) {
 break; // 跳出循环
}
}

6. Map 和 Set

JavaScript的Map

Map是一种新的数据结构，用于存储键值对。它提供了更灵活的方式来处理键值对集合。

创建Map

1
2
3
let person = new Map();
person.set('name', 'John');
person.set('age', 30);

获取和修改值

1
2
console.log(person.get('name')); // 输出: John
person.set('age', 31); // 修改值

遍历Map

1
2
3
4
5
6
7
for (let [key, value] of person) {
console.log(key + ': ' + value);
}
// 或者使用forEach方法
person.forEach(function(value, key) {
console.log(key + ': ' + value);
});

删除键值对

1
person.delete('age'); // 删除'age'

JavaScript的Set

Set是一种新的数据结构，用于存储唯一值，不允许重复。

创建Set

1
2
3
4
let colors = new Set();
colors.add('red');
colors.add('green');
colors.add('blue');

检查值是否存在

1
console.log(colors.has('red')); // 输出: true

删除值

1
colors.delete('green');

遍历Set

1
2
3
colors.forEach(function(color) {
console.log(color);
});

Map和Set的比较

  • Map：适合存储键值对，可以根据键快速查找对应的值。
  • Set：适合存储不重复的值，可以用来去除数组中的重复项或者检查值是否存在。

应用场景

  • 使用Map存储对象的属性和对应的值，方便动态增删改查。
  • 使用Set进行数组元素的去重或者检查特定值是否存在。

7. 函数

JavaScript的函数

函数是JavaScript中的一等公民，可以被赋值给变量、作为参数传递和作为返回值返回。函数可以帮助我们封装和组织代码，使其可重用。

声明函数

1
2
3
function greet(name) {
console.log("Hello, " + name);
}

函数表达式

1
2
3
let greet = function(name) {
console.log("Hello, " + name);
};

箭头函数

1
2
3
let greet = (name) => {
console.log("Hello, " + name);
};

函数参数

默认参数

1
2
3
4
function greet(name = "Anonymous") {
console.log("Hello, " + name);
}
greet(); // 输出: Hello, Anonymous

Rest参数

1
2
3
4
5
6
7
8
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
 total += num;
}
return total;
}
console.log(sum(1, 2, 3)); // 输出: 6

函数作用域

全局作用域

1
2
3
4
5
6
let globalVar = "I'm global";

function test() {
console.log(globalVar); // 可以访问全局变量
}
test();

函数作用域

1
2
3
4
5
6
function test() {
let localVar = "I'm local";
console.log(localVar); // 只能在函数内部访问
}
test();
// console.log(localVar); // 会报错，无法访问localVar

闭包

1
2
3
4
5
6
7
8
9
10
11
function outerFunction() {
let outerVar = "I'm outer";

function innerFunction() {
 console.log(outerVar); // 内部函数可以访问外部函数的变量
}
return innerFunction;
}

let innerFunc = outerFunction();
innerFunc(); // 输出: I'm outer

函数作为对象的方法

1
2
3
4
5
6
7
8
let person = {
name: "Alice",
greet: function() {
 console.log("Hello, my name is " + this.name);
}
};

person.greet(); // 输出: Hello, my name is Alice

高阶函数

1
2
3
4
5
6
7
8
function greaterThan(n) {
return function(value) {
 return value > n;
};
}

let greaterThan10 = greaterThan(10);
console.log(greaterThan10(15)); // 输出: true

8. Data类

JavaScript 的 Date 类

JavaScript 中的 Date 类用于处理日期和时间。它可以用来获取当前日期和时间，创建特定日期的实例，以及进行日期和时间的操作。

1. 获取当前日期和时间

1
2
const currentDate = new Date();
console.log(currentDate);

2. 创建特定日期的实例

1
2
const specificDate = new Date('2023-12-25T10:30:00');
console.log(specificDate);

3. 获取年、月、日、时、分、秒

1
2
3
4
5
6
7
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth(); // 返回值从 0 到 11
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

4. 格式化日期

1
2
3
const date = new Date();
const formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
console.log(formattedDate);

5. 计算日期间隔

1
2
3
4
5
const today = new Date();
const futureDate = new Date('2023-12-25');
const timeDiff = Math.abs(futureDate.getTime() - today.getTime());
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
console.log(`距离 2023 年 12 月 25 日还有 ${daysDiff} 天`);

9. JSON

JSON（JavaScript Object Notation）

JSON 是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。

1. 将对象转换为 JSON 字符串

1
2
3
const myObj = { name: 'John', age: 30, city: 'New York' };
const myJSON = JSON.stringify(myObj);
console.log(myJSON);

2. 将 JSON 字符串转换为对象

1
2
3
const jsonStr = '{"name":"John","age":30,"city":"New York"}';
const myObj = JSON.parse(jsonStr);
console.log(myObj.name);

3. 处理复杂结构的 JSON 数据

1
2
3
4
5
6
7
8
9
10
11
const complexObj = {
name: 'Alice',
age: 25,
address: {
 street: '123 Main St',
 city: 'Anytown'
},
hobbies: ['hiking', 'reading']
};
const complexJSON = JSON.stringify(complexObj);
console.log(complexJSON);

4. 错误处理

1
2
3
4
5
6
7
try {
const invalidJSON = '{"name":"Bob","age":}';
const obj = JSON.parse(invalidJSON);
console.log(obj);
} catch (error) {
console.error('Invalid JSON format:', error);
}

10. 面向对象编程

在ES6中，JavaScript引入了class关键字来实现面向对象编程。使用class语法，可以更清晰地定义对象和对象之间的关系，并支持继承、构造函数和方法的定义。

定义类和创建对象

下面是一个使用ES6 class语法定义类和创建对象的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 定义一个Person类
class Person {
// 构造函数，在创建对象时调用
constructor(name, age) {
 this.name = name;
 this.age = age;
}

// 类的方法
greet() {
 console.log(`Hello, my name is ${this.name}`);
}
}

// 创建Person对象
const person1 = new Person('Alice', 30);

// 访问对象的属性和调用方法
console.log(person1.name); // 输出: Alice
person1.greet(); // 输出: Hello, my name is Alice

继承

ES6 class语法还支持通过extends关键字实现类的继承。下面是一个继承的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 定义一个Student类，继承自Person
class Student extends Person {
constructor(name, age, grade) {
 super(name, age); // 调用父类构造函数
 this.grade = grade;
}

study() {
 console.log(`${this.name} is studying in grade ${this.grade}`);
}
}

// 创建Student对象
const student1 = new Student('Bob', 18, 12);

// 调用继承的方法和自有方法
student1.greet(); // 输出: Hello, my name is Bob
student1.study(); // 输出: Bob is studying in grade 12

静态方法

在ES6中，可以使用static关键字定义静态方法，这些方法属于类本身而不是实例化的对象。

1
2
3
4
5
6
7
8
class MathUtil {
static add(x, y) {
 return x + y;
}
}

// 调用静态方法
console.log(MathUtil.add(5, 3)); // 输出: 8

以上是使用ES6标准进行面向对象编程的基本概念和示例代码。ES6引入的class语法使得JavaScript的面向对象编程更加直观和易于理解。

11. 操作BOM对象

JavaScript的BOM（浏览器对象模型）提供了访问和操作浏览器窗口的能力，以及一些与浏览器交互的功能。下面给出一些常见的BOM对象的操作示例代码：

1. 窗口操作

1
2
3
4
5
6
7
8
9
// 打开新窗口
window.open('https://www.example.com', '_blank');

// 关闭当前窗口
window.close();

// 获取当前窗口尺寸
let width = window.innerWidth;
let height = window.innerHeight;

2. 定时器

1
2
3
4
5
6
7
// 设定定时器
let timerId = setTimeout(() => {
console.log('定时器触发');
}, 2000);

// 清除定时器
clearTimeout(timerId);

3. 历史记录

1
2
3
4
5
// 后退
window.history.back();

// 前进
window.history.forward();

4. 导航

1
2
3
4
5
// 跳转到指定URL
window.location.href = 'https://www.example.com';

// 重新加载页面
window.location.reload();

5. 屏幕信息

1
2
3
4
5
6
7
// 获取屏幕宽度和高度
let screenWidth = window.screen.width;
let screenHeight = window.screen.height;

// 获取可用工作区宽度和高度
let availWidth = window.screen.availWidth;
let availHeight = window.screen.availHeight;

6. 事件监听

1
2
3
4
5
6
7
// 添加窗口大小变化事件监听
window.addEventListener('resize', () => {
console.log('窗口大小发生改变');
});

// 移除事件监听
window.removeEventListener('resize', eventHandler);

7. Cookie操作

1
2
3
4
5
6
7
8
// 设置Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 读取所有的Cookie
let allCookies = document.cookie;

// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

8. 对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 警告对话框
window.alert("这是一个警告！");

// 确认对话框
let result = window.confirm("你确定要执行此操作吗？");
if (result) {
// 执行相关操作
} else {
// 取消操作
}

// 提示框
let userInput = window.prompt("请输入你的姓名", "默认值");
console.log("用户输入的内容：" + userInput);

9. 屏幕滚动

1
2
3
4
5
6
7
8
9
// 滚动到页面顶部
window.scrollTo(0, 0);

// 平滑滚动到页面某个位置
window.scroll({
top: 100,
left: 0,
behavior: 'smooth'
});

10. 定位

1
2
3
4
5
6
// 获取当前窗口相对于屏幕的X、Y坐标
let x = window.screenX;
let y = window.screenY;

// 移动当前窗口到指定位置
window.moveBy(100, 100);

12. 操作DOM对象

JavaScript的操作DOM（文档对象模型）对象使我们可以访问、更新和修改网页中的元素和内容。以下是一些常见的DOM操作示例代码：

1. 选择元素

1
2
3
4
5
6
7
8
9
10
11
12
// 通过ID选择元素
let elementById = document.getElementById('myElement');

// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClass');

// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('div');

// 通过CSS选择器选择元素
let elementBySelector = document.querySelector('.myClass');
let elementsBySelectorAll = document.querySelectorAll('.myClass');

2. 创建新元素

1
2
3
4
5
6
// 创建一个新的段落元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新创建的段落';

// 添加到文档中
document.body.appendChild(newParagraph);

3. 更新和删除元素

1
2
3
4
5
6
7
// 更新元素内容
elementById.textContent = '新的内容';

// 移除子元素
let parentElement = document.getElementById('parent');
let childElement = document.getElementById('child');
parentElement.removeChild(childElement);

4. 修改样式

1
2
3
// 修改元素样式
elementById.style.color = 'red';
elementById.style.fontSize = '20px';

5. 事件处理

1
2
3
4
5
6
7
// 添加事件监听器
elementById.addEventListener('click', () => {
console.log('单击事件触发');
});

// 移除事件监听器
elementById.removeEventListener('click', eventHandlerFunction);

6. 获取和修改属性

1
2
3
4
5
// 获取属性值
let hrefValue = elementById.getAttribute('href');

// 设置属性值
elementById.setAttribute('title', '新的标题');

7. 遍历和操作子元素

1
2
3
4
5
6
7
8
// 获取父元素下的所有子元素
let parentElement = document.getElementById('parent');
let children = parentElement.children;

// 遍历子元素并进行操作
for (let i = 0; i < children.length; i++) {
children[i].style.color = 'blue';
}

8. 文档节点操作

1
2
3
4
5
6
7
8
9
// 创建文本节点
let textNode = document.createTextNode('这是一个文本节点');

// 添加文本节点到元素
elementById.appendChild(textNode);

// 替换文本节点
let newText = document.createTextNode('替换后的文本');
elementById.replaceChild(newText, textNode);

9. 元素尺寸和位置

1
2
3
4
5
6
7
// 获取元素的尺寸
let elementWidth = elementById.offsetWidth;
let elementHeight = elementById.offsetHeight;

// 获取元素的位置
let elementPosition = elementById.getBoundingClientRect();
console.log('元素的左上角坐标：', elementPosition.left, elementPosition.top);

10. 表单处理

1
2
3
4
5
6
7
8
// 获取表单输入值
let inputValue = document.getElementById('inputField').value;

// 设置表单输入值
document.getElementById('inputField').value = '新的数值';

// 提交表单
document.getElementById('myForm').submit();

11. 数据存储

1
2
3
4
5
6
7
// 使用localStorage存储数据
localStorage.setItem('username', 'john_doe');
let storedUsername = localStorage.getItem('username');

// 使用sessionStorage存储数据
sessionStorage.setItem('theme', 'dark');
let currentTheme = sessionStorage.getItem('theme');

12. 内容过滤和修改

1
2
3
4
5
6
7
8
9
// 获取元素的HTML内容
let htmlContent = elementById.innerHTML;

// 设置元素的HTML内容
elementById.innerHTML = '<strong>新的</strong>HTML内容';

// 过滤和修改内容
let filteredContent = sanitizeHTML('<script>alert("XSS攻击");</script>');
elementById.innerHTML = filteredContent;

13. 拖放操作

1
2
3
4
5
6
7
8
9
10
// 拖动事件监听
elementById.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text', event.target.id);
});

// 放置目标的事件监听
document.getElementById('dropTarget').addEventListener('drop', (event) => {
let data = event.dataTransfer.getData('text');
event.target.appendChild(document.getElementById(data));
});

14. 动态加载资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 动态加载外部脚本
function loadScript(url) {
return new Promise((resolve, reject) => {
 let script = document.createElement('script');
 script.src = url;
 script.onload = resolve;
 script.onerror = reject;
 document.head.appendChild(script);
});
}

loadScript('path/to/external/script.js')
.then(() => {
 console.log('外部脚本加载成功');
})
.catch(() => {
 console.error('外部脚本加载失败');
});

15. 创建复杂的DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建一个包含多个子元素的复杂结构
let complexStructure = `
<div class="container">
 <h2>标题</h2>
 <p>这是一个段落</p>
 <ul>
   <li>列表项1</li>
   <li>列表项2</li>
 </ul>
</div>
`;

// 将复杂结构添加到文档中
document.body.insertAdjacentHTML('beforeend', complexStructure);

16. 克隆元素

1
2
3
4
// 克隆元素
let originalElement = document.getElementById('original');
let clonedElement = originalElement.cloneNode(true); // 参数为true表示深度克隆，包括子元素
document.body.appendChild(clonedElement);

17. 获取和设置元素位置

1
2
3
4
5
6
7
8
// 获取元素相对于视口的位置
let elementRect = elementById.getBoundingClientRect();
console.log('元素相对于视口的位置：', elementRect.top, elementRect.left);

// 设置元素的绝对定位
elementById.style.position = 'absolute';
elementById.style.top = '100px';
elementById.style.left = '50px';

18. 操作表格

1
2
3
4
5
6
7
8
// 创建表格和表格行
let table = document.createElement('table');
let row1 = table.insertRow(0);
let cell1 = row1.insertCell(0);
cell1.textContent = '单元格1';

// 添加表格到文档中
document.body.appendChild(table);

13. Jquery

JavaScript中的jQuery是一个广泛使用的库，用于简化DOM操作和事件处理。下面我将详细讲解一些常见的jQuery操作，并给出相应的实例代码。

引入jQuery

首先，我们需要在HTML文件中引入jQuery库。可以通过以下CDN地址引入：

1
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

或者从本地文件引入：

1
<script src="path/to/jquery.js"></script>

选择器

使用标签名选择元素

1
$('p') // 选择所有 <p> 元素

使用类名选择元素

1
$('.example') // 选择所有类名为 example 的元素

使用ID选择元素

1
$('#unique') // 选择ID为 unique 的元素

事件处理

点击事件

1
2
3
$('#myButton').click(function() {
// 点击按钮时执行的操作
});

鼠标悬停事件

1
2
3
4
5
$('#myElement').hover(function() {
// 鼠标悬停时执行的操作
}, function() {
// 鼠标移出时执行的操作
});

DOM操作

修改文本内容

1
$('#myElement').text('新的文本内容');

修改HTML内容

1
$('#myElement').html('<strong>加粗</strong>');

隐藏元素

1
$('#myElement').hide();

显示元素

1
$('#myElement').show();

动画效果

淡入淡出

1
2
$('#myElement').fadeIn();
$('#myElement').fadeOut();

滑动效果

1
2
$('#myElement').slideDown();
$('#myElement').slideUp();

AJAX

发送GET请求

1
2
3
$.get('url', function(data) {
// 成功时的操作
});

发送POST请求

1
2
3
$.post('url', {data: 'value'}, function(data) {
// 成功时的操作
});

14. Ajax

什么是AJAX技术？

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，通过后台异步加载数据、更新部分页面内容的技术。它使用JavaScript和XML（现在通常使用JSON）来实现。

AJAX的基本流程

  1. 创建XMLHttpRequest对象
  2. 发送请求
  3. 服务器处理请求
  4. 接收响应
  5. 更新页面

实例代码

1. 创建XMLHttpRequest对象

1
var xhr = new XMLHttpRequest();

2. 发送GET请求并处理响应

1
2
3
4
5
6
7
8
9
10
11
12
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // 对响应进行处理
    } else {
      // 处理错误
    }
  }
};
xhr.send();

3. 发送POST请求并处理响应

1
2
3
4
5
6
7
8
9
10
11
12
13
xhr.open('POST', 'example.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // 对响应进行处理
    } else {
      // 处理错误
    }
  }
};
xhr.send('data=example');

4. 使用Fetch API发送GET请求并处理响应

1
2
3
4
5
6
7
8
9
10
fetch('example.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // 对数据进行处理
  })
  .catch(function(error) {
    // 处理错误
  });

5. 使用Fetch API发送POST请求并处理响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ data: 'example' })
})
  .then(function(response) {
    return response.text();
  })
  .then(function(data) {
    // 对数据进行处理
  })
  .catch(function(error) {
    // 处理错误
  });

14. axios

什么是Axios技术？

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js的请求发送。它提供了一种简洁优雅的方式来处理HTTP请求，并支持Promise API。

Axios的基本用法

安装Axios

可以通过npm安装Axios：

1
npm install axios

或者在HTML页面中引入Axios的CDN：

1
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

发送GET请求并处理响应

1
2
3
4
5
6
7
axios.get('https://api.example.com/data')
.then(function (response) {
 console.log(response.data);
})
.catch(function (error) {
 console.error(error);
});

发送POST请求并处理响应

1
2
3
4
5
6
7
8
9
axios.post('https://api.example.com/postData', {
 data: 'example'
})
.then(function (response) {
 console.log(response.data);
})
.catch(function (error) {
 console.error(error);
});

设置请求头信息

1
axios.defaults.headers.common['Authorization'] = 'Bearer token';

并发请求

1
2
3
4
5
6
7
8
9
10
11
axios.all([
axios.get('https://api.example.com/data1'),
axios.get('https://api.example.com/data2')
])
.then(axios.spread(function (response1, response2) {
 console.log(response1.data);
 console.log(response2.data);
}))
.catch(function (error) {
 console.error(error);
});

创建实例

1
2
3
4
5
6
7
8
9
10
11
12
const instance = axios.create({
baseURL: 'https://api.example.com/',
timeout: 1000,
headers: {'X-Custom-Header': 'value'}
});
instance.get('/data')
.then(function (response) {
 console.log(response.data);
})
.catch(function (error) {
 console.error(error);
});

拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios.interceptors.request.use(function (config) {
// 在请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

JavaScript-导入导出

js提供的导入导出机制，可以实现按需导入

  1. 方式一

    1. image-20240226193510556

    2. image-20240226193519846

  2. 导入导出时，可以使用as关键字重命名。

  3. 方式二

    1. image-20240226194334304