JavaScript简记

简介

JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而且只用来编写控制其他大型应用程序的“脚本”
JavaScript是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多

语句、标识符

image.png

变量

image.png

即下面两种的log效果是一样的

image.png

常见输出方式

image.png

对象类型

image.png

运算符

• typeof：判断基本数据类型使用，对象的话返回object

image.png

• ===（强等）

  
  image.png
• 非布尔值取反

image.png

字符串

image.png image.png

• concat：连接两个字符串，返回一个新的字符串，不改变原字符串。

image.png image.png

直接做字符串相加是不需要使用concat的，可以直接只用+连接字符串
注意：如果是数字类型，+号则就是直接运算

• substring：
  1、 从原字符串中取出字符串并返回，不改变原字符串。第一个位置为开始位，第二个位置为结束位（截取的字符串并不包含该位，即左闭右开）
  2、 如果省略第二个参数，则表示子字符串一直到原字符串的结束
  3、 如果第一个参数大于第二个参数，substring方法会自动交换两者的位置
  4、 如果是负数，substring方法会自动将负数转为0

image.png

• substr：
  1、 与substring方法类似，不同的是substr方法的第二个参数为截取的长度
  2、 如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数为负数，将自动转为0，因此会返回空字符串。

image.png image.png

• indexOf：
  1、 用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回值是-1，就表示不匹配
  2、 还接受第二个参数，表示从这个位置开始查找。

• trim：
  1、 用于去除字符串两端的空格，返回一个新的字符串，不改变原字符串
  2、 该方法去除的不仅仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）
  

  3、 image.png

• split：
  1、 按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组
  2、 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符
  3、 如果省略参数，则返回数组的唯一成员就是原字符串
  4、 还可以接受第二个参数，限定返回数组的最大成员数

image.png image.png

数组

• 数组的静态方法Array.isArray（）
  返回一个布尔值，表示参数是否为数组。
• push与pop
  在数组的末端添加或删除元素，都会改变原数组。

• shift/unshift
  1、 shift用于删除数组的第一个元素，并返回该元素。
  2、 unshift用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
  利用shift方法可以清空一个数组，前面提到过几种特殊布尔值，其余都是true。

注意：当unshift同时添加多个元素时，就直接按顺序插入，不再依次插入头部。

• join
  join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串并返回。如果不提供参数，默认以逗号分隔。

数组的join配合字符串的split可以实现数组与字符串的互换

• concat
  用于多个数组合并。它将新数组的成员添加到原数组成员的后部，然后返回一个新数组，原数组不变。

应用场景：上拉加载，合并数据。

• reverse
  颠倒排列数组元素，返回改变后的数据。该方法会改变原数组。

• indexOf
  返回给定元素在数组中第一次出现的位置，如果没有出现就返回-1。同时，与字符串中的indexOf一样，接受第二个参数作为开始搜索的位置。

函数

函数的声明

1、 对象的“键值”可以是任何数据类型，如果一个属性的值为函数，通常把这个属性称为“方法”，它可以向函数那样调用。
2、 如果属性的值还是一个对象，就形成了链式引用。

Math对象

• Math.abs()：返回参数的绝对值
• Math.max()、Math.min()
• Math.floor()、Math.ceil()

• Math.random()：取[0,1)随机数

Date对象

• Date.now():返回当前距离时间零点（1970年1月1日 00：00：00 UTC）的毫秒数，相当于Unix时间戳乘以1000

DOM

只需记住一点：JS通过DOM操作网页

DOM时JavaSript操作网页的接口，全程为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如对元素曾删内容）
浏览器会根据DOM模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM只是一个规范接口，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页。另一方面，JavaScript也是最常用于DOM操作的语言。

节点

DOM的最小组成单位叫节点（node）。文档的树形结构（DOM树），就是由各种不同类的节点组成。每个节点可以看成文档树的一片叶子

常用Document、Element

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。他有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树

Node.nodeType属性

document对象方法获取元素

• document.getElementsByTagName()

• document.getElementsByClassName()

• document.getElementsByName()

• document.getELementsById()：Id是唯一的，所以不用像上面一样通过数组下标操作。

以下两个是H5之后增加的

• document.querySelector

• document.querySelectorAll()

document对象方法/创建元素

• document.createElement()
• document.createTextNode()
• document.createAttribute()

• appendChild：将内容或者子元素放到容器中
• setAttributeNode:为元素设置属性

Element对象属性

Element对象对应网络的HTML元素。每一个HTML元素，在DOM树上都会转化成一个Element节点对象（一下简称元素节点）。以下这些属性不仅能get，也能set。

• id

• className

• classList

toggle:如果不存在就加入，否则就移除。

• innerHTML

innerHTML和innerText的区别：
innerHTML可以识别标签，innnerText会把标签识别成一个字符串，详情如下：

Element获取元素位置

页面的高度指的是内部元素所撑开的大小

CSS操作

（3种方案）

• HTML元素的style属性

• 元素节点的style属性

• cssText属性

事件处理程序

• HTML事件处理

缺点：HTML的代码没有和JS分开

• DOM0级事件处理

缺点：无法同时触发多个事件

• DOM2级事件处理

事件类型之鼠标事件

• click：按下鼠标时触发
• dbclick：在同一个元素上双击鼠标时触发
• mousedown：按下鼠标键时触发
• mouseup：释放按下的鼠标键时触发
• mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。
• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
• wheel：滚动鼠标的滚轮时触发

Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。
Event对象属性

• Event.target

• Event.type

Event对象方法

• Event.preventDefault()

• Event.stopPropagation()

也就是当大容器包含小容器，点击小容器时大容器也响应到了点击，该方法就是阻止这种传播。

事件类型之键盘事件

• keyCode：唯一标识，其中回车按键最常用，比如搜索。

事件类型之表单事件

• input事件

• select事件

image.png

• change事件

回车和输入框失去焦点时都会触发

• reset和submit事件：其实就是表单方法