It'sMyGo-优快云博客

原创一文速通HTML：常见的 HTML 元素及其属性详解

html>元素是所有 HTML 文档的根元素，包含了整个页面的内容。元素包含了关于文档的信息（元数据），如标题、样式表、脚本等。元素用于定义文档的标题，显示在浏览器的标签栏或标题栏中。元素包含了文档的可见内容，即用户在浏览器中看到的部分。元素表示一个段落，用于组织和显示文本内容。到表示不同级别的标题，为最高级别，为最低级别。表示语义上的重要性，内容会加粗显示。仅用于视觉上的加粗，无语义强调。

2024-10-16 00:15:00 2066

原创 Advanced CSS and Sass_学习记录_03_How CSS Works Behind the Scenes Part 1：层叠与特异性

*层叠（Cascade）**是指当一个元素同时受到多个CSS规则的影响时，浏览器需要决定哪些样式最终应用到该元素上。收集所有匹配的规则：浏览器收集所有与元素匹配的CSS规则。按照优先级排序：根据规则的重要性、特异性和来源顺序，排序这些规则。应用样式：按照排序结果，应用最高优先级的样式。!important声明的CSS规则具有最高优先级，但应谨慎使用，避免代码难以维护。内联样式的优先级高于外部或内部样式表中的样式。ID选择器的特异性高于类选择器，类选择器的特异性高于元素选择器。通配选择器（

2024-10-16 00:15:00 1817

原创 Advanced CSS and Sass_学习记录_04：How CSS Works Behind the Scenes Part 2：值的处理

计算值是指浏览器在处理CSS时，将相对单位（如百分比、emremvwvh等）转换为绝对单位（通常是像素）的过程。这个阶段确保了所有的CSS值在后续的布局和绘制过程中都是可计算和可比较的。使用值是指在布局计算过程中，浏览器根据计算值、盒模型和其他因素，确定元素在页面中的实际尺寸和位置所使用的值。

2024-10-16 00:15:00 968

原创 JavaScript中Iterator对象研究01_Iterator基本介绍_Iterator()构造函数_静态方法:from 实例方法:drop、every、filter、find、flatMap

*迭代器（Iterator）**是一个对象，它定义了一系列的值，并且提供了一个接口来按需依次访问这些值。迭代器协议为数据结构提供了一种统一的遍历机制。是一个静态方法，用于将一个可迭代对象或类数组对象转换为迭代器。drop()方法返回一个新的迭代器，跳过前n个元素，返回剩余的元素。every()方法测试是否所有元素都通过了提供的测试函数。它会遍历迭代器，直到测试函数返回false或迭代结束。filter()方法返回一个新的迭代器，包含所有通过测试函数的元素。find()

2024-10-15 00:15:00 1713

原创 JavaScript中Iterator对象研究02_实例方法:forEach、map、reduce、some、take、toArray

（迭代器辅助器提案）旨在为迭代器添加一系列实用的辅助方法，使得迭代器的操作更加方便。这些方法类似于数组的方法，但作用于迭代器，具有惰性求值的特点。forEach()方法对迭代器中的每个元素执行一次提供的函数。map()方法返回一个新的迭代器，对原迭代器中的每个元素执行提供的映射函数。reduce()方法对迭代器中的每个元素执行累加器函数，将其结果汇总为单个值。some()方法测试迭代器中是否至少有一个元素通过了提供的测试函数。take()方法返回一个新的迭代器，仅包含原迭代器的前n个元素。

2024-10-15 00:15:00 878

原创 JavaScript中异步迭代器对象AsyncIterator研究_基本介绍_使用

异步迭代器是一个对象，实现了一个返回Promise的next()方法，用于按顺序异步获取值。每次调用next()方法都会返回一个包含的 Promise。

2024-10-15 00:15:00 997

原创 JavaScript常用DOM API研究01_Document_三种getElemenet_两种querySelector

