JavaScript基础

JS内嵌式

<script>
    浏览器弹窗： alert('浏览器弹窗');
</script>

JS外部式

<script src="js路径"></script>

JS行内式

<input type="button" value="按钮内容" onclick="alert('弹窗内容')">

输入输出语句

警示框弹出：alert（‘内容’）;
控制台打印输出信息：console.log(‘内容’);
控制台打印元素对象信息（详细）：console.dir(‘内容’);
弹出输入框;prompt(‘标题内容’);
弹出选择框：confirm();

变量

命名规范：字母、数字、下划线、美元符号构成，区分大小写，禁止数字开头，禁止关键字、保留字，驼峰命名法（首字母小写，后面单词首字母大写）。
声明变量：var 变量名;
赋值：变量名 = 值;
变量初始化：声明同时并赋值

简单数据类型

数字型：Number（八进制数字前加0，十六进制数字前加0x，最大值：Number.MAX_VALUE，最小值：Number.MIN_VALUE，无穷大：Infinity，无穷小：-Infinity，非数字：NaN）
布尔型：Boolean（真：true/1，假：false/0）
字符串型：String（转义符：换行：\n，斜杠：\，单引号：‘，双引号：’'，tab缩进：\t，空格：\b，长度检测：变量名.length）
不给值：Undefined
空值：Null

复杂数据类型（Object）

获取变量数据类型 -->

typeof 变量名

数据类型转换

转换字符串：变量名.toString()/String(变量名)/加号拼接字符串
转换数字型：parseInt(变量名)/parseFloat(变量)/Number(变量)/（- * /号隐式转换）
转换布尔型：Boolean(变量名)

标识符、关键字、保留字

标识符：开发人员为变量、属性、函数、参数取的名字（不能为关键字或保留字）
关键字：JS已经使用的
保留字：预留的关键字

递增/减运算符

前置递增：++变量名（先递增，后返回原值）
后置递增：变量名++（先返回原值，后递增）

比较运算符

大于号：<
小于号：>
大于等于号：>=
小于等于号：<=
判等号（会转型）：==
不等号：!=
全等号（值与数据类型都一致）：=== 或 !==

逻辑运算符

与：表达式1 && 表达式2
或：表达式1 || 表达式2
非：!表达式
逻辑与短路运算：表达式1 && 表达式2（表达式1为真返回表达式2.表达式1为假返回表达式1）
逻辑或短路运算：表达式1 || 表达式2（表达式1为真返回表达式1.表达式1为假返回表达式2）

赋值运算符

直接赋值：=
加减数值后赋值：+=、-=（变量 +=/-= 值相当于变量 = 变量 +/- 值）
乘除取模后赋值：*=、/=、%=（变量 *=//=/%= 值相当于变量 = 变量 *//% 值）

运算符优先级

小括号：（）
一元运算符：++、–、！
算术运算符：先*、/、%后+、-
关系运算符：>、>=、<、<=
相关运算符：、!=、=、!==
逻辑运算符：先&&后||
赋值运算符：=
逗号运算符：,

流程控制语句

分支语句

if分支语句： 条件表达式为真执行执行语句，否则不执行

if（条件表达式）{
  执行语句;
}

if else双分支语句： 条件表达式为真执行执行语句1，否则执行执行语句2

if（条件表达式）{
  执行语句1;
} else {
  执行语句2;
}

if else if多分支语句： 条件表达式1为真执行执行语句1然后退出，条件表达式1为假判断条件表达式2，为真则执行执行语句2，以此类推所有条件表达式都不满足则执行最后执行语句

if（条件表达式1）{
  执行语句1;
} else if （条件表达式2）{
  执行语句2;
} else if （条件表达式3）{
  执行语句3;
} else {
  最后执行语句;
}

switch语句： 条件表达式值匹配case后的值（全等），匹配上哪个执行哪个，都没有匹配上就执行最后执行语句（没有break则不会退出switch而是继续执行下一个case）

switch（条件表达式）{
  case value1:
  执行语句1;
  break;
  case value2:
  执行语句2;
  break;
  ...
  default:
  最后执行语句;
}

循环语句：重复执行某些代码

for循环：（重点使用）

for（初始化变量（声明变量，用作计数器）; 条件表达式（终止的条件）; 操作表达式（更新计数器变量）{
  循环体;
}

