JavaScript笔记_1

基础知识

变量(Variable)、函数(Function)、运算符(Operator)、条件语句(Conditional)、事件(Event)、循环(Loop)、对象(Object)。

变量

可以通过let或var关键字来声明变量，但是建议尽可能多地使用let。

let myVariableA;
var myVariableB;

变量类型

在JS中，变量类型包括：Number、String、Boolean、Array和Object
通过使用typeof操作符，可以获得一个变量的类型：

let myNumber = 500;
typeof myNumber;

在模板字面量中，可以在${ }中包装 JavaScript 变量或表达式，其结果将被包含在字符串中：

const one = "你好，";
const two = "请问最近如何？";
const joined = `${one}${two}`;
console.log(joined); // "你好，请问最近如何？"

事件

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

注意事项

请不要在 HTML 中内联 JS 处理器，如：<button onclick="createParagraph()">点我！</button>，这将使 JS 污染 HTML，而且效率低下。
请使用addEventListener，如：

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}

函数

匿名函数与箭头函数

/* 匿名函数, 写法: function() {} */
document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

/* 箭头函数, 写法: () => {} */
document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

回调函数

To do…

Web API

Web Storage API

Web Storage 包含两种机制：

• sessionStorage：页面会话期间可用（包括页面重新加载和恢复），浏览器关闭后清除。
• localStorage：即使浏览器关闭后，重新打开也仍然存在，只能通过 JS、清除浏览器缓存等方法来清除。
  可通过Window.sessionStorage和Window.localStorage使用。

DOM

选择元素

选择 DOM 元素的方法有：Document.querySelector()、Document.querySelectorAll()、Document.getElementById()和Document.getElementsByTagName()，前两者是更现代的方法。

创建并放置新的节点

Document.createElement()方法可以创建一个新的 DOM 元素，这之后，可以用Node.appendChild()方法将新创建的元素作为另一个元素的子节点加入。

移动和删除元素

Node.appendChild()方法会将传入方法的元素下移至底部（此方法不会产生元素的副本，因为传入的是对该元素唯一副本的引用，如果想要复制元素，请使用Node.cloneNode()）。如果想要移除某一个子节点，请使用Node.removeChild()方法；如果要删除一个仅基于自身引用的节点，请使用Element.remove()，这在一些较久的浏览器中不受支持，可以先获取该元素的父结点，然后再调用removeChild()：element.parentNode.removeChild(element)。

操作 CSS 样式

第一种方法是直接将内联样式添加到你想动态样式的元素上，这是通过HTMLElement.style属性实现的：

para.style.color = "white";
para.style.backgroundColor = "black";
para.style.padding = "10px";
para.style.width = "250px";
para.style.textAlign = "center";

还可以使用Document.stylesheets()可以获得一个附加在文档上的所有样式表的列表，它返回一个包含CSSStyleSheet对象的类数组。

数组

JS 中的数组可以存放任一类型的元素，比如：myArray = [true, "2", 3, [4]]。
JS 中的数组可以看作是双端队列，支持四种操作：push、pop、shift和unshift。

可能是有用的小知识？

JavaScript 中的真值与假值

JavaScript 中的值，除定义为假值的 false、0、-0、On、""、null、undefined和NaN之外，其他值均为真值。

没有初始值的变量

在 JavaScript 中，没有声明初始值的变量，默认为undefined。

JavaScript 的加载

将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
或者使用defer属性：<script src="script.js" defer></script>，它告知浏览器在遇到<script>元素时继续下载 HTML 内容。

• 使用defer属性加载的脚本将按照它们在页面上出现的顺序加载。在页面内容全部加载完毕之前，脚本不会运行，如果脚本依赖于 DOM 的存在（例如，脚本修改了页面上的一个或多个元素），这一点非常有用。
  也可以使用async属性：<script src="script.js" async></script>。
• 浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但是，一旦下载完成，脚本就会执行，从而阻止页面渲染。脚本的运行次序无法控制。当页面的脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async是最理想的选择。

CSS 部分

CSS 选择器

此处仅作简单介绍，更多选择器相关知识请移步MDN文档——CSS选择器

基本选择器

• 通用选择器：选择所有元素。*, ns|*, *|*
• 元素选择器：按照给定的节点名称，选择所有匹配的(html)元素。例如：input匹配任何<input>元素。
• 类选择器：按照给定的类名称，选择所有匹配的元素。例如：.index匹配任何class属性中含有 “index” 类的元素。
• ID 选择器：按照id属性选择一个与之匹配的元素。例如：#toc匹配 ID 为 “toc” 的元素。
• 属性选择器：按照给定的属性的名称(与属性的值)，选择所有匹配的元素。例如：[autoplay]选择所有具有autoplay属性的元素。

---

希望本文章能够帮到您~