1、基本语法
1.1 引入JavaScript
1.1.1行内引入
<input type="button" value="轻轻点我一下" onclick="javascript:alert('正在学习Javascript!')">
1.1.2 内部引入
<script type="text/javascript">
function testClickTwo(){
alert("正在学习JavaScriptTwo")
}
</script>
<input type="button" value="轻轻点我一下Two" onclick="testClickTwo()">
1.1.3 外部引入
<!-- 引入外部js脚本文件 -->
<script src="https://www.cnblogs.com/xiaoqigui/p/js/test.js" type="text/javascript"></script>
1.2 数据类型和变量
typeof
查看数据类型；
| 关键字 | 类型 |
|---|---|
| undefined | 未定义 |
| number | 数字 |
| string | 字符串 |
| boolean | 布尔 |
number 的注意点
- NaN; NaN表示Not a Number，当无法计算结果时用NaN表示 ;
- Infinity; Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就 表示为Infinity;
1.3 strict模式
JavaScript在设计之初，为了方便初学者学习，并不强制要求用 var 申明变量。这个设计错误带来了 严重的后果：如果一个变量没有通过 var 申明就被使用，那么该变量就自动被申明为全局变量；
为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的 JavaScript代码，强制通过 var 申明变量，未使用 var 申明变量就使用的，将导致运行错误。
<!--启用strict模式的方法是在JavaScript代码的第一行写上：-->
<script>
`use strict`;
// 如果浏览器支持strict模式，下面的代码将报ReferenceError错误:
abc = 'Hello, world'; //没有使用var声明变量
console.log(abc);
</script>
1.4 字符串
1.4.1 多行字符串
由于多行字符串用 \n 写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反 引号 ``表示：
`这是一个
多行
字符串`;
1.4.2 模板字符串(注意模板字符的放多行字符串号``反引号里面才可以)
ES6新增了一种模板字符串，表示方法和上面的多行 字符串一样，但是它会自动替换字符串中的变量：
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
1.4.3 常用方法
| 方法 | 说明 |
|---|---|
| length() | 字符串长度 |
| str[index] | 通过下标获取字符 |
| toUpperCase() | 变大写 |
| toLowerCase() | 变小写 |
| charAt(index） | 返回指定下标的字符 |
| indexOf(str) | 返回指定字符串的下标 |
| lastIndexOf(str) | 返回指定字符串最后一次出现的下标 |
| substring(index1,index2) | 返回区间的字符(前闭后开) |
| ... | ... |
1.5 数组
JavaScript的 Array 可以包含任意数据类型，并通过索引来访问每个元素。
1.5.1 初始化
//定义数组1：var 数组名 =new Array([长度]),长度可以省略
var varArray1 = new Array();
//访问数组元素
varArray1[0] = "LPL";
varArray1[1] = "LCK";
varArray1[3] = "LEL";
console.log(varArray1);
//定义数组2,支持直接初始化
var varArray2 = new Array(10,20,30,40,50);
varArray2[5] = 60;
console.log(varArray2);
//定义数组3：直接支持使用中括号
var varArray3 = [100,90,80];
console.log(varArray3);
1.5.2 常用方法
| 方法 | 说明 |
|---|---|
| indexOf(index) | 通过下标获取元素 |
| slice(index1,index2) | 截取指定下标元素，返回新数组(前闭后开) |
| push(元素...) | 向末尾添加任意元素 |
| pop() | 将末尾的元素删除 |
| unshift(元素...) | 向头部添加任意元素 |
| shift() | 将头部的元素删除 |
| sort() | 排序 |
| reverse() | 反转 |
| splice(index,num,元素...) | 从指定的索引开始删除若干元素，然后再 从该位置添加若干元素 |
| concat(array) | 把当前的 Array 和另一个 Array 连接起来，并返回一个新的 Array |
| join([符号]) | 把当前 Array 的每个元素都用指定的字符串连接起 来，然后返回连接后的字符串： |
1.6 对象
JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。
1.6.1 定义一个对象
var 对象名 = {
key: 'value',
key: 'value',
key: 'value'
}
1.6.2 获取对象的属性
对象.属性
1.6.3 由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
如果我们要检测对象是否拥有某一属性，可以用 in 操作符：
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
不过要小心，如果用 in 判断一个属性存在，这个属性不一定是 这个对象的，它可能是这个对象继承得 到的：
1 'toString' in xiaoming; // true
//因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以xiaoming 也拥有 toString 属性。
要判断一个属性是否是 xiaoming 自身拥有的，而不是继承得到的，可以用 hasOwnProperty() 方法：
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
1.7 流程控制
1.7.1 if
1.7.2 for
for ... in ， 它可以把一个对象的所有属性依次循环出来：
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}
由于 **Array 也是对象**，而它的每个元素的**索引被视为对象的属性**，所以**遍历出来是下标**；
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
//请注意，for... in 对 Array 的循环得到的是 String 而不是 Number 。
1.7.3 while
1.8 Map 和Set
1.8.1 Map
Map 是一组键值对的结构，具有极快的查找速度。
1.8.1.1初始化
//初始化 Map 需要一个二维数组，或者直接初始化一个空 Map;
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
//由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
1.8.2 Set
Set 和 Map 类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在 Set 中， 没有重复的key;
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'
//重复元素在 Set 中自动被过滤：3
//通过 delete(key) 方法可以删除元素：
1.9 Iterable
遍历 Array 可以采用下标循环，遍历Map 和 Set 就无法使用下标。 为了统一集合类型，ES6标准引入了新的 iterable 类型，Array，Map，Set 属于； 具有 iterable 类型的集合可以通过新的 for ... of 循环来遍历。
更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该 函数。
1.9.1 Array
var a = new Array(元素...);
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
})
1.9.2 Map
Map 的回调函数参数依次为 value 、 key 和 map 本身：
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
1.9.3 set
Set 没有索引，因此回调函数的前两个参数都是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
2、交互弹窗
| 方法 | 说明 |
|---|---|
| alert(str) | 警告弹窗，没有返回值，只有确定按钮 |
| prompt(str) | 有输入框(返回值为输入内容，直接取消返回值为空null，没有输入但确认返回值为空字符串) |
| prompt(str1,str2) | 有输入框和默认值 |
| confirm(str) | 是否选择框(返回值，true,false) |
3、函数
3.1 常用系统函数
| 方法 | 说明 |
|---|---|
| parseInt(strNum) | 将字符串转换为整型数字 |
| parseFloat(strNum) | 将字符串转换为浮点型数字 |
| isNaN(值) | true,表示不是数字，false,表示是数字 |
3.2 自定义函数
3.2.1定义函数
方式1
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
//一旦执行到 return 时，函数就执行完毕，并将结果返回。
//如果没有 return 语句，函数执行完毕后也会返回结果，只是结果为 undefined 。
方式2
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};
//在这种方式下， function (x) { ... } 是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量 abs ，所以，通过变量 abs 就可以调用该函数。
//上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个 ; ，表示赋值语句结束。
3.3两个重要点
3.3.1arguments 关键字
JavaScript还有一个免费赠送的关键字 arguments ，它只在函数内部起作用，并且永远指向当前函数 的调用者传入的所有参数。
function foo(x) {
console.log('x = ' + x); // 10
for (var i=0; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30)
3.3.2 rest 参数
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []
rest参数只能写在最后，前面用 ... 标识，从运行结果可知，传入的参数先绑定 a 、 b ，多余的 参数以数组形式交给变量 rest ;
3.4 变量的作用域
| 描述 | 作用域 |
|---|---|
| var声明的变量 | 全局变量 |
| 不用var声明的变量(不建议使用) | 全局变量 |
| 方法以内的变量 | 局部变量 |
3.4.1 两个关键字
| 关键字 | 说明 |
|---|---|
| let | 声明局部变量的关键字 |
| const | 声明常量的关键字 |
3.4.2 全局对象
实际上，JavaScript默认有一个全局对象 window ，全 局作用域的变量实际上被绑定到 window 的一个属性：
4、事件
| 事件 | 说明 |
|---|---|
| onclick | 单机事件 |
| onfocus | 获取焦点事件 |
| onblur | 失去焦点事件 |
| onkeydown | 键盘按下事件 |
| onkeyup | 键盘抬起事件 |
| onkeypress | 键盘产生可输入字符事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移除事件 |
5、BOM
5.1 windows
| 方法 | 说明 |
|---|---|
| close() | 关闭浏览器窗口 |
| open() | 打开指定url浏览器窗口(可指定窗口大小) |
5.2 history
| 方法 | 说明 |
|---|---|
| back() | 返回上一个页面 |
| forward() | 下一个页面 |
| go() | 加载某个具体URL (go(-1)返回上一个页面 go(1)下一个页面) |
5.3 location
| 属性 | 说明 |
|---|---|
| host | 主机名+端口号 |
| hostname | 主机名 |
| href | 完整URL(给href赋值可以跳转到指定页面) |
| 方法 | 说明 |
|---|---|
| repload() | 重新加载文档 |
| replace() | 用新的文档替换当前文档 |
5.4 document
| 属性 | 说明 |
|---|---|
| referrer | 返回载入前文档的URL |
| URL | 返回当前文档的URL |
| cookie | 返回当前页面的cookie |
| 方法 | 说明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementByName() | 返回带有指定name值的对象集合 |
| getElementByTagName() | 返回带有指定标签的对象的集合 |
| getElementByClassName() | 返回带指定class值的对象集合 |
| write() | 向文档写文本，HTML表达式或JavaScript代码 |
5.5 innerHTML 与 innerText
| 方法() | 说明 |
|---|---|
| innerHTML = "" | 往节点里里面些内容，里面的标签会被解析 |
| innerHTML | 获取节点里面的内容 |
| innerText = "" | 往节点里里面些内容，里面的标签不会被解析 |
| innerText | 获取节点里面的内容 |
toFixed(number) 保留指定位数
5.6 Date
| 方法 | 说明 |
|---|---|
| getDate() | 每月中的第几天 |
| getDay() | 每周的第几天 |
| getHours() | 小时 |
| getMinutes() | 分钟 |
| getSeconds() | 秒数 |
| getMonth() | 月份(0~11) |
| getFullYear() | 年份 |
| getTime() | 时间戳 |
6.7 Math对象
| 方法 | 说明 |
|---|---|
| ceil() | 向上舍入 |
| floor() | 向下舍入 |
| rand() | 四舍五入 |
| random() | 返回0~1之间的随机数 |
6.8 定时函数与清除函数(时钟特效)
定时函数
| 方法 | 说明 |
|---|---|
| setTimeout("调用的函数",等待的秒数) | 指定时间后执行一次函数 |
| setInterval("调用的函数",间隔的秒数) | 指定时间间隔一直执行函数 |
清除函数
| 方法 | 说明 |
|---|---|
| clearTimeout(setTimeout返回的ID值) | 停止执行函数 |
| clearInterval(setInterval返回的ID值) | 停止执行函数 |
6、DOM
6.1 层次关系访问节点
层次访问节点1，包含text，注释等其他内容；
| 属性名称 | 说明 |
|---|---|
| parentNode | 返回接待你的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
层次访问节点2，只包含标签元素节点
| 属性名称 | 说明 |
|---|---|
| firstElementChild | 返回节点的第一个子节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
6.2 操作节点
6.2.1操作节点属性
| 方法 | 说明 |
|---|---|
| getAttribute("属性名") | 获得节点指定属性值 |
| setAttribute("属性名",属性参数) | 设置节点的属性值 |
6.2.2创建和插入节点
| 方法 | 说明 |
|---|---|
| cerateElement(tagName) | 通过标签名创建新的元素节点 |
| A.appendChild(B) | 把B节点(作为子节点)追加到A节点的末尾 |
| inseretBefore(A,B) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
cloneNode(deep)的深拷贝和浅拷贝
| 方法 | 说明 |
|---|---|
| cloneNode(false) | 浅拷贝(不拷贝标签内部的子元素) |
| cloneNode(true) | 深拷贝(包括标签内部的子元素一起拷贝) |
6.2.3 删除和替换节点
| 方法 | 说明 |
|---|---|
| removeChild(node) | 删除指定的节点 |
| replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
注意只有父节点才可以删除子节点或者替换子节点；
6.3 操作节点样式
6.3.1 事件
修改样式主要与事件一起使用；
| 事件 | 说明 |
|---|---|
| onclick | 单机事件 |
| onfocus | 获取焦点事件 |
| onblur | 失去焦点事件 |
| onkeydown | 键盘按下事件 |
| onkeyup | 键盘抬起事件 |
| onkeypress | 键盘产生可输入字符事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移除事件 |
6.3.2 通过节点的style属性
元素节点.style.样式属性=”样式值“；
//举例
document.getElementById("cart").style.backgroundColor="#fff";
6.3.3 className属性
//carOut类属性时在CSS外部样式中已经存在的
document.getElementById("cart").className = "cartOut";