双重for循环：

for（外层初始化变量（声明变量，用作计数器）; 外层条件表达式（终止的条件）; 外层操作表达式（更新计数器变量）{
  for（里层初始化变量（声明变量，用作计数器）; 里层条件表达式（终止的条件）; 里层操作表达式（更新计数器变量）{
    执行语句;
  }
}

while循环： 条件表达式结果为真执行循环体，否则退出循环

while（条件表达式）｛
  循环体;
｝

do while循环： 先执行循环体再执行条件表达式，表达式结果为真继续执行循环体，否则退出循环继续执行后面代码

do｛
  循环体;
｝while（条件表达式）

结束循环关键字： continue退出本次循环，break退出整个循环

---

三元表达式

条件表达式 ？表达式1 : 表达式2（条件表达式为真返回表达式1的值否则返回表达式2的值，简化版双分支语句）

---

命名规范

标识符：变量、函数命名必须有意义，变量名称一般用名词，函数名称一般用动词
操作符：左右两侧各保留一个空格
单行注释：前面有一个空格

---

数组

定义：一组数据的集合，可以存储在单个变量下
创建：
var 数组名 = new Array（）; （括号内一个值为数组长度）
var 数组名 = [数据,数据，数据,数据];（常用）
获取元素：数组名[索引]（索引号从0开始）
遍历数组：通过for循环遍历数组
数组长度：数组名.length

---

函数

声明函数：

function 函数名（形参1，形参2...）{
  函数体
}

调用函数：

函数名(实参1，实参2...);

返回值（终止函数）：函数遇到return会把后面结果返回给函数调用者，并且只能返回（最后）一个值或数组（return有终止函数作用）
实参存储：arguments（函数内置对象，存储所有传递的实参，伪数组形式，具有length属性，按照索引方式存储数据，不具有数组的push，pop等方法）
函数表达式（匿名函数）：

var 变量名 = function(){
  函数体
}
变量名();

---

作用域

全局作用域：作用于整个js文件
局部（函数）作用域：作用于函数内部
全局变量：在全局作用域下的变量，全局下都可使用（函数内部没有声明直接赋值的变量属于全局变量）
局部变量：在局部作用域下的变量，只能韩式内部使用（函数形参可以看做局部变量）
作用域链：内部函数访问外部函数变量采用链式查找方式（就近原则）

---

对象

创建对象：

var 对象名 = {
  属性名：属性,
  方法名：方法,
   ...
};

var 对象名 = new Object();

obj.属性名 = 属性;

obj.方法名 = 方法;

使用对象属性：对象名.属性名/对象名['属性名']
使用对象方法：对象名.方法名()

---

构造函数

抽取对象公共部分封装到函数里
创建构造函数：构造函数名首字母大写，不需要return返回值，调用函数必须使用new

function 构造函数名(){
  this.属性 = 值;
  this.方法 = function(){}
}
new 构造函数名();

遍历对象：k输出的是属性名，对象名[k]输出的是属性值

for(var 变量名(k) in 对象名){
}

---

内置对象

数学对象：Math不是构造函数，不需要new调用
日期对象：Date是构造函数，需要new调用，没有参数返回系统当前时间，毫秒计算valueOf、getTime、new前加+(最常用)、Date.new()

• 数组对象：Array是构造函数，需要new调用

  • 检测数组：instanceof置于数组名和Array之间左右空格，Array.isArray(参数);（优先，h5新增方法，IE9以上版本支持）

  • 添加删除数组对象：

    • 末尾追加元素：数组名.push(新数组元素);，完毕后返回新数组长度
    • 开头添加元素：数组名.unshift(新数组元素);，完毕后返回新数组长度
    • 删除数组最后一个元素：数组名.pop();，完毕后返回删除的元素
    • 删除数组第一个元素：数组名.shift();，完毕后返回删除的元素

  • 数组排序：

    • 翻转数组：数组名.reverse();
    • 数组排序（冒泡排序）：a-b是升序，b-a是降序
      数组名.sort(function(a,b){
      return a-b/b-a;
      });

  • 数组索引：

    • 返回数组元素索引号：数组名.indexOf(数组元素);，（找不到该元素索引号返回-1，从前往后查找），数组名.lastIndexOf(数组元素);，（找不到该元素索引号返回-1，从后往前查找）

  • 数组转换字符串：数组名.toString();，数组名.join('分隔符');

  • 连接两个或多个数组：concat();

  • 数组截取：slice();

  • 数组删除：splice(开始位置，删除个数);（重点）

