js_JavaScript学习记录

最新推荐文章于 2022-07-09 17:48:56 发布

YAYA776

最新推荐文章于 2022-07-09 17:48:56 发布

阅读量519

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/YAYA776/article/details/104612325

版权

前端知识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

<head> 或 <body> 中的 JavaScript
能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本
脚本可放置与外部文件中：
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：

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

可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释：外部脚本不能包含 <script> 标签。

JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容。
提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()
出于测试目的，使用 document.write() 比较方便。
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML 。
提示：document.write() 方法仅用于测试。

使用 window.alert()
您能够使用警告框来显示数据。

使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

JavaScript 语句
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。

分号分隔 JavaScript 语句。
如果有分号分隔，允许在同一行写多条语句。
以分号结束语句不是必需的，但仍然建议这么做。

JavaScript 代码块
JavaScript 语句可以用花括号（{…}）组合在代码块中。
代码块的作用是定义一同执行的语句。

JavaScript 关键词

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

JavaScript 语法
JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

JavaScript 注释
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
JavaScript 标识符

标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。

变量 lastName 和 lastname，是两个不同的变量。
JavaScript 不会把 VAR 或 Var 译作关键词 var。

JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。

JavaScript 变量
JavaScript 变量是存储数据值的容器。
构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

JavaScript 运算符
JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。

JavaScript 字符串值
字符串（或文本字符串）是一串字符（比如 “Bill Gates”）。
字符串被引号包围。您可使用单引号或双引号。
可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配。

JavaScript 数值
JavaScript 只有一种数值类型。
写数值时用不用小数点均可。
超大或超小的数值可以用科学计数法来写。
JavaScript 数值始终是 64 位的浮点数。

JavaScript 布尔值
布尔值只有两个值：true 或 false。

JavaScript 数组
JavaScript 数组用方括号书写。
数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

JavaScript 对象
JavaScript 对象用花括号来书写。
对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

typeof 运算符
可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型。
typeof 运算符返回变量或表达式的类型
typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象。

Undefined
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

空值
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。

var car = "";                // 值是 ""，类型是 "string"

Null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
可以通过设置值为 null 清空对象。

var person = null;           // 值是 null，但是类型仍然是对象
// 可以通过设置值为 undefined 清空对象
var person = undefined;     // 值是 undefined，类型是 undefined

Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

原始数据
原始数据值是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

复杂数据
typeof 运算符可返回以下两种类型之一：

function
object

typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array")
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

函数调用
函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

访问没有 () 的函数将返回函数定义

用作变量值的函数
函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

JavaScript 对象
JavaScript 对象是被命名值的容器。

对象属性
（JavaScript 对象中的）名称:值对被称为属性。

对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。（方法是作为属性来存储的函数。）

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词
在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。

访问对象属性
能够以两种方式访问属性：

objectName.propertyName
或者
objectName["propertyName"]
例子：
person.lastName;
person["lastName"];

访问对象方法

objectName.methodName()
例子：
name = person.fullName();

如果不使用 () 访问 fullName 方法，则将返回函数定义。

请不要把字符串、数值和布尔值声明为对象！
如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       // 把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

字符串方法和属性
原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。
但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。

字符串长度
length 属性返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引。
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);     //返回pos =51
var pos1 = str.lastIndexOf("China", 50);  //返回pos =17

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

检索字符串中的字符串
search() 方法搜索特定值的字符串，并返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

这两种方法indexOf() 与 search()是不相等的。区别在于：

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

提取部分字符串
有三种提取部分字符串的方法：

slice(start, end)
substring(start, end)
substr(start, length)

slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
如果某个参数为负，则从字符串的结尾开始计数。
如果省略第二个参数，则该方法将裁剪字符串的剩余部分，
或者从结尾计数。

substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
如果首个参数为负，则从字符串的结尾计算位置。
第二个参数不能为负，因为它定义的是长度。

替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配：
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
var n1 = str.replace(/Microsoft/g, "W3School");

请注意正则表达式不带引号。
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

转换为大写和小写
通过 toUpperCase() 把字符串转换为大写：

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

通过 toLowerCase() 把字符串转换为小写。