Document对象是浏览器中表示整个HTML文档的对象，是DOM树的根节点。通过document关键字，我们可以访问整个网页的DOM结构，获取或修改网页内容。方法返回对拥有指定id属性的第一个对象的引用。方法返回包含匹配指定类名的所有元素的实时集合。方法返回包含指定标签名的所有元素的实时集合。方法返回文档中与指定的CSS选择器匹配的第一个元素。方法返回文档中与指定的CSS选择器匹配的所有元素的静态NodeList集合。

2024-10-15 00:15:00 1057

原创 JavaScript常用DOM API研究详解02_createElement、createTextNode、appendChild、removeChild、replaceChild

方法用于创建指定的HTML元素。这是动态添加新元素的第一步，通过此方法可以创建任何有效的HTML标签。方法用于创建包含指定文本的文本节点。文本节点是DOM树中的叶节点，用于存储纯文本。方法用于将一个节点添加为指定父节点的最后一个子节点。此方法是将新创建的元素或文本节点插入到DOM中的主要方式。方法用于从DOM中删除指定的子节点。方法用于用一个新节点替换指定的子节点。：创建新的元素节点。：创建新的文本节点。：将节点添加为父节点的最后一个子节点。：从父节点中移除指定的子节点。

2024-10-15 00:15:00 1152

原创 JavaScript常用DOM API研究详解03_事件监听器_addEventListener_removeEventListener_常见事件及应用

事件是用户或浏览器执行的某种动作，可以被JavaScript捕获并作出响应。鼠标事件clickdblclickmouseovermouseoutmousemove等键盘事件keydownkeypresskeyup表单事件submitresetfocusblurchange窗口事件loadresizescrollunload事件监听器（也称为事件处理程序）是一个函数，当特定事件发生在某个元素上时，浏览器会调用该函数。通过添加事件监听器，我们可以在用户与网页交互时执行特定的代码。

2024-10-15 00:15:00 1098

原创 JavaScript常用DOM API研究详解04_Attribute操作(get set remove)_classList操作(add remove toggle contains)

在HTML中，属性是附加到标签上的额外信息，用于提供元素的附加信息或配置。例如，中的type和就是属性。方法用于获取指定属性的值。如果属性不存在，则返回null。方法用于设置指定属性的值。如果属性不存在，则创建该属性。方法用于删除指定的属性。classList是元素的类名列表，以对象的形式存在。它提供了一组方法，用于操作元素的class属性，比直接操作className更加方便和安全。add()方法用于向元素的class。

2024-10-15 00:15:00 590

原创 JavaScript常用DOM API研究详解05：innerHTML、textContent、style.property

innerHTMLinnerHTML：用于获取或设置元素的HTML内容，可以解析和插入HTML标签。需要注意安全问题，防止XSS攻击。：用于获取或设置元素的纯文本内容，不会解析HTML标签，安全性更高。：用于获取或设置元素的内联样式，通过操作style对象的属性，可以动态地更改元素的样式。

2024-10-15 00:15:00 792

原创 JavaScript常用DOM API研究详解06：parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling

在DOM中，文档的每个部分都是一个节点（Node）。元素节点：如等标签。文本节点：元素或属性中的文本。属性节点：元素的属性（在现代DOM中，属性作为元素的部分，通过访问）。注释节点-- 注释内容 -->。parentNodechildNodesfirstChild< div id = " container " > < p > 第一段 < p > 第二段 < p > 第三段

2024-10-15 00:15:00 1127

原创 JavaScript Math对象详解：常用静态方法介绍

在JavaScript编程中，Math对象是一个内置的全局对象，提供了一系列用于执行数学计算的属性和方法。Math对象不是构造函数，因此不能使用new关键字实例化。它的所有属性和方法都是静态的，可以直接通过Math对象调用。本文将详细介绍Math对象，以及一些常用的静态方法，帮助你在日常开发中更高效地处理数学运算。

2024-10-14 00:15:00 1785

原创 JavaScript Date对象详解：常用实例方法介绍