• 字符串对象：所有方法不会修改字符串只会开辟新的存储空间
  • 查找字符位置：indexOf('查找字符'，起始位置);（找不到返回-1）
  • 查找字符位置（从后向前）：lastIndexOf();
  • 查找位置字符：charAt(索引号);（返回指定索引号位置的字符）
  • 查找位置ASCII码：charCodeAt(索引号)（返回指定索引号位置的ASCII码）
  • 查找位置字符：str[索引号];（返回指定索引号位置的字符，IE8+支持）
  • 字符串操作：
    • 拼接：concat('字符串1'，'字符串1');
    • 截取：substr(起始位置，截取个数)
    • 替换：replace(被替换字符，替换后的字符)
    • 转换数组：split(‘分隔符’)
    • 截取：slice(起始位置，结束位置)（结束位置取不到）
    • 截取：substring(起始位置，结束位置)（结束位置取不到，不接受负值）

---

DOM（文档对象模型）

顶级对象：document
文档：document
元素（所有标签）：element
节点（所有内容）：node
打印元素对象：console.dir();（打印元素对象查看属性和方法）
获取元素：document.getELementById('ID名')
获取标签名集合：document.getELementByTagName('标签名')（伪数组存储）
获取类名集合：document.getELementByClassName('类名')（H5新增）
获取指定选择器第一个元素：document.querySelector('选择器')（选择器加符号，H5新增）
获取指定选择器集合：document.querySelectorAll('选择器')（选择器加符号，H5新增）
获取body元素：document.body
获取html元素：document.documentELement
事件三要素：事件源，事件类型，事件处理程序
修改元素内容：element.innerText()（不识别html标签，非标准，去除空格和换行）
修改元素内容：element.innerHTML()（识别html标签，w3c标准，保留空格和换行）

• 样式属性操作：
  • 行内样式操作：element.style
  • 类名样式操作：element.className
• 获取属性值：
  • 获取内置属性值：element.属性
  • 获取自定义属性值：element.getAttribute(‘属性’);
  • H5新增获取自定义属性值：element.dateset.属性/[‘属性’]（多个-链接使用驼峰命名法，IE11以上兼容）
• 设置属性值：
  • 设置内置属性值：element.属性 = ‘值’;
  • 设置自定义属性值：element.setAttribute(‘属性’, ‘值’);

移除属性值：element.removeAttribute(‘属性’);
自定义属性：属性开头添加date-

• 节点操作：
  • 父级节点：element.parentNode
  • 兄弟节点：node.nextSibling（当前元素下一个兄弟节点，包含所有元素及文本节点）
  • 兄弟元素节点：node.nextElementSibling（当前元素下一个兄弟节点，IE9以上支持）
  • 兄弟节点：node.previousSibling（当前元素上一个兄弟节点，包含所有元素及文本节点）
  • 兄弟元素节点：node.previousElementSibling（当前元素上一个兄弟节点，IE9以上支持）
  • 子级节点：parentNode.childNodes（包含所有元素及文本节点）
  • 子级元素节点：parentNode.children/parentNode.children[索引号]（实际开发常用）
  • 第一个子级节点：parentNode.firstChild
  • 第一个子级元素节点：parentNode.firstElementChild（IE9以上支持）
  • 最后一个子级节点：parentNode.lastChild
  • 最后一个子级元素节点：parentNode.lastElementChild（IE9以上支持）

动态创建元素节点：document.createElement(‘元素’)
添加节点：node.appendChild(child)/node.insertBefore(child, 指定元素)（把元素添加到指定元素前面，先创建后添加）
删除节点：node.removeChild(child)
复制节点：node.cloneNode()（先复制后添加，括号内为空或false为浅拷贝不复制内容，括号内为true为深度拷贝复制所有内容）

• 动态创建元素：
  • document.write()（直接将内容写入，但文档流执行完毕调用这句话会导致页面重绘，很少使用）
  • element.innerHTML（不采用拼接字符串而采用拼接数组再转换成字符串形式效率比document.createElement()高）
  • document.createElement()

