共计 6220 个字符，预计需要花费 16 分钟才能阅读完成。
1 根底语法
比拟运算符
=
== // 等于（类型不同，值一样，也会判断为 true）=== // 相对等于（类型一样，值一样，后果才为 true）这是一个 JS 的缺点，保持不要应用 == 比拟
须知：
- NaN===NaN 返回 false，NaN 与所有数值都不相等，包含本人
- 只能通过 isNaN(NaN)来判断这个数是否是 NaN
尽量避免应用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.000000001严格查看模式
全局变量 i = 1;
局部变量 var i = 1; let i = 1;（ES6 倡议应用 let）
严格查看模式
‘use strict’; 严格查看模式，预防 JavaScript 的随意性导致产生的一些问题
字符串
多行字符串：
`XXX
XXX`
模板字符串
`hello,${变量}`
str.length str[0] str.toUpperCase() str.toLowerCase()
str.subsring(X,Y)返回 str[X,Y)
数组
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);取数组下标，如果越界(arr[8]), 就会提醒undifined
如果给数组的长度 arr.length 赋值，数组大小就会发生变化
indexOf：通过元素取得下标索引
slice()截取 Array 的一部分，相似字符串中的 substring
arr.push(),arr.pop() // 尾部
arr.unshift(),shift() // 头部
arr.sort()
arr.reverse()
arr.concat() // 不会扭转原数组
arr.join(‘-‘) // 连接符 打印
arr.fill(X)
对象
每个属性之间应用逗号隔开，最初一个不须要增加
var person = {
name:"XXX",
age:18,
tags:['js','java','...']
}对象赋值：person.name = “XXX”
取对象的值：person.name
应用一个不存在的对象属性，不会报错！undefined
动静删除，增加对象的属性：delete person.name person.XXX=XXX
JavaScript 中所有键都是字符串，值是任意对象
判断属性值是否在这个对象中！’XXX’ in XXX
判断一个属性是否是这个对象 本身 领有的 hasOwnProperty()
流程管制
arr.forEach(function (value){ // ES5.1
console.log(value)
})
for(var i in arr){// i 为数组下标}
for(var e of arr){// e 为数组元素}Map 和 Set
ES6 的新个性
var map = new Map([['tom',100],['jack',90]]);
var name = map.get('tom');
map.set('admin',123); // 新增
map.delete('XXX');
console.log(name);
var set = new Set(1,1,1,3); // 去重
set.add(x);
set.delete(x);
set.has(x);iterater ES6 新个性
函数
function abs(x){ // 定义形式一
//...
}
var abs = function(x){ // 定义形式二
//...
}如果没有执行 return，函数执行完也会返回后果：undefined
JavaScript 能够传任意参数，也能够不传参数
var abs = function(x){
// 手动抛出异样
if(typeof x != 'number'){throw 'Not a Number';}
if(x >= 0){return x;}else{return -x;}
}arguments参数示意函数传入的所有参数，是一个数组
rest残余参数，只能写在最初面，必须用 … 示意
function aaa(a,b,...rest){consloe("a->"+a);
consloe("b->"+b);
consloe("rest->"+rest);
}全局对象 window
所有全局变量都绑定在全局对象 window 上的
window.x（全局变量）
windows.alert(window.x)
var old_alert = window.alert;
//old_alert(x);
window.alert = function(){};
window.alert(123); // 生效
// 复原
window.alert = old_alert;
window.alert(456);全局变量→抵触
// 惟一全局变量
var App = {};
// 定义全局变量
App.name = 'XXX';
App.add = function (a,b) {return a + b;}把本人代码全副放入本人定义的惟一命名空间中，升高全局命名抵触的问题（JQuery）
ES6 倡议应用 let 关键字去定义部分作用域的变量（解决部分作用域抵触的问题），应用 const 定义常量const PI = '3.14'
办法
var XXX = {
name:'xxx',
birth:2020,
// 办法
age:function(){var now = new Date().getFullYear();
return now - this.birth;
}
}
XXX.name
XXX.age()apply 在 js 中能够管制 this 指向，通过 apply() 办法，可能编写用于不同对象的办法。函数.apply(对象, 参数列表)this 指向 apply 的对象
2 外部对象
规范对象
number, string, boolean, object
typeof NaN
"number"
typeof []
"object"
typeof undefined
"undefined"2.1 Date
var now = new Date();
now.getFullYear(); // 年
now.getMonth(); // 月（0-11）now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 工夫戳 1970.1.1 00:00 - ms
console.log(new Date(113224222)) // 工夫戳转为工夫
// 转换为字符串
now.toLocaleString()
now.toGMTString()2.2 JSON
JSON(JavaScript Object Notation, JS 对象表示法) 是一种轻量级的数据交换格局。
特点：简洁，清晰的层次结构；易于人浏览和编写，同时也易于机器解析和生成，无效晋升网络传输效率
在 JavaScript 中所有皆对象，任何 JS 反对的类型都能够用 JSON 来示意
格局：
- 对象：{}
- 数组：[]
- 键值对：key:value
JSON 字符串和 JS 对象的转化
var user = {
name: "XXX",
age: 3,
sex: '男'
}
// 对象转化为 JSON 对象
var jsonUser = JSON.stringify()
//json 字符串转化为对象, 参数为 json 字符串
var obj = JSON.parse('{"name":"XXX","age":3,"sex":" 男 "}')2.3 Ajax
- 原生的 js 写法 xhr 异步申请
- JQuery 封装好的办法 $(“#name”).ajax(“”)
- axios 申请
3 面向对象编程
原型：子类（对象）.__proto__ = 父类（原型对象）; // 子类的原型是父类
随便指向
class关键字是在 ES6 引入的
class Student{constructor(name){this.name = name;}
hello(){alert('hello')
}
}
class pupil extends Student{constructor(name,grade){super(name);
this.grade = grade;
}
myGrade(){alert('我是一名小学生')
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello();原型链：__proto__
4 操作 BOM 对象（重点）
BOM(Browser Object Model) 是指浏览器对象模型，是用于形容这种对象与对象之间档次关系的模型，浏览器对象模型提供了独立于内容的、能够与浏览器窗口进行互动的对象构造。
浏览器：
内核：IE，Chrome, Safari, FireFox
三方：QQ，360
4.1 window
window 代表浏览器窗口
window.alert(1)
// 调整浏览器窗口大小
window.innerHeight
window.innerWidth
window.outerHeight
window.innerWidth4.2 navigator
navigator 封装了浏览器的信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform个别不应用，因为会被人为批改，不倡议用这些属性来判断浏览器版本
4.3 screen
screen 代表屏幕尺寸
screen.width
screen.height4.4 location（重要）
location 代表以后页面的 URL 信息
host: "www.bilibili.com"
hostname: "www.bilibili.com"
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload() // 刷新页面
// 设置新的地址
location.assign('https://...')4.5 document
document 代表以后的页面（document.），HTML DOM 文档树
// 获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>获取 cookie
document.cookie
"finger=158939783; _uuid=C56A5201-E5AB-30A7-6A3D-33573CFAEC4B75115infoc; buvid3=2DE4F72B-D52C-4628-B6F6-D25A79D4DFBD155818infoc; sid=jsr4r70q; im_notify_type_775959=0; LIVE_BUVID=AUTO6215819975268326; LIVE_PLAYER_TYPE=2; DedeUserID=775959; DedeUserID__ckMd5=5a93072db131a757; bili_jct=e4c30825e9523f0d624509aa21012a7e; rpdid=|(J~RllJRmlY0J'ulm)RkRm)l; blackside_state=1; CURRENT_FNVAL=80; bp_t_offset_775959=434460479141307658; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1600696828; CURRENT_QUALITY=80; bp_video_offset_775959=438421933640865406; finger=158939783; PVID=3"劫持 cookie 原理
www.taobao.com
<script src="aa.js"></script>
<!-- 歹意人员：获取你的 cookie 上传到他的服务器 -->服务器能够设置：httpOnly（平安）
4.6 history
history 代表浏览器的历史记录（不倡议应用）
history.back()
history.forward()5 操作 DOM 对象（重点）
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织举荐的解决可扩大置标语言的规范编程接口。它是一种与平台和语言无关的利用程序接口(API), 它能够动静地拜访程序和脚本, 更新其内容、构造和 www 文档的格调(目前,HTML 和 XML 文档是通过阐明局部定义的)。
浏览器网页就是一个 DOM 树形构造，要操作一个 DOM 节点，就必须先取得这个 DOM 节点
5.1 取得 DOM 节点
标签选择器：document.getElementsByTagName('h1')（返回数组）
id 选择器：documen.getElementById('id')
class 选择器：document.getElementByClassName('class')（返回数组）
取得子节点：Node.children
5.2 更新 DOM 节点
批改文本值：
Node.innerText = 'xxx'
Node.innerHTML = 'xxx'（超文本）
设置款式：
Node.style.color/fontSize/... = 'xxx'（驼峰命名）
5.3 删除 DOM 节点
先获取父节点，再通过父节点删除本人
Node.parentElement.removeChild(Node)（只能通过 id 选择器抉择节点删除）
留神：删除节点过程中，父节点的 children 是动态变化的
5.4 插入 DOM 节点
取得的 DOM 节点若为空节点，能够通过 innerText 减少元素
追加节点：Node1.append(Node2)
创立新节点：document.createElement('p')
设置节点属性：Node = setAttribute('属性名','属性值')
插入节点：Node.insertBefore(newItem,existingItem);
6 操作表单（验证）
表单的目标：提交信息
取得要提交的信息
input_text.value
boy_radio.checked //booleanMD5 加密明码
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数，返回布尔值（return false：不提交表单）
7 jQuery
公式：$(selector).action()
$('#id').click(function(){//...})
// 当网页元素加载结束之后，响应事件
$(document).ready(function(){//...})
//↑简写, 获取坐标
$(function(){$('#divMove').mousemove(function(e){$('mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
})文档工具站：https://jquery.cuishifeng.cn/
操作 DOM：
$('#test-ul li[name=python]').css({"color","red"})
$('#test-ul li[name=python]').show()/hide()
$(window).widthLayUI 弹窗组件
ElementUI 款式难看
