javaScript 代码 总结

JavaScript 基础篇

一.基础

1. var age = 18 ； 变量
2. vlaet (’’); 弹出警示框
3. console.log () 控制台输出
4. prompt () 输入框

二. 数字型 number

1. Number.MAX_VALUE 最大值
2. Number.MIN_VALUE 最小值
3. Number.MIN_VALUE * 2 无穷大(Infinity )
4. 前面加 - 负的无穷大
5. isNaN(13) 判断是否为数字 返回 true或false

三. 字符串型 String

1. 注意外双内单，外单内双！
2. 字符串转义符
3. \n 换行符 ； \ \ 斜杠 \ ； ’ 单引号 ； " 双引号 ； \t tab 缩进 ； \b 空格
4. .length 检测长度
5. ’ ’ + ’ ’ 字符串拼接
6. ’ ’ + age + ’ ’ 拼接加强

四. 布尔型 Boolean

1. true 对的 值为1
2. false 错的 值为0

五. Undefined 和 Null

1. Undefined 未定义的 (字符串可以和他相加，数字型和布尔型加他显示错误)
2. Null 空对象

一. typeof 检测数据类型

1. typeof num 中间用空格隔开检测对象

二. 获取数据类型—字面量

1. 字面量就是源代码中的一个固定值的说法。如；8；9；‘汪思华’；ture

一. 数据类型转换—转换字符串

1. 变量.toString() 这个是方法
2. String(变量) （强制转换）
3. 利用 + 拼接 （主要用这个，隐式转换）

二. 数据类型转换—转换为数字型（重点）

1. parseInt(变量) 取整数；会自动去除后面单位
2. parseFlsat(变量) 会有浮点数 ；会自动去除后面单位
3. Number(变量)
4. 利用 + - * / 隐式迭代

三. 数据类型转换—布尔型

1. Boolean() 函数

一. 算数运算符

1. ‘+、-、*、/、%’ 浮点数不能直接运算（精准不好）

二. 前置递增运算符 和 后置

1. num-- ；num++ （++num；–num 前置是立即执行）；

三. 比较运算符

1. < 、> 、<= 、>= 、== 、 != 、=== 、!==

四. 逻辑运算符

1. && 、|| 、 ！（注意逻辑中断很重要，前面的确定后，后面就不会再运行，如 num++ 就不会再执行）

五. 赋值运算符

1. = 、+=、-=、*=、/=、%=

六. 运算符优先级

1.  ()
    ++ ；-- ；！
    先 * / 后 + -
    >=  <=
    ==  !=  ===  !==
    先 && 后 ||
    =
    ,
   

一. 流程控制

1. 分为顺序流程、分支结构、循环结构；

二. 分支结构

1. if…else…if
2. switch…case
3. break 退出（ switch 注意要加 ）

三. 循环结构

1. for 循环
2. 双重 for 循环 （案例 99乘法表等）
3. while 循环
4. do…while
5. continue 关键字（跳出本次循环）
6. break 关键字 （跳出整个循环）

一. 数组的创建Array

1. new Array() 利用 new 创建
2. var 数组名 = [ ]； 利用字面量
3. .length 数组长度

一. 函数的使用

1. function fn(形参) {} fn(实参) 这个 fn 是函数名，自定义函数（命名函数） 调用可以写在任意位子
2. var fn = function() {} fn(实参) 这个 fn 是变量， 函数表达式方式（匿名函数） 调用的代码只能写在函数体后面

二. 函数的返回值

1. return 语句

三. 作用域和预解析

1. 变量的作用域和作用域链
2. 函数预解析和变量预解析

----------------------------------------------------------------------------

创建对象

一. 创建对象的三种方式

1. var object = { }； 字面量创建 用 {属性名：属性值,（用逗号隔开） } 调用： object.属性名 或 方法名()
2. var obj = new Objecti(); 利用 new 创建 obj.属性名 = 属性值；(用分号隔开) 调用：跟上面一样
3. function Star(uname) {this.unmae = uname；(用分号隔开) }； var obj = new Star()； 利用构造函数创建对象；调用； 跟上面差不多
4. for…in 遍历对象 k 是属性名 对象名[k]是属性值

二. 内置对象—数学对象 Math (不需要 new)

1. Math.PI 圆周率
2. Math.max() 最大值和最小值 min()
3. Math.abs() 绝对值（都是正数）
4. Math.floor() 向下取整
5. Math.ceil() 向上取整
6. Math.round() 四舍五入 就近取整 注意 -3.5 取整后是 -3 (向大的取整)
7. Math.rondom() 随机数方法 0 <= x < 1(要取整数看案例，有一串专用代码)

三. 内置对象—日期对象 Date() （他是函数，需要new才能使用）

1. var date = new Date() 1. 如果没有参数，则就是现在的日期时间。（要先实例化才能使用里面的方法）
2. 有参数就是自己添加的时间，数字型：2019,10,01；字符型(主要使用)：‘2019-10-1 8:8:8’
3. date.getFullYear() 获取年份
4. date.getMonth() 获取当月 0 - 11 （0是12月）
5. date.getDate() 获取当天日期
6. date.getDay() 获取星期 0 - 6 （0是周日）
7. date.getHours() 获取当前小时
8. date.getMinutes() 获取当前分钟
9. date.getSeconds() 获取当前秒钟

获取总的毫秒数三个方法：

1. date.valueOf()；date.getTime()
2. var date = +new Date(); 通过 +new
3. Date.now() (兼容不好 h5新增)

四. 内置对象—数组对象 Array() （不需要 new）