传统注册事件：on开头（具有唯一性）
传统删除事件：eventTarget.onclick = null;
已弃用注册事件：attachEvent(‘事件’, 事件处理程序)（事件处理程序可添加不加()的调用函数，IE9以下支持）
已弃用删除事件：detachEvent(‘事件’, 事件处理程序)（事件处理程序可添加不加()的调用函数，IE9以下支持）

• 方法监听注册方式：
  • 注册事件：eventTarget.addEventListener(‘事件’, 事件处理程序, false/true)（eventTarget事件源，事件不加on，同一元素同一事件可以添加多个处理程序，事件处理程序可添加不加()的调用函数，IE9以上支持，false（处于冒泡阶段）/true（处于捕获阶段））
  • 删除事件：eventTarget.removeEventListener(‘事件’, 事件处理程序)（eventTarget事件源，事件不加on，事件处理程序可添加不加()的调用函数，IE9以上支持）

事件对象：event（系统自动创建到事件侦听函数形参中，表示对事件的状态，可简写成evt、e，IE678中使用e = e || window.event;兼容）
返回触发事件对象：e.target（标准，this返回的是绑定事件对象）/e.srcElement（非标准写法，IE6-8适用）
返回事件类型：e.type（返回类似click等，不带on）
阻止默认事件：e.preventDefault()（标准写法，有兼容性问题，阻止链接或按钮功能）/e.returnValue（非标准写法，IE6-8适用）
阻止事件冒泡（从小到大）：e.stopPropagation()（标准写法，有兼容性问题）/e.canceBubble = true（非标准写法，IE6-8适用）

---

BOM（浏览器对象模型）

顶级对象：window
窗口加载事件：window.onload = function(){}/window.addEventLinear(‘load’, function(){});（文档内容加载完毕后执行函数，包括样式表，图片，flash等，传统方式只能写一个多个的时候以最后一个为准，addEventLinear没有限制）
窗口加载事件：document.addEventLinear(‘DOMContentLoaded’, function(){})（DOM加载完毕不包括样式表，图片，flash等，比load快，IE9以上支持）
调整窗口大小事件：window.onresize = function(){}/window.addEventLinear(‘resize’, function(){})
当前屏幕宽度：window.innerWidth
定时器：window.setTimeout(function(){}， 延时毫秒数) （调用函数也可称为回调函数，调用一次结束）
停止定时器：window.clearTimeout(定时器名字)
循环定时器：window.setInterval(调用函数， 延时毫秒数)（间隔延时毫秒数循环调用函数）
停止循环定时器：window.clearInterval(循环定时器名字)
this指向：全局作用域或普通函数指向window，方法中指向调用者，构造函数中指向实例对象
location对象：获取或设置窗体的URL
统一资源定位符：URL（protocol（通信协议常用http，ftp，maito等）😕/host（主机/域名www.baidu.com）[:port（端口号http默认端口80）]/path（路径由/隔开的字符串，表示主机目录或地址）/[?query（参数书以键值对的形式用&符号分隔）]#fragment（片段#后内容常见于链接锚点），http://www.baidu.cn/index.html?name=andy&age=18#link）

• location对象属性：
  • 获取或设置整个URL：location.href（重点）
  • 返回主机（域名）：location.host
  • 返回端口号：location.port
  • 返回路径：location.pathname
  • 返回参数：location.search（重点）
  • 返回片段：location.hash
• location对象方法：
  • 跳转页面（重定向页面）：location.assign()（可后退）
  • 替换当前页面：location.replace()（不可后退）
  • 重新加载页面：location.reload()（等同于刷新，参数为true等同于强制刷新）
• navigator对象：包含浏览器信息
  • 返回user-agent头部值：userAgent
• history对象：包含访问过的URL（实际开发少用，多用于OA办公系统）
  • 后退：back（）
  • 前进：forward()
  • 前进后退：go(参数)（参数为1前进1个页面，参数为-1后退1个页面）

---

PC端网页特效

• 元素偏移量（获得任意样式表中样式值，获得数值没有单位，用于获取元素位置，想改值使用style）：offset
  • 返回带有定位的父元素（没有父级返回body）：element.offsetParent
  • 返回带有定位的父元素上方偏移：element.offsetTop（返回数值不带单位，常用于获取元素位置）
  • 返回带有定位的父元素左方偏移：element.offsetLeft（返回数值不带单位，常用于获取元素位置）
  • 返回自身包括padding、边框、内容区的宽度：element.offsetWidth（返回数值不带单位）
  • 返回自身包括padding、边框、内容区的高度：element.offsetHeight（返回数值不带单位）
  • offset只能获取元素大小位置，style可以改值
