1.内置对象
1）global对象
在JS中没有global对象，Web浏览器将Global作为window对象的一部分加以实现。
方法：
a.encodeURIComponent():对unicode进行编码处理
b.decodeURIComponent():对unicode编码进行解码处理
c.eval(''):具有字符串解析器的作用（慎用！因为它的性能较差，且比较危险）
2）Math对象
该对象主要提供了大量的数学运算的属性和方法。
属性：
Math.E
Math.PI
方法：
Math.min()：取最小值函数
Math.max()：取最大值函数
Math.round()：四舍五入函数
Math.ceil()：向上取整（取大于或等于操作数的最小整数）
Math.floor()：下下取整（取小于或等于操作数的最大整数）
Math.random()：产生[0,1)之间的一个任意小数
Math.abs(num)： 返回num的绝对值
Math.exp(num)： 返回Math.E的num次幂
Math.log(num)： 返回num的自然对数
Math.pow(num,power)： 返回num的power次幂
Math.sqrt(num)：返回num的平方根
Math.acos(x)： 返回x的反余弦值
Math.asin(x)： 返回x的反正弦值
Math.atan(x)： 返回x的反正切值
Math.atan2(y,x)： 返回y/x的反正切值
Math.cos(x)： 返回x的余弦值
Math.sin(x)： 返回x的正弦值
Math.tan(x)： 返回x的正切值
2.面向对象
创建对象：
1）常规创建
a.new
b.字面量
2）工厂模式
通过封装函数实现创建一批相似的对象。
缺陷：无法知道创建的对象是哪一个对象的实例。
3）构造函数
构造函数是用来构建一个类（ES5中没类的概念，实际上这里的构造函数就是类）。
类是对象的一个抽象符号化表示（把相同或相似的一部分对象抽离出来就形成了一个类）。
对象是类的实例化（具体化）（赋予一定的属性和功能）
a.创建构造函数（类）
语法：
function 类名([形参列表]){
this.属性名 = 参数；
……
this.方法名 = function(){
函数体；
}
……
}
b.通过构造函数实例化对象
new 类名([实参列表]);
使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：
• 构造函数方法没有显式的创建对象(new Object())；
• 直接将属性和方法赋值给this对象；
• 没有return语句。
构造函数的方法有一些规范：
• 函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；
• 通过构造函数创建对象，必须使用new运算符。
构造函数执行的过程：
• 当使用了构造函数，并且new 构造函数()，那么就后台执行了new Object()；
• 将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this就代表new Object()
出来的对象。
• 执行构造函数内的代码；
• 返回新对象(后台直接返回)。
3.基本包装类型
在基本数据类型中有3个特殊的类的存在：String、Number和Boolean。
上面三个基本类型都有自己的包装对象，有相应的属性和方法。调用方法的过程是在后台发生的，所以我们称作为基本包装类型。
通俗地讲就是基本类型的数据都有一个包装它们的类，这些类都有自己的属性和方法，这些基本类型的数据都可以直接去调用这些属性和方法。
1）Boolean类型
没有自己的属性和方法。
2）Number类型
a.属性
MAX_VALUE 表示最大数
MIN_VALUE 表示最小值
NaN 非数值
NEGATIVE_INFINITY 负无穷大，溢出返回该值
POSITIVE_INFINITY 无穷大，溢出返回该值
prototype 原型，用于增加新属性和方法
b.方法
toString() 将数值转化为字符串，并且可以转换进制
toLocaleString() 根据本地数字格式转换为字符串
toFixed() 将数字保留小数点后指定位数并转化为字符串
toExponential() 将数字以指数形式表示，保留小数点后指定位数并转化为字符串
toPrecision() 指数形式或点形式表述数，保留小数点后面指定位数并转化为字符串
valueOf() 显示原始值
3）String类型
a.属性
length
b.方法
str.charAt(n) 返回指定索引位置的字符
str.charCodeAt(n) 以Unicode编码形式返回指定索引位置的字符
str.concat(str1...str2) 将字符串参数串联到调用该方法的字符串
str.slice(n,m) 返回字符串n到m之间位置的字符串
str.substring(n,m) 返回字符串n到m之间位置的字符串
str.substr(n,m) 返回字符串n开始的m个字符串
str.indexOf(str, n) 从n开始搜索的第一个str，并将搜索的索引值返回
str.lastIndexOf(str, n) 从n开始搜索的最后一个str，并将搜索的索引值返回
str.str.toLowerCase() 将字符串全部转换为小写
str.str.toUpperCase() 将字符串全部转换为大写
str.match(pattern) 返回pattern 中的子串或null
str.replace(pattern, replacement) 用replacement 替换pattern
str.search(pattern) 返回字符串中pattern 开始位置
str.split(pattern) 返回字符串按指定pattern 拆分的数组
String.fromCharCode(ascii) 静态方法，输出Ascii码对应值
str.localeCompare(str1,str2) 比较两个字符串，并返回相应的值
4.变量、作用域及内存
1）变量
a.基本类型的变量
基本类型的变量的值存储在栈中。通过变量名可以直接获取变量的值。
b.引用类型的变量
引用类型的变量的值存储在堆中，在栈中存储的是引用类型的变量的地址（指针）。
如果要获取引用类型变量的值，需要先从栈中获取地址，再按址查找，从而获取到值。
2）作用域
在ES5作用域分为全局作用域和局部作用域两种。
在ES6作用域分为全局作用域、局部作用域和块级作用域三种。
全局作用域：
定义在函数外部的变量拥有全局作用域。
局部作用域：
定义在函数内部的变量拥有局部作用域。
3）垃圾回收机制
JS有自动回收垃圾的功能。
在项目开发过程中，初始化对象时，最好赋初值为null。
5.JSON
JSON(JavaScript Object Natation：JS对象表示法）是一种轻量级的数据交换格式。用独立的编程语言的文本格式来存储和表示数据。
1）优点
易于阅读和编写，同时也易于浏览器解析和生成，并有效地提升网络传输效率。
2）与XML比较
JSON书写或解析时是一个对象，更容易解析；而XML是由用户自定义标签来存储数据的，对于前端来说，不容易书写且解析起来比较困难。
3）JSON文件内容
它可以是一个单值，也可以是一个对象，也可以是一个数组，也可以是对象和数组的结合。
4）JSON写在哪里
可以写在JavaScript代码中，也可以形成一个独立的.json文本文件。
a.在JS中书写JSON数据
值如果是字符串，可以用单或双引号引起来，数值型数据和逻辑值以及null不能加引号；
如果是对象，键可以用单或双引号引起来，也可以不加引号。
b.独立的JSON文件
i)文件的扩展名必须是.json，JSON文件不是JS文件，不能出现任何的JS代码，它只是一个文本文件布而已；
ii)数据不能赋给某个变量；
iii)键必须用双引号引起来；
iv)值如果是字符型数据，必须用双引号引起来，其它类型的数据不能用引号引；
v)在JSON文件中不能添加任何注释。
5）数据值可以有以下三种
①简单值：可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊undefined。
②对象（{}）
③数组（[]）
6）在实际开发中的数据处理
在实际项目开发中，如果后台工程师还没创建好后台数据接口时，前端工程师可以先做数据mock（模拟），写对应的HTML、CSS和JS代码，
等后台数据可以调用时，再进行替换即可。
在项目开发中，数据最好分离出来，形成单独的JSON文件。
7）解析JSON数据
a)JS中JSON
如果是JSON数据，可以直接访问；如果是JSON格式的字符串需要用JSON.parse()方法进行转换。
JSON.parse()：将JSON格式的字符串转换为JSON
JSON.stringify()：将JSON转换为JSON格式的字符串
b)解析JSON文件
JSON文件必须用ajax（异步请求）技术去获取。
6.ajax请求操作步骤：
1）创建请求对象
var xhr = new XMLHttpRequest();
2）建立请求连接
xhr.open('get',url,true);// get/post：请求方式 true/false：true表示异步请求,false表同步操作 url：表示请求的路径
4）前端对请求的结果进行处理
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){ // 如果请求成功
console.log(JSON.parse(xhr.responseText)); // responseTextr：获取请求的结果
}
};
3）向后台发送请求
xhr.send();
注意：如果发送ajax请求，必须以http（服务器端）的方式启动文件，不能在本地直接打开。
7.DOM操作
DOM（Document Object Model:文档对象模型）：是HTML和XML文档的编程接口，定义了访问和操作HTML和XML文档的标准方法。
DOM以树型目录结构表达HTML和XML文档的，每一个节点就是一个DOM元素。
document->html->head/body->...
1）DOM节点
a）节点层次
节点层次分为父子节点和同胞节点两种。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞节点是拥有相同父节点的节点，也叫兄弟节点
b）DOM节点分类
元素节点：标签
属性节点：标签的属性
文本节点：标签后的换行符
文档节点：document
c）DOM节点的名称（nodeName）
元素节点 标签名相同
属性节点 属性名相同
文本节点 #text
文档节点 #document
d）DOM节点的值（nodeValue）
元素节点 undefined 或 null
属性节点 属性值
文本节点 文本内容
e）DOM节点的类型（nodeType）
元素 1
属性 2
文本 3
注释 8
文档 9
2）节点操作
a）获取节点
通过ID获取节点 【返回具体某个节点】
document.getElementById(ID名)
通过标签名获取节点 【返回节点数组，即使只有一个】
document.getElementsByTagName(标签名)
通过标签的name值获取节点 【返回节点数组】
document.getElementsByName(Name名)
通过class值来获取节点 【返回节点数组】
document.getElementsByClassName(Class名)
根据选择器返回找到结果集中的第一个
document.querySelect("选择器")
根据选择器返回找到的结果集，是个节点数组
document.querySelectAll("选择器")
b）创建DOM节点
i)创建元素节点
document.createElement('标签名');
ii)创建文本节点
document.createTextNode('文本内容');
iii)创建属性节点
document.createAttribute('属性名');
属性节点名.value = '属性值'; // 为属性设置值
// 关联以上三个节点
元素节点名.appendChild(文本节点名); // 在元素节点上添加文本节点
元素节点名.setAttributeNode(属性节点名); // 在元素节点上添加属性节点
document.body.appendChild(元素节点名); // 将创建的节点添加到文档中
简洁写法：
var oDiv = document.createElement('div'); // 创建元素节点
oDiv.setAttribute('class','wrapper box'); // 为元素节点添加属性及属性值
oDiv.innerHTML = '创建DOM元素的简洁写法'; // 为元素节点设置文本内容
document.body.appendChild(oDiv); // 将创建的元素节点添加到文档中
3）插入节点
i)插入内部的尾部
父节点.appendChild(创建的节点)
ii)插入内部的某个前面
父节点.insertBefore(创建的节点,已知的子节点)
4）替换节点
父节点.replaceChild(新节点，老节点)
5）克隆节点
深度克隆： 包含子节点一起克隆。
浅克隆： 只会将找到的这个节点克隆，子节点不会克隆
需要被复制的节点. cloneNode(true/false);
true: 复制当前节点以及所有子节点（深度克隆）
false: 仅复制当前节点（浅克隆）
6）删除节点
i)删除当前节点及子节点
节点.remove();
ii)删除子节点
父节点.removeChild(子节点)
7）节点属性操作
i)获取属性值
DOM节点.属性名 // 不能获取用户自定义属性的值
DOM节点.getAttribute(属性名) // 获取所有属性（用户自定义属性）的值
ii)设置属性值
DOM节点.属性名 = 属性值 // 不能设置用户自定义属性的值
DOM节点.setAttribute(属性名, 属性值) // 设置所有属性（用户自定义属性）的值
iii)删除属性值
DOM节点.属性名 = '' // 不能删除用户自定义属性
DOM节点.removeAttribute(属性名) // 删除所有属性（用户自定义属性）
8）节点文本操作
i) 获取文本
节点.innerHTML //获取节点下的所有内容包含了标签
节点.innerText // 获取节点下的文本内容，会过滤掉标签
节点.value // 获取input输入框等表单控件的内容
节点.getAttribute(“value”) //value是表单输入框的属性，可以使用getAttribute获得value值
ii)设置文本
节点.innerHTML= "文本内容" // 会翻译html标签
节点.innerText = "文本内容" // 不会翻译html标签
节点.value = 值
节点.setAttribute("value",值) // 因为value是属性，所以也可以中这个方法设置内容
iii)删除文本
节点.innerHTML= ""
节点.innerText = ""
节点.value = ""
节点.removeAttribute("value")
9）DOM节点样式操作
a)操作样式class
i)获取class
节点.className 获取节点的所有class
节点.getAttribute("class") 获取节点的所有class
ii)设置class
节点.className = 值
节点.setAttribute("class",值)
iii)其它方法
节点.classList.add(value); //为元素添加指定的类
节点.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true
节点.classList.remove(value); // 删除指定的类
节点.classList.toggle(value); // 有就删除，没有就添加指定类
b)操作内联样式
i)获取内联样式
节点.style.样式属性名 // 获取某个具体的内联样式
节点.style.cssText // 获取某个节点的所有内联样式，返回字符串
ii)设置内联样式
节点.style.样式属性名 = 属性值 // 设置某个具体的内联样式
节点.style.cssText = 属性值或属性值列表 // 设置某个节点的所有内联样式
8.常用事件
onload onclick ondblclick onmouseover onmouseout onmousemove onmousedown onmouseout onblur onfocus onsubmit onrest onchange
onkeydown onkeyup onkeypress
onresize
...
9.认识jQuery
JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能。
于2006年开源，现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。
宗旨：write less,do more!（写的少，做得多）
10.学习文档
中文文档：https://www.jquery123.com/
API学习或查询：https://jquery.cuishifeng.cn/
11.JQ功能
1）控制页面样式
2）访问和操作DOM
3）事件处理
4）提供了大量的插件
5）Ajax技术的封装
6）提供了大量的动画处理
……
12.使用JQ
1）本地引入
<script src="./js/jquery-3.3.1.min.js"></script>
2）CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
注意：JQ必须先引入，然后才能调它的API。可以在head标签中引入，也可以在最后引入，一般在最后引入。
13.选择器
1）基本选择器
id: #id
class: .class
element: element
* 选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差）
, 选择多个DOM
2）层次选择器
选择器1 选择器2：选择选择器1的所有的后代元素（选择器2）
选择器1>选择器2：只选择选择器1的子元素
选择器1+选择器2：选择紧挨着选择器1的第一个相邻元素（兄弟元素）
选择器1~选择器2：选择选择器1的所有兄弟元素
3）过滤选择器
a.简单过滤选择器
:first或first() 第一个元素
:last或last() 最后一个元素
:not(selector) 除selector之外的元素
:even 偶数元素
:odd 奇数元素
:eq(index) 第n个元素
:gt(index) 大于第n个后的元素
:lt(index) 小于第n个后的元素
:header 选择h1-h6所有标题元素
b.内容过滤选择器
:contains(text) 获取包含指定文本内容的元素
:empty 获取不包含子元素或文本内容的元素
:has(selector) 获取含有选择器所匹配的元素
:parent 获取含有子元素或文本的元素
c.可见性过滤选择器
:hidden 选择display:none或隐藏文本域(hidden)的元素
:visible 选择display:block的元素
d.属性过滤选择器
[attr] 获取含有指定属性的元素
[attr=value] 获取属性值为value的元素
[attr!=value] 获取属性值不为value的元素
[attr^=value] 获取属性值以value开头的元素
[attr$=value] 获取属性值以value结尾的元素
[attr*=value] 获取属性值含有value的元素
[attr1][attr2][attr3] 获取含有指定多个属性的元素
4）表单选择器
:input
:button
:submit
:text
:password
14.DOM操作
1）属性操作
a.获取属性值
attr(属性名)
b.设置属性
attr(属性名,属性值)
c.删除属性
removeAttr(属性名)
2）文本内容操作
a.获取文本及表单组件内容
html() 可以操作标签
text() 只能操作文本内容，不操作标签
val() 只能用于表单组件
b.设置（修改）文本及表单组件内容
html(内容)
text(内容)
val(内容)
c.删除文本及表单组件内容
html('')
text('')
val('')
3）元素样式操作
a.设置样式
css('属性名','属性值') 设置一个样式
css({'属性名1':'属性值1','属性名2':'属性值2',...}) 设置多个样式
b.操作类
i)添加类
addClass('类名') 添加一个类名
或：
addClass('类名1 类名2 ....') 添加多个类名
ii)删除类
removeClass() 清空类名
或：
removeClass('类名') 清除指定的类名
或：
removeClass('类名1 类名2 ....') 清除指定的多个类名
4）页面元素操作
a.创建DOM节点
$(dom节点内容)
b.在内部添加DOM节点
append() 在内部的最后添加DOM
appendTo() 将DOM添加到内部的最后
prepend() 在内部的最前面添加DOM
prependTo() 将DOM添加到内部的最前面
c.在外部添加DOM节点
before() 在当前DOM前添加（同级添加）
insertBefore() 把DOM添加到当前元素之前（同级添加）
after() 在当前DOM之后添加（同级添加）
insertAfter() 把DOM添加到当前元素之后（同级添加）
d.复制DOM节点
clone() 只复制DOM元素
clone(true) 复制DOM及绑定在它上面的事件
e.删除DOM节点
remove() 删除当前DOM及子元素
remove(dom节点) 在同级DOM中删除指定的DOM
empty() 删除当前DOM下的子元素，保留当前DOM