concat() 方法
concat() 连接两个或多个字符串：
concat() 方法可用于代替加运算符。

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

String.trim()
trim() 方法删除字符串两端的空白符：

var str = "       Hello World!        ";
alert(str.trim());

提取字符串字符
这是两个提取字符串字符的安全方法：

charAt(position)
charCodeAt(position)

charAt() 方法
charAt() 方法返回字符串中指定下标（位置）的字符串。

charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H
str.charCodeAt(0);         // 返回 72

把字符串转换为数组
可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组。

JavaScript 数字
NaN - 非数值
NaN 属于 JavaScript 保留词，指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）
可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数。
NaN 是数，typeof NaN 返回 number

Infinity
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
除以 0（零）也会生成 Infinity。
Infinity 是数：typeOf Infinity 返回 number。

Number 方法和属性
原始值（比如 3.14 或 2016），无法拥有属性和方法（因为它们不是对象）。
但是通过 JavaScript，方法和属性也可用于原始值，因为 JavaScript 在执行方法和属性时将原始值视作对象。

toString() 方法
toString() 以字符串返回数值。

toExponential() 方法
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

toFixed() 方法
toFixed() 返回字符串值，它包含了指定位数小数的数字。

toPrecision() 方法
toPrecision() 返回字符串值，它包含了指定长度的数字。

valueOf() 方法
valueOf() 以数值返回数值。

全局方法
JavaScript 全局方法可用于所有 JavaScript 数据类型。
这些是在处理数字时最相关的方法：

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

JavaScript 数组
通过 JavaScript，可通过引用数组名来访问完整数组：

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

数组元素可以是对象
JavaScript 变量可以是对象。数组是特殊类型的对象。
正因如此，可以在相同数组中存放不同类型的变量。
可以在数组保存对象。您以在数组中保存函数。甚至可以在数组中保存数组。
length 属性返回数组的长度（数组元素的数目）。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;

遍历数组元素
遍历数组的最安全方法是使用 “for” 循环：

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

也可以使用 Array.foreach() 函数：

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
 
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
 
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

添加数组元素
向数组添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
 // 也可以使用 length 属性向数组添加新元素：
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

关联数组
很多编程元素支持命名索引的数组。
具有命名索引的数组被称为关联数组（或散列）。
JavaScript 不支持命名索引的数组。
在 JavaScript 中，数组只能使用数字索引。
假如使用命名索引，JavaScript 会把数组重定义为标准对象。之后，所有数组的方法和属性将产生非正确结果。

数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。

何时使用数组，何时使用对象？

JavaScript 不支持关联数组
如果希望元素名为字符串（文本）则应该使用对象。
如果希望元素名为数字则应该使用数组。

避免 new Array()
没有必要使用 JavaScript 的内建数组构造器 new Array()。
请使用 [] 取而代之！

var points = new Array();         // 差
var points = [];                  // 优
var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优

JavaScript 数组方法
join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
结果：
Banana * Orange * Apple * Mango

Popping 和 Pushing
在处理数组时，删除元素和添加新元素是很简单的。
Popping 和 Pushing 指的是：
从数组弹出项目，或向数组推入项目。
pop() 方法返回“被弹出”的值。
push() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"
var y =  fruits.push("Kiwi");   //  y 的值是 4

位移元素
位移与弹出等同，但处理首个元素而不是最后一个。
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
shift() 方法返回被“位移出”的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();            // 从 fruits 删除第一个元素 "Banana"   x 的值是 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。
unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"  返回 5

拼接数组
splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组。

合并（连接）数组
concat() 方法通过合并（连接）现有数组来创建一个新数组。
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数。
concat() 方法也可以将值作为参数。

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
var myChildren1 = arr1.concat(["Emil", "Tobias", "Linus"]);

裁剪数组
slice() 方法用数组的某个片段切出新数组。
slice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。

所有 JavaScript 对象都拥有 toString() 方法。

数组排序
sort() 方法以字母顺序对数组进行排序。
sort() 方法是最强大的数组方法之一。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

反转数组
reverse() 方法反转数组中的元素。
可以使用它以降序对数组进行排序。

数组迭代方法
Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。

Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
 