• 元素可视区（用于获取元素大小）：client
  • 返回元素上边框大小：element.clientTop
  • 返回元素左边框大小：element.clientLeft
  • 返回自身padding+内容区的宽度：element.clientWidth（不包含边框，返回值不带单位，常用于获取元素大小）
  • 返回自身padding+内容区的高度：element.clientHeight（不包含边框，返回值不带单位，常用于获取元素大小）
• 元素滚动（用于获取滚动距离）：scroll（返回值不带单位）
  • window.scroll(x, y)（xy不加单位）
  • 返回被卷去的上侧距离：element.scrollTop（常用于获取滚动距离）
  • 返回被卷去的左侧距离：element.scrollLeft（常用于获取滚动距离）
  • 返回自身实际宽度：element.scrollWidth（不含边框）
  • 返回自身实际高度：element.scrollHeight（不含边框）

页面滚动距离：window.pageXOffset/window.pageYOffset

---

移动端网页特效

• 触屏事件：touch
  • 触摸DOM元素触发：touchstart
  • 在DOM元素上滑动触发：touchmove
  • 在DOM元素上移开触发：touchend
• 触屏事件对象：touchEvent
  • 触摸屏幕所有手指列表：touches
  • 触摸当前DOM元素手指列表：targetTouches
  • 手指状态改变的列表：changedTouches

阻止默认屏幕滚动：e.preventDefault();
监听过度完成事件：transitionend
返回元素类名：document.classList
添加类名：element.classList.add(‘类名’)
删除类名：element.classList.remove(‘类名’)
切换类名：element.classList.toggle(‘类名’)（有则删无则加）

• 移动端click300ms延时事件解决方案：
  • 禁用缩放：<meta name="viewport"content=“user-scalable=no”>
  • touch封装：手指触摸屏幕时记录触摸时间，手指离开屏幕用离开时间减去触摸时间，时间小于150ms且没有滑动屏幕则定义为点击
  • 使用插件：fastclick插件解决

触摸滑动插件：Swiper（https://www.swiper.com.cn/）
移动端常用插件：superslide（https://www.superslidecom）iscroll（https://github.com/cubiq/iscroll）
移动端视频插件：zy.media.js
前端常用框架：Bootstrap，Vue，Angular，React等（PC端和移动端通用）

---

本地存储（只能存储字符串）

window.sessionStorage（容量约5M，生命周期为关闭浏览器窗口，在同一窗口下数据共享，键值对形式存储）
存储数据：sessionStorage.setItem(key, value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
window.localStorage（容量约20M，生命周期永久生效，在多窗口下数据共享，键值对形式存储）
存储数据：localStorage.setItem(key, value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
对象转字符串：JSON.stringify()
字符串转对象：JSON.parse()

---

鼠标事件

点击：onclick
双击：ondblclick
经过：onmouseover（会冒泡）
经过：mouseenter（不会冒泡）
离开：onmouseout（会冒泡）
离开：mouseleave（不会冒泡）
获得焦点：onfocus
失去焦点：onblur
移动：onmousemove
弹起：onmouseup
按下：onmousedown
禁止鼠标右键菜单：contextmenu
禁止鼠标选中：selectstart

---

鼠标事件对象

事件对象：event
鼠标事件对象：mouseEvent
返回鼠标相对于浏览器可视区X坐标：e.clientX
返回鼠标相对于浏览器可视区Y坐标：e.clientY
返回鼠标相对于文档页面X坐标：e.pageX（IE9以上支持）
返回鼠标相对于文档页面Y坐标：e.pageY（IE9以上支持）
返回鼠标相对于电脑屏幕X坐标：e.screenX
返回鼠标相对于电脑屏幕Y坐标：e.screenY

---

键盘事件

松开：onkeyup（不区分大小写）
按下：onkeydown（不区分大小写）
按下：onkeypress（不识别功能键如ctrl shift 箭头，按下顺序以keydown为先执行，区分大小写）
文本框输入：oninput

---

键盘事件对象

事件对象：keyboardEvent
返回ASCII值：keyCode

---

表单事件

提交：submit