简介
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：
3、
1、 用于去除字符串两端的空格，返回一个新的字符串，不改变原字符串
2、 该方法去除的不仅仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）
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事件：其实就是表单方法
网友评论