一、JavaScript基础
（一）变量和数据类型
1、JavaScript介绍
1）JavaScript是什么？
JavaScript是运行在客户端（浏览器）的编程语言，实现人机交互。
2）作用
网页特效（监听用户的一些行为，让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到页面）
服务端编程（node.js）
3）JavaScript的组成
ECMAScript：
js基础语法
Web API：
DOM(文档操作对象)和BOM(浏览器操作对象)
4）JavaScript书写位置
外部和内部都写在< /body>上一行，而内联写作标签内
5）JavaScript注解
单行注释：// 注释内容
多行注释：/* 注释内容 */
6）JavaScript的结束标准
以英文冒号结束或不加符号
2、JavaScript输入和输出语句
1）输出
document.write('输出的内容')
alert("警示的内容")
console.log('控制台打印的内容')
2）输入(返回的是字符串)
prompt('输入内容')
3、字面量
见字如见意
4、变量
1）什么是变量
用来存储数据的“容器”
2）基本使用
let 变量名 = 初值
3）变量命名
规则：不能是关键字、只能用下划线、字母、数字和$组成、字母严格区分大小
规范：小驼峰命名法
5、数组
可以按顺序保存多个数据；
let arr = []
6、数据类型
基本数据类型：number(数值型)、string(字符串型)、boolean(布尔型)、undefined(未定义型)、null(空类型)
引用数据类型：object(对象)、function(函数)、array(数组)
7、类型转换
1）通过typeof关键字检测数据类型
console.log(typeof age)
2）隐式类型转换
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+号外的算术运算都会把数据转成数字类型（-/*）
+作正号时，可以将字符串转为数字型
3）显式类型转换
Number('123')：转为数字类型
parseInt('123')：转为数字类型
parseFloat('12.2')：转为数字类型
Stringg(123)：转为字符串类型
age.toString(进制)：转为字符串类型
（二） 流程控制
1、运算符
a 算术运算符
+、-、*、/、%
b 赋值运算符
+=、-=、*=、/=、%=
c 一元运算符
++、--
前置自增（++a）：先自增再使用
后置自增(a++)：先使用再自增
d 比较运算符
>、<、>=、<=、、=、！==
细节：字符串比较，是比较的字符对应的ASII码，从左依次向优比较。
尽量不要比较小数类型。
==是判断，只要求值相等，不要求数据类型一致。
===是全等，要求值和数据类型都一致
e 逻辑运算符
&&、||、！
短路与&&：左为false就短路
短路或||：左为true就短路
f 运算符优先级
2、语句
a 表达式：一组代码的集合，js解释器会将其计算出一个结果。
b 语句：js命令
c 分支语句
三大结构：顺序结构、分支结构、循环结构
if分支语句：
if(条件){
满足条件执行的代码}、
if(条件){
满足条件执行的代码}
else {不满足条件执行的代码}、
if(条件){
代码1}
else if(条件){
代码2}
else if(条件){
代码3}
else {代码4}
三元运算符：条件？满足条件执行的代码:不满足条件执行的代码
switch语句：
switch(数据) {
case 值1:
代码1
break
case 值2：
代码2
break
default:
代码n
break
}
while循环：
while (循环条件) {
要重复执行的代码（循环体）
}
循环退出：
continue:结束本次循环，继续下次循环
break:跳出所在的循环
（三） 循环和数组
1、循环
a for循环：
for(声明记录循环次数的变量; 循环条件; 变化值) {
循环体
}
2、数组
a 数组是一种可以顺序保存数据的数据类型。
b 数组基本使用：
let 数组名 = [数据1,数据2,...., 数据n]
nums[1]、nums.length
c 操作数组：
查：数组[下标]
改：数组[下标] = 新值
增：
添加到数组末尾：arr.push(元素1，元素2，...，元素n)、
添加到数组头部：arr.unshift(元素1，元素2，...，元素n)
删：
删除最后一个元素：arr.pop()、
删除第一个元素：arr.shift()、
删除指定元素：arr.splice(起始下标，删除的元素个数)
（四） 函数
1、作用
实现代码复用，提高开发效率
2、基本使用
a 声明：
function 函数名() {
函数体
}
function sayHi() {
document.write(‘你好！’)
}
b 调用：
函数名()
sayHi()
c 传参：
function 函数名(参数列表) {
函数体
}
function getSum(num1,num2) {
document.write(num1+num2)
}
d 形参和实参：
形参：声明时写在函数名右边小括号里面的
实参：函数调用时写在函数名右边小括号里面的
e 逻辑中断：
function getSum(x,y) {
x = x || 0
y = y || 0
console.log(x + y)
}
getSum(1, 2)
f 返回值：
function getSum(1,2) {
x = x || 0
y = y ||0
return x + y
}
let result = getSum(1, 2)
3、作用域
a 全局作用域：整个script内有效
b 局部作用域：函数内部有效
c 块级作用域：{}内部有效
4、匿名函数
function() {
函数体
}
5、立即执行函数
方式1：
(function() {console.log(11)})();
方式2：
(function() {console.log(11)}());
(五) 对象
1、基本概念
a 对象是什么：js中的一种数据类型，无序的数据的集合，可以详细描述某个事物。
b 内容：包含静态特征和动态行为。
2、基本使用
a 声明：
let 对象名 = {
属性名：属性值,
方法名：函数
}
let person = {
uname: 'andy',
age:18,
getSum:function() {
return 1+1
}
}
b 访问
属性：console.log(person.name)或console.log(person['name'])
方法：person.getSum()
3、操作对象
a 查：
对象.属性 或 对象['属性']
对象.方法名()
b 改：
对象.属性 = 值
对象.方法 = function() {}
c 增：
对象名.新属性名 = 新值
对象名.方法名 = function(){}
d 删：
delete 对象名.属性名
4、遍历对象
let obj = {
uname: 'andj'.
age: 18,
sex: '男'
}
for(let key in obj) {
console.log(key)
console.log(obj[key])
}
5、内置对象
a 数学：Math
方法：random：
ceil
floor
max
min
pow
abs
b 产生对应随机数：
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
二、Web API
（一） DOM-获取DOM元素、修改属性
1、获取DOM对象
a CSS选择器：
返回首个匹配对象：document.querySelector('css选择器')
返回所有匹配对象：document.querySelectorAll('css选择器')
b quserySeletorAll()返回的是一个伪数组（有长度和索引，无pop(),push()方法）
c 其他获取DOM元素的方法：
document.getElementById('nav')
document.getElementByTagName('div')
document.getElementByClass('w')
2、设置或修改DOM元素内容
a document.write()
只能将文本内容追加到前面的位置。
文本中包含的标签会被解析
b 对象.innerText属性
将文本内容添加或更新到指定标签位置
不能识别标签
c 对象.innerHTML属性
可以识别标签
let info = document.querySelector('info')
info.innerText = '< h4>hello< /h4>'
info.innerHTML = '< h4>hello< /h4>'
3、设置或修改DOM元素属性
a 对象.属性 = 值
let pic = document.querySelector('img')
pic.src = './images/pic.jpg'
pic.title = '这是图片'
4、设置或修改DOM元素样式属性
a 对象.style.样式属性 = 值
let box = doucment.querySelector('.box')
box.style.backgroundColor = 'red'
box.style.width = '300px'
b 元素.className = 'active'
c 元素.classList.add('类名')
d 元素.classList.remove('类名')
e 元素.classList.toggle('类名')
5、设置或修改DOM表单元素属性
a 获取：DOM对象.属性名
b 设置：DOM对象.属性名 = 新值
表单.value = '用户名'
表单.type = 'password'
c disabled、checked、selected
6、定时器-间隙函数
a 开启定时器：setInterval(函数，间隔时间)
function repeat() {
console.log('间隙函数测试')
}
let timer = serInterval(repeat, 1000)
b 关闭定时器：clearInterval(timer)
（二） DOM-事件基础
1、事件
a 事件：在编程时系统内发生的动作或者发生的事情
b 事件监听：让程序检测是否有事件产生，一旦发现事件触发，就立即调用一个函数做出响应，也称注册事件。
2、语法
元素.addEventListener('事件'，要执行的函数)
3、三要素
a 事件源：被触发事件的DOM对象
b 事件：以何种方式触发（鼠标点击，经过等）
c 事件调用的函数：做出何种响应
let btn = document.querySelect('.btn')
btn.addEventListerner('click', function() {
alert('我被点击了')
})
4、事件类型
a 鼠标事件：
click:点击
mouseenter:鼠标经过
mouseleave:鼠标离开
b 焦点事件：
focus:获得焦点
blur:失去焦点
c 键盘事件：
Keydown:键盘按下
keyup:键盘抬起
d 文本事件：
input:用户输入事件
5、高阶函数
a 函数表达式
let counter = function(x,y){
return x+y
}
let result = counter(5,10)
b 回调函数
function fn(){
console.log('回调函数')
}
setInterval(fn,1000)
6、环境对象
a this:环境对象指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境。
b 谁调用，this指向谁
7、排他思想
当前函数为A状态，其他元素为B状态
a 干掉所有元素（使用for循环）
b 复活他自己（通过this或者下标找到自己或者对应的元素）
（三） DOM-节点操作
1、DOM节点基本概念
a 节点：DOM树中每一个内容都称为节点
b 节点类型：元素节点、属性节点、文本节点、其它
2、DOM节点基本操作
a 查找节点：
父节点查找：子元素.parentNode属性
子节点查找：
所以子节点：父元素.childNodes
所以元素子节点：父元素.children
兄弟节点：
下一个兄弟：nextElementSibling
上一个兄弟：previousElementSibling
b 添加节点
创建节点：document.createElement('标签名')
追加节点：
追加到最后一个子元素：父元素.appendChild(要插入的元素)
添加到某个元素前面：父元素.insertBefore(要插入的元素，在哪个元素前添加)
c 克隆节点：元素.cloneNode(布尔值)ture:包含后代节点
d 删除节点：父元素.removeChild(要删除的元素)
3、时间对象
a 获取当前时间：let date = new Date()
b 获取指定时间：let date = new Date('1999-10-01')
c 时间对象常用方法：getFullYeae()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()
4、时间戳
a 方法1：
let date = new Date()
date.getTime()
b 方法2：
+new Date()
c 方法3：
Date.now()
5、重绘和回流
a 浏览器渲染界面流程：解析HTML，生成DOM树，同时解析CSS，生成样式规则。根据DOM树和样式规则，生成渲染树。进行布局（回流/重排）根据生成的渲染树，得到节点的几何信息（位置和大小）。进行绘制（重绘）：根据计算和获取的信息进行整个页面的绘制。最后display:展示在页面上。
b 回流（重排）：
当Render Tree 中部分或者全部元素的尺寸、结构、布局等发生变化时，浏览器就会重新渲染部分或全部文档的过程。
c 重绘：
由于节点的样式改变并不会影响它在文档流中的位置和文档布局时，称为重绘。
（四） DOM-事件高级
1、事件对象
a 事件对象是什么：
记录事件触发时的相关信息的对象。在事件绑定的回调函数的第一个参数就是事件对象。元素.addEventListener('click',function(event){})
b 事件对象的常用属性：
type:获取当前的事件类型
clientX或clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX或offsetY：获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值，不提倡使用keyCode
2、事件流
a 事件流是指事件完整执行过程中流动路径
b 事件冒泡：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
c 事件捕获：
从DOM的根元素开始执行对应的事件
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制（false代表冒泡阶段触发）)
d 阻止事件流动：
事件对象.stopPropagation()
e mouseover和mouseout会有冒泡效果，mouseenter和mouseleave无冒泡效果
f 阻止默认行为：e.preventDefault()
< a href="http://www.baidu.com">跳转到百度< /a>
< script>
let a = document.querySelector('a')
a.addEventListener('click', function(e){
e.preventDefault()
})
3、事件委托
a 事件委托是利用事件流的特征解决一些开发需求的知识技巧。
b 总结：
给父元素添加事件
事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
事件对象.target可以获得真正触发事件的元素
< script>
let ul = document.querySelect('ul')
ul.addEventListener('click',function(e) {
e.target.style.color = 'red'
})
< /script>
（五）DOM-网页特效
1、滚动事件
window.addEventListener('scroll', function(){
//执行的操作
})
2、加载事件
window.addEventListener('load',function(){
//执行的操作
})
window.addEventListener('DOMContentLoaded',function(){
//执行的操作
})
3、元素大小和位置
a scroll家族：页面滚动一段距离，让某些元素显示或隐藏。
获取宽度高：获取元素的内容总宽高，返回值不带单位；scrollWidth和scrollHeight
获取位置：获取元素内容往左，往上滚出去看不到的距离；scrollLeft和scrollTop(可修改)
window.addEventListener('scroll',function(){
let num = document.documentElement.scrollTop
console.log(num)
})
b offser家族：获取元素在页面中的位置
获取宽高：获取元素的自身宽高，包含元素自身设置的宽高、padding、border；offsetWidth和offsetHeight
获取位置：获取元素距离自己定位父级元素的左、上距离；offsetLeft和offsetTop(只读)
c client家族：
获取宽高：获取元素的可见部分宽高（不包含边框）；clientWidth和clientHeight
获取位置：获取左边框和上边框的宽度；clientLeft和clientTop
d 窗口尺寸改变时触发事件：
window.addEventListener('resize',function(){
执行的代码
})
e 检测屏幕宽度：
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
console.log(w)
})
（六） BOM-操作浏览器
1、window对象
a BOM：浏览器对象模型（window(navigator,location,document,history,screen )）
2、定时器-延时函数
a 设置延时函数：
setTimeout(回调函数，等待的毫秒数)
b 特点：
setTimeout()只执行一次
c 清除：
let timer = setTimeout(回调函数，等待的毫秒值)
clearTimeout(timer)
3、JS执行机制
a js是单线程的。
b 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
c 异步：在同一时刻时，可以执行多个任务。
d 同步任务：在主线程上执行，形成一个执行栈。
e 异步任务：js的异步是通过回调函数实现的（普通事件、资源加载、定时器）；异步任务相关添加到任务队列中（任务队列也叫消息队列）。
f js的执行机制：
先执行执行栈中的同步任务，再将异步任务放入任务队列中，最后，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务等待状态，进入执行栈，开始执行。
g 由于主线程不断的重复获取任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）.
4、location对象
a location 的数据类型是对象，它拆分并保存了URL地址的各个组成部分。
b 常用属性：
href:获取完整的URL地址，对其赋值时用于地址的跳转。
console.log(location.href)
location.href='http://www.baidu.com'
search：获取地址中携带的参数，符号“？”后面部分。
console.log(location.search)
hash：获取地址中的哈希值，符号“#”后面部分。
console.log(location.hash)
c 方法：
reload()：用来刷新当前页面，传入参数为true时表示强制刷新
< button>点击刷新< /button>
< script>
let btn = document.querySelector('button')
btn.addEventListener('click', function(){
location.reload(true)
})
< /script>
5、navigator对象
a navigator是对象类型，它记录了浏览器自身的相关信息。
b 属性：
userAgent:检测浏览器的版本及平台
!(function(){
const userAgent = navigator.userAgent
const android = userAgent.match(/(Android);?[\s/]+([\d.]+)?/)
const iphone = userAgent.math(/(iPhone\sOS))\s([\d]+)/)
if(android || iphone){
location.href='http://m.baidu.com'
}
})()
6、histroy对象
a histroy是对象数据类型，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
b 属性：
c 方法：
back():可以后退功能
forward():前进功能
go(参数):前进后退功能，参数如果是1，则前进1步。如果为-1，则后退1步。
7、swiper插件
a 插件：https://www.swiper.com.cn/
b 流程：了解插件用途--看在线演示---查看基本使用流程---查看API文档，去配置自己的插件
8、本地存储
a 基本介绍：数据存储在用户的浏览器中；设置、读取方便、甚至页面刷新不丢失数据；容量较大，sessionStorage和localStorage约5M左右。
b localStotage：
生命周期永久，除非手动删除，否则关闭页面也会存在；
可以多窗口（页面）共享（同一浏览器可以共享）；
以键值对的形式存储使用；
c 存储数据：
localStorage.setItem(key,value)
d 获取数据：
localStorage.getItem(key)
e 删除数据：
localStorage.removeItem(key)
f 存储复杂数据类型：
本地存储只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换为JSON字符串，再存储到本地。
g JSON.stringify(复杂数据类型)：将复杂数据类型转换为JSON字符串---存储到本地存储时
< script>
let obj = {
uname:'andj',
age:12,
address:'北京'
}
localStorage.setItem('obj',JSON.stringify(obj))//存储数据
console.log(localStorage.getItem('obj'))
console.log(JSON.parse(localStorage.getItem('key')))//提取数据
< /script>
h JSON.parse(JSON字符串)：将JSON字符串转换成对象-----取出数据时
9、sessionStorage对象
a 生命周期为关闭浏览器窗口；在同一窗口（页面）下数据可共享；以键值对的形式存储使用；
10、自定义属性
a 固有属性：标签天生自带的属性。
b 自定义属性：程序员自己定义的属性
获取：getAttribute('属性名')
设置：setAttribute('属性名'，'属性值')
删除：removeAttribute('属性名')
< div class="box">< /div>
< script>
let box = document.querySelector('.box')
box.setAttribute('myid',10)
console.log(box.getAttribute('myid'))
< /script>
c data-自定义属性：以data-开头的自定义属性，一律以dataset对象方式获取
< div class="box" data-id="10">< /div>
< script>
let box = document.querySelector('.box')
console.log(box.dataset.id)
< /script>
（七）正则表达式
1、基本介绍
正则表达式是用于匹配字符串中字符组合的模式。js中正则表达式也是对象类型。通常用来查找、替换那些符合正则表达式的文本。（过滤敏感词，表单验证、提取）
2、语法
a 定义：let 变量名 = /表达式/
let reg = /前端/
b test()方法：判断是否有符合规则的字符串；
regObj.test(被检测的字符串)
let str = "我是超级无敌大可爱！"
let reg = /小可爱/
let re = reg.test(str)
console.log(re) //true
c exec()方法：检索符合规则的字符串；
regObj.exec(被检索的字符串)
et str = "我是超级无敌大可爱！"
let reg = /小可爱/
let re = reg.exec(str)
console.log(re)//返回的是个数组
3、元字符
a 边界字符（表示位置，开头和结尾）
^：以谁开头
$：以谁结束
b 量词（表示重复的次数）
*：重复零次或多次
+：重复一次或多次
？：重复零次或一次
{n}：重复n次
{n,}：重复n次或更多次
{n,m}：重复n到m次
c 字符类（比如 \d 表示0~9）
[]：匹配字符集合（只要包含任意一个字符，都返回true）
console.log(/[abc]/.test('andy'))//true
[]里面加”-“字符：表示一个范围([a-z],[a-zA-Z],[0-9])
console.log(/[ ^a-z]$/.test('c'))//true
.：匹配除换行符之外的任何单个字符。
4、修饰符
i：字母不区分大小写
g：匹配所有满足正则表达式的结果
replace：替换--字符串.replace(/正则表达式/,'替换文本')
标签：function,JavaScript,DOM,对象,元素,基础,let,事件 From： https://www.cnblogs.com/feibinstudy/p/16871935.html