1. 创建：1.字面量方式 var arr = [ ] ; 2. var arr =new Array()（里面不填为空数组，填3则数组length为3）；
2. instanceof 运算符 判断一个对象是否属于某种类型 。例：(检测对象 instanceof Array或String、Number)中间空格隔开 （用于做数组去重）(返回的是 true 和 false)
3. Array.isArray(参数) 判断一个对象是否为数组 (H5中的方法 有兼容问题)(返回的是 true 和 false)

添加或删除元素的方法：(用来筛选数组)

1. push() 末尾添加一个或多个元素 (返回的值是 新的长度)
2. unshift() 开头添加一个或多个元素 (返回的是 新的长度)
3. pop() 删除末尾的一个数组元素 (返回的值是 删除的元素的值)
4. shift() 删除开头的一个数组元素 (返回的值是 第一个元素的值)

数组排序：(用来翻转数组和冒泡排序)

1. reverse() 颠倒数组中元素的顺序，无参数。 （改变原来的数组，返回新的数组）
2. sort() 对数组的元素进行排序 （改变原的数组，返回新的数组，这个要搭配一个函数使用） 数组名.sort(function(a, b) {
   return a - b; 这个是升序的顺序 （ return b - a; 这个是降序的顺序）
   })

数组索引：(用来做数组去重) （这个也是用来查找字符所在字符串位置的，返回的是那个字符的索引号。如果没有，也是返回 - 1）

1. indexOf() : 查找数组中给定元素的第一个的索引（返回索引号，如果没有这个元素，返回 - 1）
2. lastIndexOf() : 查找数组中最后一个的索引（返回索引号，如果没有这个元素，返回 - 1）

数组转换为字符串：

1. toString() ： 数组转换为字符串，逗号分隔每一项。 （返回一个字符串）
2. join(‘分隔符’) ： 用于把数组中的所以元素转换为一个字符串。 （返回一个字符串）（分隔符可以填 , - & 等等）

其他方法：(重点用 splice())

1. concat() ： 连接两个或多个数组 不影响元数组（返回一个新的数组）
2. slice() ： 数组截取slice(begin,end) （返回被截取项目的新数组）
3. splice() ： 数组删除 splice(第几个开始，要删除的个数) （返回被删除项目的新数组！！注意：这个会影响原数组）

五. 内置对象—字符串对象 String()

根据位置返回字符（重点）

1. charAt(index) 根据位置返回字符 （用for循环charAt(i)。可以遍历所有字符）
2. charCodeAT(index) 根据位置 返回相应索引号的字符ASCII值，键盘用
3. str[index] h5新增 跟1一样

字符串操作方法（重点）

1. substr(start, length) 从start 开始，length 是区的 个数。（用于截取字符串）
2. concat(‘str1,，str2…’) 用于连接多个字符串。不过一般直接用 +
3. replace(‘被替换的字符’,‘替换为的字符’) 用于在字符串中替换字符
4. split(‘分隔符’) 字符串变为数组。返回一个新数组
5. toUpperCase() 转换为大写
6. toLowerCase() 转换为小写

----------------------------------------------------------------------------

JavaScript Web API 篇

一. Web API DOM篇—获取元素

通过 ID 获取

1. document.getElementById(‘id’); （获取带有 ID 的元素对象）
2. console.dir() 打印我们返回的元素对象（查看里面的属性和方法）
3. typeof element 查看元素类型

通过标签名获取

1. document.getElementsByTagName(‘标签名’); 返回带有指定标签名的对象的集合。（div，p，span等）

H5新增获取

1. document.getElementsByClassName(‘类名’) 根据类型返回元素对象的结合（class类名）
2. document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象（注意 里面记得叫 # 或 . ）
3. document.querySelectorAll(‘选择器’); 根据指定选择器返回（当选择器有多个时使用）

特殊元素获取 body html

1. doucumnet.body // 返回body元素对象
2. document.documentElement // 返回html元素对象

一. Web API DOM篇—鼠标事件（注意新增的不加 on）

1. onclick 鼠标点击左键触发
2. onmouseover 鼠标经过触发 （他经过子盒子也会触发，而 mouseenter 不会触发冒泡）
3. onmouseout 鼠标离开触发 （他经过子盒子也会触发，mouseleave 不会触发冒泡）
4. onfocus 获得鼠标焦点触发
5. onblur 失去鼠标焦点触发
6. onmousemove 鼠标移动触发
7. onmouseup 鼠标弹起触发
8. onmousedown 鼠标按下触发
9. contextmenu 我们可以禁用右键菜单 （配合禁止默认事件使用）
10. selectstart 禁止选中文字 （配合禁止默认事件使用）

二. Web API DOM篇—操作元素

操作元素内容：

1. element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉（innerText 不识别 html标签 非标准 去除空格和换行）
2. element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行（innerHTML 识别 html标签 W3C标准 保留空格和换行）

操作常见元素属性：

1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title

表单元素操作：

1. type、value、checked、selected、disabled(为true是禁用表达或禁止点击) （有个flag算法）

操作元素样式属性：

1. element.style 行内样式操作
2. element.className 类名样式操作

排他思想：

1. 首先清除其他人，再设置自己

自定义属性的操作：
1.获取属性值：

1. element.属性 （获取内置属性值（元素本身自带的属性））
2. element.getAttribute(‘属性’); （主要获得自定义的属性 （标准） 我们程序员自定义的属性）

2.设置属性值：

1. element.属性 = ‘值’ （设置内置属性值）
2. element.setAttribut