function myFunction(value, index, array) {
  return value * 2;
}

请注意，该函数有 3 个参数：

项目值
项目索引
数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
 
function myFunction(value) {
  return value * 2;
}

Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。

Array.reduce()
reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。
reduce() 方法不会减少原始数组。

Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。
reduceRight() 方法不会减少原始数组。

Array.every()
every() 方法检查所有数组值是否通过测试。

Array.some()
some() 方法检查某些数组值是否通过了测试。

Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

array.indexOf(item, start)

item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。

Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
array.lastIndexOf(item, start)

item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

For/In 循环
JavaScript for/in 语句遍历对象的属性：

var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
    text += person[x];
}

正则表达式
正则表达式是构成搜索模式（search pattern）的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。

var patt = /w3school/i;

/w3school/i 是一个正则表达式。
w3school 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。

使用字符串方法
在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。
search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。

正则表达式修饰符
修饰符可用于大小写不敏感的更全局的搜素：
在这里插入图片描述
使用 RegExp 对象
在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

使用 test()
test() 是一个正则表达式方法。
它通过模式来搜索字符串，然后根据结果返回 true 或 false。

使用 exec()
exec() 方法是一个正则表达式方法。
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
如果未找到匹配，则返回 null。

JavaScript 错误 - Throw 和 Try to Catch
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

JavaScript 作用域
在 JavaScript 中有两种作用域类型：

局部作用域
全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。
作用域决定了这些变量的可访问性（可见性）。
函数内部定义的变量从函数外部是不可访问的（不可见的）。

this 关键词
this 是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

JavaScript JSON
JSON 是存储和传输数据的格式。
JSON 经常在数据从服务器发送到网页时使用。

什么是 JSON？

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *
JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

JSON 语法规则

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组

JavaScript HTML DOM
HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树
在这里插入图片描述
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

HTML DOM 方法
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

DOM 编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。

<html>
<body>
 
<p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
 
</body>
</html>

在上面的例子中，getElementById 是方法，而 innerHTML 是属性。

getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。

innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

HTML DOM 文档
HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

HTML DOM Document 对象
文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

HTML DOM 事件
HTML 事件属性
如需向 HTML 元素分配事件，您能够使用事件属性。
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">试一试</button>

使用 HTML DOM 分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
为 button 元素指定 onclick 事件

<script>
	document.getElementById("myBtn").onclick = displayDate;
</script>

onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

onchange 事件
onchange 事件经常与输入字段验证结合使用。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数。

onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

HTML DOM 事件监听器
addEventListener() 方法
添加当用户点击按钮时触发的事件监听器：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

向相同元素添加多个事件处理程序
addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

事件冒泡还是事件捕获？
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序。

HTML DOM 导航
通过 HTML DOM，您能够使用节点关系来导航节点树。

DOM 节点
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

整个文档是文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
所有注释是注释节点

有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点，还可以修改和删除所有节点。

节点关系
节点树中的节点彼此之间有一定的等级关系。

术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
在节点树中，顶端节点被称为根（根节点）。
每个节点都有父节点，除了根（根节点没有父节点）。
节点能够拥有一定数量的子
同胞（兄弟或姐妹）指的是拥有相同父的节点。

<html>
   <head>
       <title>DOM 教程</title>
   </head>
 
  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>
 
</html>

在这里插入图片描述
从以上的 HTML 中您能读到以下信息：

<html> 是根节点
<html> 没有父
<html> 是 <head> 和 <body> 的父
<head> 是 <html> 的第一个子
<body> 是 <html> 的最后一个子

同时：

<head> 有一个子：<title>
<title> 有一个子（文本节点）：“DOM 教程”
<body> 有两个子：<h1> 和 <p>
<h1> 有一个子：“DOM 第一课”
<p> 有一个子：“Hello world!”
<h1> 和 <p> 是同胞

在节点之间导航
通过 JavaScript，您可以使用以下节点属性在节点之间导航：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

YAYA776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_JavaScript学习记录

<script> 标签在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。JavaScript 函数和事件JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。<head> 或 <body> 中的 JavaScript能够在 HTML 文档中放...
复制链接

扫一扫