一名前端小白的学习笔记(1/N)--javascript

javascript

• Javascript是
  • JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
  • JavaScript 由数行可执行计算机代码组成。
  • JavaScript 被设计用来向 HTML 页面添加交互行为。
    • JavaScript 通常被直接嵌入 HTML 页面。
  • JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
  • 所有的人无需购买许可证均可使用 JavaScript。
  • ！js是运行在客户端（服务器端node.js）的一门动态的，弱类型的，可扩展的（可以基于原型开发）的轻量的脚本语言
• javascript能做什么
  • JavaScript 为 HTML 设计师提供了一种编程工具
  • JavaScript 可以将动态的文本放入 HTML 页面
  • JavaScript 可以对事件作出响应
  • JavaScript 可以读写 HTML 元素
  • JavaScript 可被用来验证数据
  • JavaScript 可被用来检测访问者的浏览器
  • JavaScript 可被用来创建 cookies
• js引擎v8
  • 解析js代码
• js组成
  • ECMAScript
    • 语法规范
    • js书写位置
      • 行内式
        • alert（）中除纯数字都需要加引号 引号内外单双
      • 内嵌式
      • 外链式
        • <script src=""></script>
        • 外链式中别写字
    • js输出语句
      • pompt、alert、confirm会阻断后续语句
      • prompt(“描述信息”)输入框
      • alert("警告信息")
      • console.log("控制台信息")
      • confirm（“确认框”）
      • document.write();写入html输出
        • 在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
      • innerHTML写入HTML元素
      • console.dir()打印对象
    • js语句
      • 在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令
      • 值、运算符、表达式、关键词和注释
      • 分号分隔 JavaScript 语句
      • JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性
      • 如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符
      • JavaScript 语句可以用花括号（{...}）组合在代码块中。
      • 代码块的作用是定义一同执行的语句
    • js语法
      • JavaScript 语句定义两种类型的值：混合值和变量值。
        • 混合值被称为字面量（literal）。
          • 书写混合值最重要的规则是：
            • 写数值有无小数点均可：
          • 字符串是文本，由双引号或单引号包围
        • 变量值被称为变量
          • 变量用于存储数据值。
            • JavaScript 使用 var 关键词来声明变量
            • = 号用于为变量赋值
      • JavaScript 使用算数运算符（+ - * /）来计算值
        • JavaScript 使用赋值运算符（=）向变量赋值
      • JavaScript 表达式
        • 表达式是值、变量和运算符的组合，计算结果是值
        • 表达式也可包含变量值
        • 值可以是多种类型，比如数值和字符串
      • JavaScript 关键词用于标识被执行的动作。
        • var 关键词告知浏览器创建新的变量
      • js注释
        • 双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
          • 注释会被忽略，不会被执行
      • js标识符
        • 名称
        • 用于命名变量（以及关键词、函数和标签）
        • 所有 JavaScript 变量必须以唯一的名称的标识
      • 大小写敏感
      • 使用Unicode字符集
      • 驼峰式
    • js变量
      • JavaScript 变量是存储数据值的容器
      • 初始化:声明变量+赋值
      • 声明变量的特殊情况
        • 只声明不赋值 undefined
        • 不声明不赋值
          • window.name
        • 只赋值不声明 变成全局变量
      • 更新变量 以最后的值为准
      • 声明多个变量 逗号隔开
      • 变量可存在两种值，即原始值和引用值
        • 原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象
        • 原始值
          • 每个原始类型定义了它包含的值得范围及其字面量表示形式
          • undefined Null Bollean Number String
          • 存储在栈（stack）中的简单数据段，值直接存储在变量访问的位置
          • 原始类型占据的空间是固定的，因此可以将他们存储在较小的内存区域-栈中，便于迅速查询变量的值
        • 引用值
          • 存储在堆（heap）中的对象，存储在变量处的值是一个指针，指向存储对象的内存处
        • construtor属性
          • 返回所有Javascript变量的构造器函数
          • 可以通过检查constructor属性来确定某个对象是否为数组()
            • function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }
            • function isArray(myArray) { return myArray.constructor === Array; }
    • js命名规范
      • 可以使用汉字，但没必要
      • 驼峰
      • 可以使用_和$
      • 由数字、字母、_、$组成且不以数字开头
      • 大小写敏感
      • 不要使用关键字和保留字
      • 使用的变量名要有语义
    • js数据类型
      • 当您声明新变量时，可以使用关键词 "new" 来声明其类型
        • javascript变量均为对象
        • JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。
      • 数据类型是用来区分数据
      • 所有js数据类型都有valueOf()和toString()
      • js拥有动态类型
      • 输入框输入都是字符串
      • 基本数据类型
        • number
          • 在所有的数字运算中，js会尝试将字符串转化为数字（除了+）
          • 始终以双精度浮点数来存储，根据IEEE754标准

            • 

          • 整数
            • 被精确到15位
          • 小数
            • 最大数是17位
            • 精度问题
              • 1）使用乘除法
          • NaN
            • 一般只用于数据调试的时候使用，打印看数据的时候使用not a number
          • isNaN（判断的数据）
            • 这个方法用来判断非数字，并且返回一个值
            • 如果是数字，返回的是false
            • 如果是非数字返回true
            • 全局js函数
          • infinity
            • 计算数时超出最大可能数范围时返回的值
          • MAX_VALUE
          • MIN_VALUE
          • NEGATIVE_INFINITY
          • POSITIVE_INFINITY
          • 数字属性不可用于变量
          • 我们也可以使用 new 关键字将Number定义为一个对象
          • toString()
          • toEcponential()
            • 返回字符串，包含已经四舍五入并使用科学计数法的数字
            • 参数定义小数点后的字符数
          • toFixed()
            • 返回字符串值，包含了指定位数小数的数字
            • toFixed(2) 非常适合处理金钱
          • toPrecision()
            • 返回字符串值，包含了指定长度的数字
          • valueOf()
            • 以数值返回数值
            • 在 JavaScript 中，数字可以是原始值（typeof = number）或对象（typeof = object）。
            • 在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。
            • 没有理由在代码中使用它。
        • string
          • Javascript字符串用于存储和处理文本
          • 对长字符串换行的最安全做法（但是有点慢）是使用字符串加
          • 你可以使用索引位置来访问字符串的每个字符
          • 索引从[0]开始
          • 长度length
          • 引号包裹
          • 引号嵌套，单双
          • 字符串转义符
            • <br>html元素加入，log直接打印

              

          • length
          • 不要创建字符串，他会拖慢执行速度，并产生其他副作用
          • 通常， JavaScript 字符串是原始值，通过字面方式创建
          • 但我们也可以使用 new 关键字将字符串定义为一个对象
            • 在执行方法和属性时js将原始值视为对象
          • 字符串拼接
            • +（在用于字符串拼接时，被称为级联运算符）
            • 数值相加，字符相连
            • 拼接字符串，只要有+，就是拼接
            • 模板字符串
              • 把引号改成``
              • 将变量名改成${变量名}
          • 字符串是不可变的：字符串不能更改，只能替换
            • 字符串重新赋值，更换了存储空间
          • 字符串长度只读
          • valueOf()
            • 返回的就是它所包装的那个字符串
          • 查找字符串中的字符串
            • 未找到文本，indexOf()和lastIndexOf()均返回-1
            • indexOf(文本,[起始位置])
              • 无法加入正则表达
              • 返回字符串中指定文本首次出现的索引(从0开始)
            • lastIndexOf(文本,[起始位置])
              • 返回指定文本在字符串中最后一次出现的索引
              • 从后向前
          • 检索字符串中字符串
            • search()
            • 搜索特定值的字符串，并返回匹配的位置
              • 无法设置第二个开始位置参数
          • padstart（位数，‘0’）
            • 补0
          • include
          • 提取部分字符串
            • slice(start,end)
              • 提取字符串的某个部分并在新字符串中返回被提取的部分
              • start开始包括，end不包括
              • 如果某个参数为负，则从字符串的结尾开始计数
              • 省略第二个参数，将裁剪剩余的部分
              • 能不能切出来是看两者之间有没有值
            • subString(start,end)
              • 无法接受负的索引
              • 如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分
            • subStr(start,length)
              • 省略第二个参数，则该 substr() 将裁剪字符串的剩余部分
              • 首个参数为负，则从字符串的结尾计算位置
              • 第二个参数不能为负，因为它定义的是长度
          • 替换字符串内容
            • replace()
              • 用另一个值替换在字符串中指定的值
              • 对大小写敏感（/i执行不敏感的替换)
              • 只能替换首个匹配（/g全局搜索）
              • 不会改变调用的字符串，返回的是新的字符串
          • 转换成大写和小写
            • toUpperCase()
            • toLowerCase()
          • 字符串连接
            • concat() 连接两个或多个字符串
          • 提取字符串字符
            • charAt(position)
              • charAt() 方法返回字符串中指定下标（位置）的字符串
            • charCodeAt(position)
              • charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
          • 属性访问
            • 如果找不到字符，str[i] 返回 undefined，而 charAt() 返回空字符串。
            • 它是只读的。str[0] = "A" 不会产生错误（但也不会工作！
          • 把字符串转换为数组
            • 通过 split() 将字符串转换为数组
          • String.trim()
            • 删除字符串两端的空白字符
          • 字符串的包装对象是一个类似数组的对象
        • boolean
          • true/false
          • 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0
          • 布尔可以通过关键词new作为对象来定义
            • 但是不要！！！！！！
          • 当使用==运算符时，相等的布尔是相等的
          • 使用 === 运算符时，相等的布尔是不相等的，因为 === 运算符需要在类型和值两方面同时相等
        • null
          • Null+""为字符串拼接
          • Null+Num为Num
          • null被认为是对象的占位符
          • 函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null
          • null的数据类型是对象
        • undefined
          • Undefined 这个值表示变量不含有值。
          • 可以通过将变量的值设置为 null 来清空变量
          • undefined+""为字符串拼接
          • undefined+Num为NaN
          • 值 undefined 并不同于未定义的值
          • 变量声明未赋值
          • 访问数组中不存在的下标(索引)
          • 函数的形参未匹配到实参
          • 当函数无明确返回值(无返回值)时，返回值是"undefined"
          • 访问对象不存在的属性
          • 未定义变量的数据类型是undefined
      • js数组
        • 数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值
        • 数组索引基于零
        • 数组是特殊类型的对象，具有数字索引
        • 有序键值对的集合
        • 对象使用命名索引，数组使用数字索引
        • 创建数组
          • 使用数组字面量文本
          • New
            • 内置对象创建方式
            • 别用
            • 避免使用new array()
              • 使用[]取而代之
              • new关键词只会使代码复杂化，会产生某些不可预期的结果
        • 我们通过引用索引号（下标号）来引用、访问、某个数组元素
        • 通过引用数组名来访问完整数组
        • js中数组即对象
        • 可以在相同数组存放不同类型的变量（对象，函数，数组）
        • 数组length可读可写
        • 添加数组元素
          • push()
          • unshift()
          • length
          • 添加最高索引的元素可在数组中创建未定义的“洞”
        • 遍历数组
          • 最安全for循环
          • Array.foreach()
        • 不支持关联数组
          • 使用命名索引，JavaScript 会把数组重定义为标准对象。
          • 之后，所有数组的方法和属性将产生非正确结果
        • 不使用数组，使用对象情况
          • JavaScript 不支持关联数组
          • 如果希望元素名为字符串（文本）则应该使用对象时
          • 如果希望元素名为数字则应该使用数组
        • 识别数组
          • Array.isArray()
          • 创建自己的isArray()
            • function isArray(x) { return x.constructor.toString().indexOf('Array') > -1}
            • 数组函数原型function Array() { [native code] }含有Array
          • instanceof Array返回Ture
        • 把数组转换成字符串
          • toString() 把数组转换为数组值（逗号分隔）的字符串
          • join(‘分隔符') 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，可以规定分隔符
        • Pop
          • 从数组弹出项目
          • 数组中删除最后一个元素
          • 方法返回“被弹出”的值
        • Push
          • 从数组推入项目
          • （在数组结尾处）向数组添加一个新的元素（或多个）
          • 返回新数组的长度
          • 修改原数组
        • shift()位移元素
          • 位移与弹出等同，但处理首个元素而不是最后一个
          • 删除首个数组元素，并把所有其他元素“位移”到更低的索引
          • 返回被“位移出”的字符串
        • unshift()
          • 在开头向数组添加新元素，并“反向位移”旧元素
          • 返回新数组的长度
          • 修改原数组
        • 删除元素
          •  JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除
          • 使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift()
        • 拼接数组
          • splice(起始位置，删除元素数目，添加元素（可为多)）
          • 向数组添加新项
          • 返回一个包含已删除项的数组
          • 只传起始位置，默认切除剩下所有
          • 修改原数组
        • 删除元素
          • splice()
        • 合并(连接)数组
          • concat()通过合并(连接)现有数组来创建一个新数组
          • 不会更改一个现有数组，总是返回一个新数组
          • 可以使用任意数量的数组参数
          • 可以将值作为参数
        • 裁剪数组
          • slice(start,end)用数组的某个片段切出新数组
          • 不会修改原数组
          • start开始包括，end不包括
          • 如果某个参数为负，则从字符串的结尾开始计数
          • 省略第二个参数，将裁剪剩余的部分
          • 包括start，end
        • toString()可以用，没必要
          • 如果需要原始值，则 JavaScript 会自动把数组转换为字符串
        • 数组排序
          • sort()
            • 以字母顺序排序
            • 转换成Unicode编码，看首字母，首字母相同然后看第二个字母，然后向后继续看
            • 修改原数组*
          • reverse()
            • 反转数组中的元素
            • 以降序对数组进行排序
            • 修改原数组
          • 数字排序
            • 用一个比值函数来修正
            • 数字数组.
              • sort(function(a,b){return a-b})
                • 升序排序
              • sort(function(a,b){return b-a})
                • 降序排序
            • 转换成Unicode编码，看首数字，首数字相同然后看第二个数字，然后向后继续看
          • 以随机顺序排序数组
            • 数字数组.sort(function(a,b){return 0.5-Mat.randim()})
        • 查找最高(最低)的数组值
          • 通过数组排序来找到最小或最大
          • 对数组使用Math.max()=Math.max.apply()
          • 对数组使用Math.min()=Math.min.apply()
          • 自制
            • 遍历数组，比较！！
        • 排序对象数组
          • js对象经常包含对象
          • 通过比较（值）函数来对比函数值
            • 数组.sort(fucntion(a,b){return a.属性值-b.同一属性值})
          • 比较字符串
            • 转换成小写，然后用数组排序，也就是比较Unicode码
        • 数组迭代方法
          • Array.forEach(function(value,index,array){})
            • 对每一个数组元素调用一次函数
            • 没有返回值
          • Array.map(function(value,index,array){})
            • 通过对每个数组元素执行函数来创建新数组
            • 不会对没有值的数组元素执行函数
            • 不会改变原始数组
          • Array.filter(function(value,index,array){})
            • 创建一个包含通过测试的数组元素的新数组
          • Array.reduce(function(total,value,index,array){})
            • 在每个数组元素上运行函数，以生成(减少它)单个值
            • 在数组中从左到右工作
            • 不会减少原始数组
            • total:总数(初始值/先前返回值)
          • Array.reduceRight(function(total,value,index,array){})
            • 在每个数组元素上运行函数，以生成(减少它)单个值
            • 在数组中从左到右工作
            • 不会减少原始数组
          • Array.every(function(value,index,array){})
            • every() 方法检查所有数组值是否通过测试
          • Array.some(function(value,index,array){})
            • 检测某些数组值是否通过了测试
            • 返回布尔值
            • 单值即可，并终止循环
          • Array.indexOf(item,start)
            • 在数组中搜索元素值并返回其位置
            • 从前往后
          • Array.lastIndexOf(item,start)
            • 从数组结尾搜索元素值并返回其位置‘
            • 从后往前
          • Array.find(function(value,index,array){})
            • 返回通过测试的第一个数组元素的值
          • Array.findIndex(function(value,index,array){})
            • 方法返回通过测试函数的第一个数组元素的索引
      • 对象object
        • 对象由花括号分隔，在括号内部，对象的属性以键值对来定义
        • var objectname = {name：value;}
        • 空格和折行无关紧要
        • 寻址方式
          • actual = object.name
          • actual = object["name"]
      • typeof 检测基本数据类型
        • typeof属于运算符
        • 始终返回字符串(包含运算数的类型)
        • 可返回
          • string
          • number
          • boolean
          • undefined
          • function
          • object（对象、数组、null）
      • instanceof 返回true 如果对象时对象类型的实例
      • 数据类型转换
        • 当输出对象或变量时，自动调用变量的toString()函数
        • 数字和布尔也会被转换，只是不明显！！！！
        • 转换成字符串
          • {}转换成字符串为[object Object]
          • tostring（）
            • toString（radix）
          • string（）
          • +""连接（也被成为隐式转换）
        • 转换成数字
          • parseInt（）
            • parseInt（string，radix）
            • radix表示要解析的数字的基数
              • 基于2~36之间
          • parseFloat（）
            • 不以数字开头为NaN
            • 以数字开头会把数字后的切掉
          • number（）
            • 只转换纯数字组成的字符串
            • 可以将日期转换成数字
          • 隐式转换（-*/）
          • 纯字符串
        • 转换成布尔型
          • true的情况（不被期望的情况，避免！！！）
            • '0'
            • '000'
          • boolean（）
          • "" (不被期望)
          • 0(-0)
          • null
          • undefined
          • NaN
          • false
    • js运算符
      • 算术运算符
        • +
        • -
        • *
        • /
        • %
        • **
        • 避免用浮点数直接参与运算，丢失精度的问题
        • 避免直接用浮点数来比较
      • 表达式
        • 由数字运算符，运算符，变量等以能求得数值的有意义排列方法所得的组合
      • 后置自增
      • 前置自增
      • 比较运算符
        • 在比较之前，应该吧变量转换成合适的类型
        • 返回值为boolean类型
        • >
        • >=
        • <
        • <=
        • ==默认转换数据类型 会把字符串转换为数字型
        • ===
        • !=
        • !==
        • NaN==NaN false
        • undefined==undefined true
        • Null==Null true
        • null == undefined true
      • 逻辑运算符
        • &&
        • ||
        • ！
        • 逻辑中断
          • 会影响我们程序的运行结果
      • 赋值运算符
        • =
        • +=
        • -=
        • *=
        • /=
        • %=
      • 位运算符
        • 处理32位数
        • 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数
        • &
          • AND
        • |
          • OR
        • ~
          • NOT
        • ^
          • XOR
          • 位数不同返回1
        • <<
          • 零填充左位移
        • >>
          • 有符号右位移
        • >>>
          • 零填充右位移
        • 十进制转换为二进制
          • function dec2bin(dec){ return (dec >>> 0).toString(2); }
        • 二进制转换成十进制
          • function bin2dec(bin){ return parseInt(bin, 2).toString(10); }
      • 运算符优先级
        • （）
        • .
        • []
        • ()函数调用
        • new
        • ++ -- ！
        • typeof
        • **
        • */ %+-
        • << >> >>>
        • > >= < <=
        • in instanceof
        • == != === !==
        • & ^ |
        • && ||
        • ?:
        • =
        • ,
    • 条件语句
      • 注意大小写敏感问题！！！
      • if
        • if (条件) { 如果条件为 true 时执行的代码 }
      • if...else
        • if（条件表达式）{ //执行语句1} else {//执行语句2}
      • if（条件表达式1）{ //执行语句1} else if（条件表达式2）{ //执行语句2} else if（条件表达式3）{ //执行语句3} else {//执行语句4}
      • 三元表达式
        • 条件表达式?表达式1:表达式2;
        • 补0 字符串
      • switch
        • switch (expression) case value: statement; break; case value: statement; break; case value: statement; break; case value: statement; break; ... case value: statement; break; default: statement;
        • 表达式和case的值必须是全等
        • break节省大量执行时间
        • default不必是最后一个case
    • js消息框
      • 警告框
      • 带折行警告框
        • alert("文本")
      • 确认框
        • confirm("文本")
      • 提示框
        • prompt("文本,默认值")
    • js函数
      • 在javascript中，函数即对象
      • 函数可以嵌套在其他函数中定义，可以访问他们被定义是所处的作用域中的任何变量
      • 函数是事件函数驱动的或它被调用时执行的可重复使用的代码块
      • return可以返回任意类型
      • js函数语法
        • 函数就是包裹在花括号中的代码块
        • 圆括号可包括由逗号分隔的参数
        • 函数形参也可以看做局部变量
        • 函数参数（Function parameters）是在函数定义中所列的名称-形式参数
        • 函数参数（Function arguments）是当调用函数时由函数接收的真实的值
        • arguments对象可以与剩余参数、默认参数和解构赋值参数结合使用
          • 是一个伪数组，函数内置的一个集合
          • 具有数组的length属性
          • 按照索引的方式进行存储，不能调用数组方法
          • 伪数组转换成数组方法
            • Array.prototype.slice.call(fakeArray)  
            • 剩余参数
              • 数组=[...伪数组]
        • 当非严格模式中的函数没有包含剩余参数、默认参数和 B，那么arguments对象中的值会跟踪参数的值（反之亦然）
        • 在严格模式下，剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为，但是在非严格模式下就有所不同了
      • 函数调用
        • 函数中的代码将在其他代码调用该函数时执行：
        • 当事件发生时）
        • 当 JavaScript 代码调用时
        • 自动的（自调用
        • 访问没有 () 的函数将返回函数定义
        • 调用带参数的函数
        • 带有返回值的函数
          • 在使用return语句时，函数就会停止，并返回指定的值
          • 即使不将返回值保存为变量，也可以使用返回值
          • 可以使返回值基于传递到函数中的参数
          • 在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的
      • 局部变量
        • 只能在函数内部访问
        • 不同的函数可以使用名称的变量
        • 在函数开始执行时创建，在函数执行后自动销毁
        • 局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的的全局变量
      • 全局变量
        • 变量在函数外定义
        • 在函数外声明的变量是全局变量，页面所有脚本和函数都能访问它
      • 向未声明的变量分配值
        • 将会被自动作为全局变量声明
      • 函数定义
        • 函数声明(命名函数、自定义函数).
        • 函数表达式(匿名函数)
        • 内置构造函数new function('参数一'，'参数二','函数体')
          • 所有的函数都是Function的实例
      • 函数中的this指向
        • this指向调用者！！！
      • 改变ths指向
        • call
          • call调用的函数会立即执行
          • 把父构造函数的this指向子构造函数
          • 不需要改变this指向call(null,参数列表（逗号分隔）)枚举参数
        • apply
          • apply调用的函数会立即执行
          • 把父构造函数的this指向子构造函数
          • 不需要改变this指向apply(null,参数数组)
        • bind
          • bind不会调用原来的函数，会返回一个改变this指向新函数
          • bind(指向,参数列表(空格分隔))枚举参数
          • 实现自己的bind
            Function.prototype.myBind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } var _this = this var args = [...arguments].slice(1)//要改变this指向的对象 // 返回一个函数 return function F() { // 因为返回了一个函数，我们可以 new F()，所以需要判断 if (this instanceof F) { return new _this(...args, ...arguments) } return _this.apply(context, args.concat(...arguments)) }}
    • js作用域
      • 作用是可访问变量的集合(对象和函数同样也是变量)
      • 目的是为了提高可读性，减少命名冲突
      • 作用域在函数内修改
      • 局部作用域
        • 变量在函数内声明，变量为局部作用域
      • 全局作用域
        • 全局变量具有全局作用域
        • 网页的所有脚本和函数都能够访问它
      • 变量生命周期
        • 在它声明时初始化
        • 在函数执行完毕后销毁
        • 全局变量会在您关闭页面是被删除
      • 释放变量 内存
        • 一旦数据不再有用，最好通过将其值设置为null来释放其引用-----这个做法叫做解除引用
        • 局部变量会在他们离开执行环境时自动被解除引用
    • js循环
      • for（变量初始化;条件表达式;操作表达式）{}
      • for(变量 in 对象){}
        • For...In 声明用于对数组或者对象的属性进行循环操作。
        • for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
      • while（）{}
      • do{}while（）
        • 先执行一次
    • js日期
      • 创建日期对象
        • var d
          • new Date();
            • 当前日期和时间创建新的日期对象
          • new Date(year, month, day, hours, minutes, seconds, milliseconds)
            • 指定日期和时间创建新的日期对象
            • JavaScript 从 0 到 11 计算月份
            • 只提供单参数，将其视为毫秒
            • 一位和两位数年份将被解释为 19xx 年
          • new Date(milliseconds)
            •  创建一个零时加毫秒的新日期对象
          • new Date(date string)
            • 日期字符串创建一个新的日期对象
      • 是一个构造函数，需要实例化
      • date（）获取的是一个字符串
      • Date.now()返回自零日期以来的毫秒数
      • JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数
      • 日期输出

        

        • 

        • iso日期YYYY-MM-DDTHH:MM:SS
          • 日期和时间通过大写字母 T 来分隔。
          • UTC 时间通过大写字母 Z 来定义
        • 短日期通常使用 "MM/DD/YYYY"
        • 长日期通常以 "MMM DD YYYY"
          • 月和天能够以任意顺序出现
          • 月能够以全称 (January) 或缩写 (Jan）
          • 逗号会被忽略，且对大小写不敏感
        • JavaScript 接受“完整 JavaScript 格式”的日期字符串
          • 会忽略日期名称和时间括号中的错误
        • 无论输入格式如何，JavaScript 默认将输出全文本字符串格式
        • 在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。
        • toUTCString() 方法将日期转换为 UTC 字符串(一种日期显示标准)
        • toDateString() 方法将日期转换为更易读的格式
      • 获取日期方法
        • 日期方法允许您获取并设置日期值（年、月、日、时、分、秒、毫秒

        • 

        • UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates)
        • UTC在中间加入
      • 设置日期方法

        • 

        • 日期可以比较
    • jsMath对象
      • 允许对数字执行数字任务
      • 与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。
      • 可以在不首先创建Math对象的情况下使用所有方法和属性（常量）
      • Math.PI
      • Math.round(x)
        • 返回值是X四舍五入为最为接近的整数
        • .5向上取整
      • Math.pow(x,y)
        • 返回值是x的Y次幂
      • Math.sqrt(x)
        • 返回x的平方根
      • Math.abs(x)
        • 是返回x的绝对正值
      • Math.ceil(x)
        • 返回值是x上舍入最接近的整数
      • Math.sin(x)
        • 返回角 x（以弧度计）的正弦
        • 以弧度计的角度 = (以度数计的角度) * PI / 180
      • Math.cos(x)
        •  返回角 x（以弧度计）的余弦
      • Math.min()和Math.max()
        • 查找参数列表中的最低或最高值
      • Math.random()
        •  返回介于 0（包括） 与 1（不包括） 之间的随机数【0，1）
        • js随机整数
          • Math.random() 与 Math.floor() 一起使用用于返回随机整数
        • 一个适当的随机函数
          • function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; }始终返回介于 min（包括）和 max（不包括）之间的随机数
          • function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; } 始终返回介于 min 和 max（都包括）之间的随机数
      • Math属性（常量）
        • Math.E // 返回欧拉指数（Euler's number）
        • Math.PI // 返回圆周率（PI）
        • Math.SQRT2 // 返回 2 的平方根
        • Math.SQRT1_2 // 返回 1/2 的平方根
        • Math.LN2 // 返回 2 的自然对数
        • Math.LN10 // 返回 10 的自然对数
        • Math.LOG2E // 返回以 2 为底的 e 的对数（约等于 1.414）
        • Math.LOG10E // 返回以 10 为底的 e 的对数（约等于0.434）

      • 

    • js内置对象
      • js自带的封装好的属性和方法
        • array
        • object
        • date
        • Math
    • jsBreak
      • break会中断循环，并继续执行之后的代码
      • continue中断(循环中)的一个迭代，如果发生指定的条件，然后继续循环中的下一个迭代
      • Js标签
        • 如需标记Javascript语句，请将标签名和冒号置于语句之前
          • label：statements
            • didi：if
          • break labelname;
            • break didi
          • continue labelname;
        • continue 语句（不论有无标签引用）只能用于跳过一个迭代。
        • break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
          • 如果有标签引用，则 break 语句可用于跳出任意代码块
        • .{}代码块指的是{与}直接的代码片段。
    • js对象
      • js对象是被命名的容器
        • 无序键值对的集合
      • 对象也是变量，但是对象包含很多值
      • 以键值对的方式书写
      • 创建对象
        • 字面量
          • var 对象名 = {键值对1，键值对2}
            • 方法后跟的是匿名函数
            • 键值对之间用，隔开
        • 内置构造函数
          • var 对象名 = new Object();
          • 通过赋值的方法来添加对象的属性和方法
        • 构造函数
        • 构造函数
      • 对象属性
        • js对象中的键值对被称为属性
      • 对象方法
        • 方法是在对象上执行的动作
        • 方法以函数定义被存储在属性中（方法是作为属性来存储的函数[也就是属性值的形势]）
        • 对象中的方法是可读可写的
      • this关键词
        • 在函数定义周年，this引用该函数的“拥有者”
      • 对象定义
        • 空格和折行都是允许的。对象定义可横跨多行
      • 访问对象属性
        • objectName.propertyName
        • objectName['propertyName']
      • 访问对象方法
        • objectName.methodName()
      • 新的对象属性和方法
        • Object.defineProperty()
        • 允许您定义对象属性和/或更改属性的值和/或元数据
      • 不要把字符串，数值和布尔型声明为变量
        • 增加代码的复杂性并降低执行速度
      • js对象无法比较包括（==）和（===）
    • Jslet
      • 声明拥有块作用域的变量
      • 在块中重新声明变量不会重新声明块外的变量
      • 函数内声明变量具有函数作用域
      • 块外声明具有全局作用域
      • 在Html中全局作用域是windows对象
        • var定义的全局变量属于windows对象
        • let定义的全局变量不属于windows对象
        • 也就是全局对象的属性和全局变量是脱钩的
      • 在相同的块（作用域）中不能通过let重新声明一个var变量
        • 在相同的块（作用域）中不能通过let重新声明一个let变量
        • 在相同的块（作用域）中不能通过var重新声明一个let变量
        • 在不同的块（作用域）中能通过let重新声明一个变量
      • 在声明 let 变量之前就使用它会导致 ReferenceError。
        • 变量从块的开头一直处于“暂时死区”，直到声明为止
    • JsConst
      • 声明拥有块作用域的变量
      • JavaScript const 变量必须在声明时赋值
      • const没有定义常量值，只是定义了对值的常量使用
      • 如果我们将一个原始值赋给常量，我们就不能改变原始值
      • 常量对象可以更改（属性）,但无法重新为常量对象赋值
        • 增删、更改属性值，但无法赋值
      • 常量数组可以更改
        • 可以更改常量数组的元素，但无法重新赋值
      • 在同一块作用域或块中
        • 不允许将已有的var和let变量重新声明或重新赋值给const
        • 为已有的const变量重新声明或者赋值不允许
      • 可以在另外的作用域或块中重新声明const
      • const变量不能在声明之前使用
    • js正则表达式
      • 构成搜索模式的字符序列
      • 用于执行所类型的文本搜索和文本替换操作
      • /pattern/modifiers
      • pattern不加引号
      • ^匹配字符串的开始位置
      • $匹配字符串的结束位置
      • /^??$/严格匹配，只能出现??
      • 字符串方法
        • search()使用表达式来搜索匹配，然后返回匹配的位置
          • 接收字符串作为搜索参数时，字符串将被转换成正则表达式
          • search('pattern');
          • 使用正则表达式
          • search(pattern/modifiers)
        • replace()返回模式被替换处修改后的字符串
          • 可以接收字符串作为搜索参数
          • replace('pattern','xxxx')
          • 使用正则表达式
          • replace(pattern/modifiers,'xxx');
          • 当使用变量时
            • reg='/'+变量+'/g'
            • eval(reg)
      • 正则表达式修饰符
        • /i不分大小写搜索
        • /g全局搜索
        • /m执行多行匹配
      • 正则表达式模式
        • [abc]查找方括号内的任何字符
        • [0-9]查找任何从0到9的数字
        • [x|y]查找由|分割的任何选项
      • 元字符Metacharacter
        • \d查找数字.09
        • \s查找空白字符
        • \b匹配单词边界
        • \uxxxx查找以十六进制xxxx规定的Unicode字符
      • 定义量词Quantifiers
        • n+匹配任何包含至少一个n的字符串
        • n* 匹配任何包含零个或多个 n 的字符串
        • n? 匹配任何包含零个或一个 n 的字符
      • 使用RegExp对象
        • RegExp 对象是带有预定义属性和方法的正则表达式对象
      • test() 是一个正则表达式方法
        • 通过模式来搜索字符串，然后根据结果返回 true 或 false
      • exec() 方法是一个正则表达式方法
        • 它通过指定的模式（pattern）搜索字符串，并返回已找到的文本
        • 如果未找到匹配，则返回 null
    • js事件
      • 事件是可以被javascript侦测到的行为
      • HTML事件可以是浏览器行为，也可以是用户行为
      • HTML事件是发生在HTML元素上的事情
      • 当在HTML页面中使用Javascript时，javascript可以触发这些事件
      • HTML可以添加事件属性，使用javascript代码来添加HTML元素
      • <some-HTML-element some-event='some JavaScript'>
      • <some-HTML-element some-event="some JavaScript">
      • onchange
      • onclick
      • onmouseover
      • onmouseout
      • onkeydown
      • onload
    • Js错误
      • try 语句使您能够测试代码块中的错误。catch 语句允许您处理错误。
        • try { 供测试的代码块 } catch(err) { 处理错误的代码块 }
        • err可以捕获多个
      • throw 语句允许您创建自定义错误。
        • throw 语句允许您创建自定义错误。
        • 从技术上讲您能够抛出异常（抛出错误）。
        • 异常可以是 JavaScript 字符串、数字、布尔或对象
      • finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何
      • Error对象
        • 属性
          • name
            • 设置或返回错误名
          • message
            • 设置或返回错误消息
        • Name Values
          • EvalError
            • 已在 eval() 函数中发生的错误
            • 更新版本的 JavaScript 不会抛出任何 EvalError。请使用 SyntaxError 代替
          • RangeError
            • 已发生超出数字范围的错误
          • ReferenceError
            • 已发生非法引用
          • SyntaxError
            • 已发生语法错误
          • TypeError
            • 已发生类型错误
          • URIError
            • 在 encodeURI() 中已发生的错误
          • Mozilla 和 Microsoft 定义了非标准的 error 对象属性：
            • fileName (Mozilla)
            • lineNumber (Mozilla)
            • columnNumber (Mozilla)
            • stack (Mozilla)
            • description (Microsoft)
            • number (Microsoft)
    • JsHosting
      • 提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为
      • JavaScript 声明会被提升
        • 提升到当前脚本或当前函数的顶部
      • 用 let 或 const 声明的变量和常量不会被提升！
      • JavaScript 初始化不会被提升
      • JavaScript 只提升声明，而非初始化
      • 为避免Bug,始终在每个作用域的开头声明所有变量
      • 严格模式中的Js不允许在未被声明的情况下使用变量
      • 优先提升函数声明
        • 创建阶段js解释器会找出需要提升的变量和函数，并且给他们提前在内存中提前开辟好空间
        • 函数会将整个函数存入内存中，变量只声明并赋值为undefined
        • 代码执行阶段可以直接使用
      • let在创建阶段也提升了，但是let不能在声明前使用
    • Js 严格模式
      • “use strict”：定义Js代码应该以“严格模式”执行[ES5]
      • 不算语句，只是一段文字表达式
      • 消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为
      • 消除代码运行的一些不安全之处，保证代码运行的安全
      • 提高编译器效率，增加运行速
      • 在脚本或者函数的开头添加'use strict;'来声明严格模式
        • 在脚本开头进行声明，拥有全局作用域(脚本的所有代码均以严格模式来执行)
        • 在函数中声明，具有局部作用域
      • 向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误
        • 删除变量（或对象）、函数是不允许的
        • 重复参数名是不允许的
        • 八进制数值文本是不允许的
        • 转义字符是不允许的
        • 写入只读属性是不允许的
        • 写入只能获得的属性时不允许的
        • 删除不可删除的属性是不允许的
        • 字符串‘eval’ 字符串‘arguments’不可用作变量
        • with语句是不允许的
        • 不允许eval（）在其被调用的作用域中创建变量
        • 类似fn()的函数调用中，this的值是undefined
      • 严格模式中不允许使用为未来预留的关键词。它们是：
        • implements
        • interface
        • let
        • package
        • private
        • protected
        • public
        • static
        • yield
    • js this
      • 指的是他所属的对象
        • 在方法中，this指的是所有者对象
        • 单独情况下，this指的是全局对象
        • 在函数中，this指的是全局对象
          • this指的是全局对象(默认)
            • 函数的拥有者默认绑定this指的是全局对象[object Window]
          • this是未被定义的(严格模式)
            • 不允许默认绑定
        • 在事件中，this指的是接收事件的元素（html）
        • call()和apply()可以将this引用到任何对象
          • 是预定义的Javascript方法
    • 表单验证
      • HTML验证
    • js闭包
    • js递归
      • 函数内部自己调用自己
    • 实践规范
      • 尽量少使用全局变量、new、===、eval()
      • 始终声明局部变量.
      • 在顶部声明
      • 初始化变量
      • 请不要声明数值、字符串或布尔对象
      • 请勿使用 new Object()
        • 请使用 {} 来代替 new Object()
        • 请使用 "" 来代替 new String()
        • 请使用 0 来代替 new Number()
        • 请使用 false 来代替 new Boolean()
        • 请使用 [] 来代替 new Array()
        • 请使用 /()/ 来代替 new RegExp()
        • 请使用 function (){}来代替 new Function()
      • 数值会被意外转换为字符串或 NaN（Not a Number）。
        • JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型
          • 进行数学运算，JavaScript 能够将数值转换为字符串
          • 用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）
      • == 比较运算符总是在比较之前进行类型转换（以匹配类型）
        • === 运算符会强制对值和类型进行比较
      • 使用 Parameter Defaults
        • 如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined
        • undefined 值会破坏您的代码。为参数设置默认值是一个好习惯
      • default来结束switch
        • 请使用使用 default 来结束您的 switch 语句。即使您认为没有这个必要
      • eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。
      • 因为允许任意代码运行，它同时也意味着安全问题
    • 常见错误
      • 意外使用赋值运算符
      • 期望松散的比较
      • 令人困惑的加法和级联
      • 令人误解的浮点
      • 对 JavaScript 字符串换行
        • 反斜杠
      • 错位的分号
      • 对return语句进行换行
        • 在一行的结尾自动关闭语句是默认的 JavaScript 行为
        • JavaScript 也允许您将一条语句换行为两行（注意换行时机，保证可实现）
          • 如果某行不完整，自动读取下一行完成这条语句
      • 通过命名索引来访问数组
        • JavaScript 不支持带有命名索引的数组。
          • 在 JavaScript 中，数组使用数字索引
        • 在 JavaScript 中，对象使用命名索引。
        • 如果您使用命名索引，那么在访问数组时，JavaScript 会将数组重新定义为标准对象。
          • 在自动重定义之后，数组方法或属性将产生未定义或非正确的结果
      • 用逗号来结束定义
        • 对象和数组定义中的尾随逗号在 ECMAScript 5 中是合法的
        • JSON 不允许尾随逗号
      • undefined不是null
        • 测试类型是否为undefined，来测试对象是否存在
        • JavaScript 对象、变量、属性和方法可以是未定义的
        • 此外，空的 JavaScript 对象的值可以为 null
      • 期待块级范围
    • 性能
      • 减少循环中的活动
        • 能够放在循环之外的语句或赋值会使循环执执行的更快
      • 减少dom访问
        • 只访问一次，并把它当做本地变量来使用
      • 缩减dom规模
        • 尽量保持dom中尽量少的元素数量
        • 提高页面加载，加快渲染(页面显示)
      • 避免不必要的变量
        • 不要创建不打算存储的新变量（也就是尽量写在一行内）
      • 延迟js加载
        • 脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。
        • HTTP 规范定义浏览器不应该并行下载超过两种要素
        • 把脚本放在页面底部，是浏览器首先加载页面
        • 一个选项是在 script 标签中使用 defer="true"。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。
        • 如果可能，您可以在页面完成加载后，通过代码向页面添加脚本
          • <script> window.onload = downScripts; function downScripts() { var element = document.createElement("script"); element.src = "myScript.js"; document.body.appendChild(element); } </script>
      • 避免使用with（混淆作用域，减速）
    • 面向对象
      • oop(object oriented programming)
      • 易维护
      • 易复用
      • 易扩展
      • 特性
        • 封装
        • 继承
        • 多态性的
          • 函数没有重载
            • 同一名字的两个函数会进行覆盖
            • 通过检查传入函数中参数的类型和数量并作出不同反应，可以模仿方法的重载
      • 可以设计出低 耦合的系统
      • 使系统 更加灵活
      • 更加易于维 护
      • 性能比面向过程低
      • 把事务分解成为一个个对象，然后由对象之间分工与合作。
    • 面向过程
      • 性能比面向对象高
      • 适合跟 硬件联系很紧密的东西
      • 不易维护
      • 不易复用
      • 不易 扩展
      • 分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现， 使用的时候再一个一个的依次调用
    • js类
      • class xxx{ constructor(){} '\n' 方法名(参){}}+实例化对象var xx=new xxx()
        • 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
        • 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
        • constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个 函数,类也会自动生成这个函数
        • 多个函数方法之间不需要添加逗号分隔
        • 生成实例 new 不能省略
        • 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需 要加function
      • 类的继承
        • class xxx extends xxx{}
        • 子类使用super关键字访问父类的方法
          • 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行 子类的
          • 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这 个方法(就近原则)
          • 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用 父类的构造函数,super 必须在子类this之前调用
    • 构造函数和原型（prototype）
      • 构造函数方法很好用，但是存在浪费内存的问题
      • 静态成员、
        • 静态成员 在构造函数本身上添加的成员 
      • 实例成员
        • 实例成员就是构造函数内部通过this添加的成员
      • 原型
        • JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个 prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
        • 构造函数通过原型分配的函数是所有对象所共享
        • 对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象 可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型 的存在。
        • __proto__对象原型和原型对象 prototype 是等价的
        • __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是 它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象  prototype
        • 对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性  constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。 constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来 的构造函数。
        • 一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可 以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修 改后的原型对象 constructor  就不再指向当前构造函数了。此时，我们可以在修改后的 原型对象中，添加一个 constructor 指向原来的构造函数
        • 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用 constructor指回原来的构造函数
      • 原型链
        • 从实例对象到null
      • 构造函数实例和原型对象三角关系
        • 1.构造函数的prototype属性指向了构造函数原型对象
        • 2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
        • 3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的 constructor属性也指向了构造函数
      • 原型对象中this指向
        • 构造函数中的this和原型对象的this,都指向向我们new出来的实例对象
      • 继承实现方法
        • 构造继承
        • 原型继承
        • 实例继承
        • 继承的最好方法（圣杯模式）
          • 也就是在两个之间建立一个中间层对象实现隔离
          • 然后通过对象可以实现父类的继承
    • js浅拷贝与深拷贝
      • Object.assign(接收的,被拷贝的)浅拷贝
      • 深拷贝
        • 递归
  • HTML Dom
    • 是处理可扩展编程语言的网络编程接口
    • dom树
      • 节点(node)
        • 属性节点
        • 标签节点
        • 空节点
        • 注释节点
        • 文本节点
        • nodeType
        • nodeName
        • nodeValue
      • 元素(标签)element
      • 文档document
    • 元素操作
      • 查找HTML元素
        • elem.getElementById('id名')
          • 大小写敏感
          • 返回的是一个element对象
        • elem.getElementByTagName('标签名')
          • 返回的是获取的页面对象的集合，以伪数组的形式来存储
          • 不获取父元素
        • elem.getElementByClassName('class名')
        • elem.querySelector('')
          • 返回指定选择器的第一个元素对象
        • elem.querySelecitorAll('')
          • 返回指定选择器的所有元素对象
        • document.body
          • 获取body
        • document.documentElement
          • 获取html
      • 改变HTML元素
        • 修改标签中的内容
          • innerText
            • 不会解析html内容，直接原样输出
            • innerHTML会保留空格和换行
          • innerHtml
            • 会解析html内容
            • ​innerText会去除空格和换行
          • 单标签没有innerHTML，只有value
        • 修改1HTML元素的属性值
          • elem.属性
            • 添加的自定义属性不会渲染到dom中
          • elem.attribute
            • 修改自定义属性
          • elem.getAttribute('属性')
            • 一般为自定义属性
          • elem.setattribute(属性.属性值)
            • 主要针对于自定义属性
            • 添加的属性会渲染到dom结构中
          • 移除属性值
            • removeAttribute
          • 常见
            • src/href/title/alt
          • 表单
            • type/value/disabled
        • 修改HTML元素的样式
          • element.style.property 
          • elem.className=”className className“
            • 将类名刷新并重新
          • elem.classlist
            • elem.classList.add
            • elem.classList.remove
              • 多个逗号隔开
            • elem.classList.toggle
              • 只能切换单个
      • 添加和删除节点
        • document.creatElement(elem)
          • 创建HTML元素
        • 父元素.removeChild(子元素)
          • 删除HTML元素
          • node.move
            • dom 4不支持
            • 删除自身节点
        • document.appendChild(element)
          • 添加HTML元素最后
        • document.insertBefore(child,指定元素)
          • 添加HTML元素前面
        • document.replaceChild(element)
          • 替换HTML元素
        • document.write(text)
          • 写入HTML输出流
          • 不要在文档加载后使用document.write()，会覆盖文档
        • node.cloneNode([false])
          • 浅拷贝
          • 复制节点但不复制子节点
        • node.cloneNode(true)
          • 深拷贝
          • 复制节点并复制子节点
        • 动态创建元素
          • document.write（）
          • element.innerHTML
            • 创建多个元素时效率更高，通过数组方式创建
          • document.createElement（）
      • 访问节点
        • 访问父节点
          • elem.parentNode
            • 直接父元素
          • elem.parentElement
            • 直接父元素
        • 访问子节点
          • elem.childNodes
          • elem.children
            • 获取所有的子元素（标签）节点
            • elem.children[0]/elem.children[children.length-1]
              • 第一个子元素节点/最后一个子元素节点/
          • elem.firstChild/lastChild
            • 第一个子节点/最后一个子节点
          • elem.firstElementChild/lastElementChild
            • 第一个子元素节点/最后一个子元素节点
            • IE9以上
        • 访问兄弟节点
          • elem.previoustSibling
            • 访问上一个兄弟节点
          • elem.nextSibling
            • 访问下一个兄弟节点
          • elem.nextElementSibling
            • 访问下一个兄弟元素节点
          • elem.previousElementSibling
            • 访问上一个兄弟元素节点
      • H5自定义属性规范
        • 目的
          • 保存并使用数据
        • data-开头作为属性名并赋值
        • 获取H5自定义属性
          • elem.getAttribute(属性名)
          • elem.dateset.属性名/elem.dateset['属性名']
            • 只能获取date-开头的
            • 多值使用驼峰，并去除横杠
    • 文档对象模型（document object model）
      • 为元素绑定事件
        • 获取事件源
        • 事件绑定,注册事件
          • Event
            • 代表事件的状态
            • 事件通常与函数结合使用，函数不会在事件发生前被执行
              • 事件源
                • 事件被触发的对象
              • 事件类型
                • 如何触发，什么事件
                • onmousedown, onmouseup 以及 onclick 
                  • 构成了完整的鼠标点击事件
                  • 当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发
                • onchange()
                  • 域的内容被改变
                • onabort()
                  • 图像的加载被中断
                • onload()和onunload()
                  • 当用户进入后及离开页面时
                  • onlaod用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本
                  • 可用于处理cookie
                • onmouseover 和 onmouseout
                  •  用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数
                • onmouseenter和onmouseleave
                  • mouseenter和mouseleave不会冒泡
                  • 只会经过自身盒子触发
                • onkeyup()h和onkeydown()
                  • 不区分大小写
                • onkeypress
                  • 区分字母大小写
                  • 不能识别功能键
                  • 执行顺序keydowm->keypress->keyup
                • keyCode
                  • 区分大小写
                  • 返回该键的ASCII值
                • contextmenu
                  • 控制显示上下文菜单
                  • +preventDefault（）阻止右键菜单
                • selectstart
                  • 开始选中
                  • +preventDefault（）禁止选中
                • 触摸事件对象
                  • TouchEvent
                    • 类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件
                    • touchstart
                    • touchmove
                    • touchend
                  • touches
                    • 正在触摸屏幕的所有手指的一个列表
                  • targetTouches
                    • 正在触摸当前dom元素上的手指的一个列表
                  • changedTouches
                    • 手指状态发生了改变的列表，从无到有，从有到无变化
                  • 移动端click事件会有300ms的延时
                    • 原因是移动屏幕双击会缩放屏幕
                    • 解决方案
                      • 禁用缩放，解决不了点透
                      • 用touch事件自己封装解决
                        • 当我们手指触摸屏幕，记录当前触摸时间
                        • 当我们手指离开屏幕， 用离开的时间减去触摸的时间
                        • 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击
              • 事件处理程序
                • 通过一个函数赋值的方式完成
                  • 单个对象.事件类型 = function() {code}
          • 事件监听器
            • element.addEventListener(event, function, useCapture);
              • 为指定元素指定事件处理程序
              • 请勿对事件使用 "on" 前缀
              • 为元素附加事件处理程序而不会覆盖已有的事件处理程序
                • 您能够向一个元素添加多个事件处理程序，同时不覆盖已有事件
                • 您能够向一个元素添加多个相同类型的事件处理程序
                • 能够向相同元素添加不同类型的事件
                • 您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素
              • 当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”
              • 默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播
                • 在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的
                  • 在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的
              • removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
            • ie6/7/8
              • element.attachEvent(event, function);
              • element.detachEvent(event, function);
        • 处理程序
          • this指向事件源
          • 事件对象
            • 侦听函数的小括号内，当形参看
            • 系统自动创建，不需要传参
            • 是事件一系列相关数据的集合
            • 可以自己命名如event ，evt， e
            • 兼容性问题
              • ie6/7/8通过window.event
            • e.target
              • e.target (触发事件的对象)与this(绑定事件的对象)
                • 冒泡时会出现不同
              • e.currenttarget
                • 绑定对象
              • e.type
                • 返回事件类型
              • 阻止默认行为
                • e.preventDefault
                  • 方法
                  • 高版本
                • e.returnValue
                  • 属性
                  • 低版本
                • 没有兼容性问题
                  • return false
                  • 阻断代码执行
                  • 只限于传统注册方式
              • 阻止事件冒泡
                • e.cancelBubble
                  • 低版本
                • e.stopPropagation()
                  • 标准
          • 事件委托（纯原生js事件委托发生在嵌套！！！！！！）
            • 不是每个子节点单独设置事件监听器，而是将事件监听器设置在其父元素上，然后利用冒泡原理影响子节点
            • 优点
              • 只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少
              • 整个页面占用的内存空间更少，能够提升整体性能
      • 查找对象

        • 

      • HTMLCollection
        • 是类数组的 HTML 元素列表（集合）
        • 索引从 0 开始
        • length
      • NodeList
        • 从文档中提取的节点列表（集合）
        • 所有浏览器都会为 childNodes 属性返回 NodeList 对象。
        • 大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象
        • length
        • 访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
        • 访问 NodeList 项目，只能通过它们的索引号。
        • 只有 NodeList 对象能包含属性节点和文本节点。
    • HTML DOM动画
      • 动画原理
        • 使用定时器setInterval()不断移动位置
      • 动画函数给不同元素记录不同的定时器
      • 创建动画容器
      • 为元素添加样式
      • 动画代码
    • DOM事件流（嵌套！同一种事件！顺序执行）、
      • 描述的是从页面中接收事件的顺序
        • 事件发生时会在元素节点之间按照特定的顺序传播
      • 没有冒泡的事件
        • onblur
        • onfocus
        • onmouseenter
        • onmouseleave
      • a. 捕获阶段
        • 从外部开始
      • b . 当前目标阶段
      • c. 冒泡阶段
        • 从当前目标开始
    • 排他思想
  • Bom
    • 浏览器对象模型‘
      • widows
        • JS访问浏览器窗口的一个接口
        • 一个全局对象，定义在全局作用域中的变量，函数都会变成windows对象的属性和方法
        • windows.
          • window.onload
            • 窗口(页面)加载事件
            • 当文档内容完全加载完成会触发
            • 传统方式只能注册一次,多个会覆盖
            • addEventListener无限制
            • 触发页面刷新的情况
              • a链接的超链接
              • F5或者刷新按钮
              • 前进后退按钮
          • windows.DOMContentLoaded
            • 仅当DOM加载完成，不包括样式表，图片，flash
            • 图片较多，交互效果不能实现，必然影响用户体验
          • window.onresize
            • 调整窗口大小加载事件
            • 来实现响应式布局
          • window.setTimeout(回调函数callback,[延迟的毫秒数])
            • 需要给定时器赋值一个标识符
            • 延迟默认为0
            • 在当前事件做完成后创建并加入队列实现异步效果
            • 在队列没有事件后进行执行
            • callback
              • 直接写函数
              • 写函数名
              • '函数名()'--不推荐
            • window.clearTImeout(timeoutID)
              • 取消了先前通过调用setTImeout()建立的定时器
          • window.setInterval(callback,[间隔的毫秒数])
            • callback
              • 直接写函数
              • 写函数名
              • '函数名()'--不推荐
            • 延迟默认为0
            • 需要给定时器赋值一个标识符
            • 每个延迟执行一次
          • 元素偏移量（获取元素位置）
            • targetTouches
            • offset
            • elem.offsetParent
              • 返回做诶该元素带有定位的父级元素，如果父级都咩有定位则返回body
            • elem.offsetTop
              • 返回元素相对带有定位父元素上方的偏移
              • 包括border
            • elem.offsetLeft
              • 返回元素相对带有定位父元素左边框的偏移
            • elem.offsetWidth（只读）
              • 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
            • elem.offsetHeight（只读）
              • 返回自身包括padding、边框、内容区的高度，返回数值不带单位
          • 元素可视区client（获取元素大小）
            • element.clientTop
              • 返回元素上边框的大小
            • element.clientLeft
              • 返回元素左边框的大小
            • element.clientWidth
              • 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
            • element.clientHeight
              • 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
          • 元素滚动scroll(获取滚动距离)
            • element.scrollTop
              • 返回被卷去的上侧距离，返回数值不带单位
            • element.scrollLeft
              • 返回被卷去的左侧距离，返回数值不带单位
            • element.scrollWidth
              • 返回自身实际的宽度，不含边框，返回数值不带单位
            • element.scrollHeight
              • 返回自身实际的高度，不含边框，返回数值不带单位
            • 页面被卷去的头部兼容性解决方案
              • 声明了 DTD，使用 document.documentElement.scrollTop
              • 未声明 DTD，使用  document.body.scrollTop
              • 新方法 window.pageYOffset(别名scrollY)和 window.pageXOffset(别名scrollX)，IE9 开始支持
          • 坐标
            • clientX/clientY
              • 距离可视区域左上角
            • pageX/pageY
              • 距离整个个页面左上角
            • screenX/screenY
              • 距离整个电脑屏幕左上角
          • window.sessionStorage
            • 生命周期为关闭浏览器窗口
            • 在同一个窗口(页面)下数据可以共享
            • 以键值对的形式存储使用
            • sessionStorage.setItem(key, value)
            • sessionStorage.getItem(key)
            • sessionStorage.removeItem(key)
            • sessionStorage.clear()
          • window.localStorage
            • 声明周期永久生效，除非手动删除 否则关闭页面也会存在
            • 可以多窗口（页面）共享（同一浏览器可以共享）
            • 以键值对的形式存储使用
            • localStorage.setItem(key, value)
            • localStorage.getItem(key)
            • localStorage.removeItem(key)
            • localStorage.clear()
      • navigator
        • 包含有关浏览器的信息
          • userAgent
            • 返回客户机发送服务器的user-agent头部的值
      • location
        • 返回的是一个对象
        • 用于获取或设置窗体的URL，并且可以用于解析URL
        • URl
          • 统一资源定位符（互联网上标准资源的地址）
          • Uniform Resourse locator
          • 指出文件的位置以及怎么浏览器该怎么处理它
          • 一般语法格式
            • protocol://host[:post]/path/[?query]#fragment
            • protocol
              • 通信协议
                • 常用http,ftp,maito
            • host
              • 主机(域名)
            • port
              • 端口号 可选 省略时使用方案的默认端口
            • path
              • 路径 由零或多个'/'符号隔开的字符串，一般表示主机上的一个目录或文件地址
            • query
              • 参数 以键值对的形式通过&符号分隔开
            • fragment
              • 片段 #后边内容常见于链接锚点
        • 属性
          • loaction.href
            • 获取或者设置整个URL
            • 一般用于页面跳转
            • 记录历史
          • loaction.host
            • 返回主机(域名)
          • loaction.port
            • 返回端口号
            • 未写返回空字符串
          • loaction.pathname
            • 返回路径
          • loaction.search
            • 返回参数
            • 返回？后的数据
          • loaction.hash
            • 返回片段#后边内容常见于链接 锚点
        • 常见方法
          • location.assign()
            • 记录历史
            • 网页跳转
          • location.replace()
            • 不记录历史
            • 网页替换
          • loaction.reload()
            • 网页刷新
            • 当参数为true是为强制刷新
      • screen
      • history
        • back()
        • forward()
        • go(参数)
          • 前进后退功能
    • this指向
      • 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
      • 方法调用中谁调用this指向谁
      • 构造函数中this指向构造函数的实例
    • js执行机制
      • 同步任务和异步任务
        • 同步任务指的是：
          • 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
        • 异步任务指的是：
          • 不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
          • 普通事件（DOM模块）
            • click，resize
          • 资源加载（ajax模块）
            • load，error
          • 定时器（timer模块）
            • setInterval，setTimeout

        • 

      • 执行栈
        • 存放的是同步任务
      • 执行队列
        • 存放的是异步任务
    • 自调用函数（立即执行函数）
      • (function(){})()
      • (function(){}())
      • 独立创建了一个作用域
      • 里边所有变量都是局部变量，不会有命名冲突
• js库
  • 封装的原生js
  • zepto(移动端JQuery)无缝切换
• js框架（封装的）
  • 入侵性非常大
  • 结构
  • 样式
  • 行为
  • 顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发