在JavaScript编程中，对象是用于处理日期和时间的内置对象。它提供了丰富的方法来创建、操作和格式化日期和时间。在Web开发、数据处理、日志记录等场景中，对象都扮演着重要的角色。本文将详细介绍对象的基本概念，以及一些常用的实例方法，帮助你在日常开发中更高效地处理日期和时间。有多种方式可以创建对象：创建一个表示当前日期和时间的对象。（2）使用时间戳传入自 1970年1月1日 00:00:00 UTC（Unix时间起点）以来的毫秒数。（3）字符串格式传入一个日期时间字符串，格式遵循ISO 8601标

2024-10-14 00:15:00 1533

原创 JavaScript中的String对象研究01_String基础介绍_String构造方法_静态方法:fromCharCode、fromCodePoint、raw

String对象用于表示和操作文本（字符串）。字符串字面量：使用单引号或双引号括起来的字符序列。String对象：使用String构造函数创建的新对象。方法返回由指定的Unicode码点序列创建的字符串。方法返回使用指定的码点序列创建的字符串，支持Unicode的全部码点，包括超出16位的字符。是用于处理模板字符串的一个标签函数，用于获取模板字符串的原始字符（未转义的字符串）。可以作为模板字符串的标签函数使用，也可以自定义自己的标签函数。${// 输出： // ["Hello\n", "

2024-10-14 00:15:00 683

原创 JavaScript中的String对象研究02_实例方法：at、charAt、charCodeAt、codePointAt、concat、endswith、includes、indexOf

at()方法根据指定的索引，返回字符串中对应的字符。它支持正负索引，负索引用于从字符串末尾倒数。charAt()方法返回字符串中指定位置的字符。方法返回字符串中指定位置字符的UTF-16代码单元值（0 到 65535 之间的整数）。方法返回字符串中指定位置字符的Unicode码点（支持大于0xFFFF的字符）。concat()方法将一个或多个字符串拼接起来，返回一个新的字符串。endsWith()方法用于判断当前字符串是否以指定的子字符串结尾，根据判断结果返回true或false。includes()

2024-10-14 00:15:00 1178

原创 JavaScript中的String研究03_实例方法：isWellFormed、lastIndexOf、localeCompare、match、matchAll、normalize、padEnd等

方法用于检查字符串是否是格式良好的Unicode字符串。如果字符串中不包含任何不匹配的代理对（surrogate pairs），则返回true；否则返回false。方法返回指定子字符串在字符串中最后一次出现的位置，如果未找到则返回-1。方法返回一个数字，指示参考字符串在排序时应该位于被比较字符串的前面、后面或相同位置。该方法使用特定语言环境的排序规则。match()方法用于检索字符串中匹配正则表达式的结果。matchAll()方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

2024-10-14 00:15:00 713

原创 JavaScript中的String研究04_实例方法：repeat、replace、replaceAll、search、slice、split、startsWith、subString

repeat()方法构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的原字符串副本。replace()方法返回一个新字符串，其中的某些模式（模式可以是子字符串或正则表达式）被替换为指定的替换值。方法返回一个新字符串，所有匹配的子字符串或正则表达式都被指定的替换值替换。search()方法执行正则表达式搜索，返回匹配项在字符串中的索引位置，如果未找到则返回-1。slice()方法提取字符串的片段，并返回一个新的字符串，不修改原字符串。split()

2024-10-14 00:15:00 978

原创 JavaScript中的String研究05：实例方法——toLowerCase、toUpperCase、trim、trimEnd、trimStart、toString、valueOf

方法返回调用该方法的字符串转换为小写后的新字符串。方法返回调用该方法的字符串转换为大写后的新字符串。trim()方法从字符串的两端去除空白字符，返回一个新的字符串。trimEnd()方法从字符串的末尾去除空白字符，返回一个新的字符串。也称为，两者等价。方法从字符串的开头去除空白字符，返回一个新的字符串。也称为trimLeft()，两者等价。toString()方法返回指定对象的字符串表示形式。valueOf()方法返回指定对象的原始值，对于String对象，返回其对应的原始字符串值。

2024-10-14 00:15:00 1051

原创 JavaScript中Map对象研究_Map基本介绍_Map()构造函数_实例方法：clear、delete、get、set、has、entries、keys、values、forEach

Map对象是ES6（ECMAScript 2015）引入的一种新的数据结构，用于存储键值对。与传统的对象不同，Map的键可以是任何类型的值，包括对象、函数、基本类型等。clear()方法移除Map对象中的所有键值对。delete()方法移除Map对象中与指定键对应的键值对。get()方法返回Map对象中与指定键对应的值。如果不存在该键，返回undefined。set()方法在Map对象中添加或更新一个键值对。has()方法返回一个布尔值，表示Map对象中是否存在指定的键。entries()方法返回一个新的。

2024-10-14 00:15:00 2345

原创 JavaScript中Set对象研究01_Set基本介绍_实例方法:add、clear、delete、difference、has、entries、keys、values、forEach、union

Set对象是ES6（ECMAScript 2015）引入的一种新的集合数据结构，用于存储唯一值的有序列表。Set中没有键值对，只有值（value），且每个值在集合中只能出现一次，这意味着Set内部不会有重复的值。add()方法向Set对象添加一个指定的值，如果该值已存在，则不会发生任何变化。clear()方法移除Set对象中的所有元素。delete()方法从Set对象中移除指定的元素。has()方法返回一个布尔值，表示Set对象中是否存在指定的值。entries()方法返回一个新的Iterator。

2024-10-14 00:15:00 1445

原创 JS Set研究02_2024实例方法：(symmetric)difference、intersection、isDisjointFrom、isSubsetOf、isSupersetOf、union

Set对象用于存储唯一值的集合。之前，我们需要手动编写函数来实现集合的并集、交集、差集等操作。ES2024为Set对象添加了新的实例方法，使得这些操作变得更加直观和高效。集合运算union()集合关系判断union()方法返回一个新的Set对象，包含调用Set对象和提供的可迭代对象的所有元素（即并集）。方法返回一个新的Set对象，包含调用Set对象和提供的可迭代对象的公共元素（即交集）。方法返回一个新的Set对象，包含所有存在于调用Set对象但不存在于提供的可迭代对象的元素（即差集）。方法返回一个新的。

2024-10-14 00:15:00 1956

原创 JavaScript中WeakMap研究_WeakMap基本介绍_WeakMap()构造函数_实例方法：delete、get、has、set

WeakMap是ES6（ECMAScript 2015）引入的一种新的集合类型，用于存储键值对，其中键必须是对象，值可以是任意类型。与Map不同的是，WeakMap中的键是弱引用，这意味着键所引用的对象可以被垃圾回收，即使它存在于WeakMap中。set()方法在WeakMap对象中添加或更新一个键值对。get()方法返回WeakMap对象中与指定键对应的值。如果不存在该键，返回undefined。has()方法返回一个布尔值，表示WeakMap对象中是否存在指定的键。delete()方法移除。

2024-10-14 00:15:00 1004

原创 JavaScript中WeakSet研究_WeakSet基本介绍_WeakSet()构造函数_实例方法：add、delete、has

WeakSet是ES6（ECMAScript 2015）引入的一种新的集合类型，用于存储对象的集合，并且这些对象都是弱引用。弱引用的含义是，如果没有其他引用指向集合中的对象，垃圾回收器可以自动回收这些对象，而不会因为它们存在于WeakSet中而阻止回收。add()方法向WeakSet对象添加一个新对象。delete()方法从WeakSet对象中删除指定的对象。has()方法返回一个布尔值，表示WeakSet对象中是否存在指定的对象。

2024-10-14 00:15:00 913

原创 JavaScript错误对象研究及基本介绍01：Error、AggregateError、EvalError、RangeError

Error对象是所有错误类型的基类。它可以用来表示通用的错误，并可通过throw语句抛出。try {throw new CustomError('这是一个自定义错误');// 输出: CustomError: 这是一个自定义错误对象表示一组错误。当需要同时抛出多个错误时，可以使用。它在处理多个承诺（Promise）或异步操作时特别有用。EvalError对象在使用eval()函数时发生错误时被抛出。然而，在现代JavaScript中，EvalError通常不会被抛出，因为eval()

2024-10-13 00:15:00 1153

原创 JavaScript错误对象研究及基本介绍02_ReferenceError_SyntaxError_TypeError_URIError

对象在尝试引用一个未声明的变量或作用域中不存在的变量时抛出。它表示在引用（访问）一个不存在的变量时发生的错误。对象在解析代码时发生语法错误时抛出。它表示代码在语法上不符合 JavaScript 语言规范，无法被解析。TypeError对象在变量或参数不是预期类型时抛出，或者当使用的值不符合预期类型时发生错误。try {// 输出: TypeError: Cannot read property 'property' of nullURIError对象在全局的 URI 处理函数（decodeURI。

2024-10-13 00:15:00 1018

原创 Advanced CSS and Sass_学习记录_Natours_03_按钮动画_::after_z-index_animation-fill-mode知识点

在class05中学习了按钮的动画效果，包括::after伪元素、属性和z-index属性。

2024-10-13 00:15:00 1531

原创 JavaScript全局函数研究_手写模仿实现_02：decodeURI、decodeURIComponent、encodeURI、encodeURIComponent

函数用于对整个URI进行编码，它会保留URI中具有特殊含义的字符，例如?等。这些字符在URI中具有分隔作用，不应被编码。函数用于编码URI的组件（参数值、路径片段等）。它会编码所有非字母数字字符，包括保留的字符。这确保了组件在URI中传输时不会破坏URI的结构。函数用于解码由编码的URI。它会将编码的部分转换回原始字符。函数用于解码由编码的URI组件。和用于对整个URI进行编码和解码，保留URI中的分隔符和保留字符。和用于对URI的组件进行编码和解码，编码范围更广。编码时，将非保留字符转换为。

2024-10-12 00:15:00 1343

原创 Javascript中Function对象研究_01_Function()构造函数_实例方法_手写模拟实现_apply_bind_call_研究_[Symbol.hasInstance]()

Function构造函数用于创建一个新的函数对象。直接使用Function构造函数创建函数并不常见，因为它会使代码难以维护，但理解其工作原理有助于更深入地了解JavaScript的函数机制。apply()方法调用一个函数，具有指定的this值和参数数组。call()方法调用一个函数，具有指定的this值和单独提供的参数列表。bind()方法创建一个新的函数，在调用时将this关键字设置为提供的值，在调用新函数时，给定的参数列表将置于实参之前。是一个内置的Symbol，指向一个函数，当使用。

2024-10-12 00:15:00 942

原创 JavaScript基本对象Symbol研究_03_静态属性：replace、search、species、split、toPrimitive、toStringTag、unscopables

方法指定了当对象被用于方法时的替换逻辑。也就是说，当你在字符串上调用replace()方法，并将一个对象作为第一个参数传入时，如果该对象具有方法，那么会调用该方法来执行替换。// 输出: Hello JavaScript!方法用于指定当对象被用于方法时的搜索逻辑。当在字符串上调用search()方法，并将一个对象作为参数传入时，如果该对象具有方法，则会调用该方法。// 输出: 6属性用于创建派生对象时，指定返回对象的构造函数。它主要用于内置对象（如ArrayMapPromise。

2024-10-12 00:15:00 976

原创 JavaScript对象(Object)研究_06_实例方法_hasOwnProperty_isPrototypeOf_propertyisEnumerable_toString_valueOf

方法用于判断对象自身（不包括原型链）是否具有指定的属性。它是所有对象从继承的一个方法。方法用于判断一个对象是否存在于另一个对象的原型链上。它同样是所有对象从继承的方法。方法用于判断对象自身的某个属性是否可枚举。可枚举属性可以在for...in循环或中被枚举出来。toString()方法返回对象的字符串表示形式。默认情况下，返回。这个方法经常被重写，以提供更有意义的字符串表示。valueOf()方法返回对象的原始值表示。JavaScript在需要将对象转换为原始值时会调用valueOf()

2024-10-11 00:15:00 797

原创 JavaScript全局函数研究_手写模仿实现_01：eval、isFinite、isNaN、parseFloat、parseInt

eval()函数接收一个字符串作为参数，将其作为JavaScript代码执行。它可以动态地执行字符串形式的代码，这在某些动态场景下非常有用。然而，由于安全和性能问题，通常不建议使用eval()。isFinite()函数用于判断一个值是否为有限数值。当参数转换为数字类型后，如果是有限数字，则返回true，否则返回false。isNaN()函数用于判断一个值是否为NaN（非数字值）。当参数转换为数字后，如果结果是NaN，则返回true，否则返回false。函数解析一个字符串参数，并返回一个浮点数。

2024-10-11 00:15:00 1854

原创 JavaScript基本对象Symbol研究_02_静态属性：asyncIterator、hasInstance、isConcatSpreadable、match、matchAll

是一个内置的Symbol值，指定了对象的默认异步迭代器方法。使用循环时，会调用这个方法，以获取异步迭代器。方法用于自定义instanceof运算符的行为。当使用instanceof检查一个对象是否为某个构造函数的实例时，会调用该构造函数的方法。instanceof是一个布尔值属性，表示一个对象是否可以在方法中展开。默认情况下，数组在concat()中会被展开，而非数组则不会。方法决定了对象是否可以被方法匹配。当使用时，如果obj有方法，则会调用该方法。// 输出: true。

2024-10-11 00:15:00 645

原创 JavaScript中BigInt对象研究：基础介绍、BigInt()构造函数、静态方法asIntN、asUintN

BigInt是一种内置的数值数据类型，用于表示任意精度的整数。它突破了Number类型的限制，能够表示非常大的整数，而不会因为精度不足而产生误差。width：位宽，指定整数的位数。bigint：要截断的BigInt值。返回一个截断到指定位宽的有符号整数。width：位宽，指定整数的位数。bigint：要截断的BigInt值。返回一个截断到指定位宽的无符号整数。

2024-10-11 00:15:00 1532

原创 JavaScript对象(Object)研究_04_getOwnPropertyNames_getOwnPropertySymbols_getPrototypeOf_groupBy_hasOwn

方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 属性）组成的数组。也就是说，它返回对象自身的所有属性名，包括不可枚举的属性，但不包括继承的属性和 Symbol 属性。方法返回一个由指定对象自身的所有 Symbol 属性键组成的数组。方法返回指定对象的原型（即内部[[Prototype]]属性的值）。这对于了解对象的继承关系和原型链非常有用。${this// 输出: true`);// 输出: true。

2024-10-10 00:15:00 1153

原创 JavaScript对象(Object)研究_05_is、isExtensible、isFrozen、isSealed、keys、preventExtensions、seal

方法判断两个值是否是同一个值。它类似于严格比较运算符（===），但在处理NaN和+0-0时有所不同。方法判断一个对象是否是可扩展的（即是否可以向对象添加新的属性）。方法判断一个对象是否被冻结。冻结的对象不能添加新属性，不能删除或修改已有属性，属性的可配置性、可写性都被设置为false。方法判断一个对象是否被密封。密封的对象不能添加新属性，不能删除已有属性，但可以修改属性的值。方法返回一个由给定对象自身可枚举属性组成的数组，属性名以字符串形式表示。方法让一个对象变得不可扩展，也就是不能再添加新的属性。

2024-10-10 00:15:00 742

空空如也

空空如也