1. 基本语法
1.严格区分大小写
- 结尾,不写浏览器会自动添加,就是会消耗系统资源,有时候还会加错
- 忽略多个空格和换行
2. 字面量和变量
字面量
不可改变的值
变量
可以用来保持字面量
3. 标识符
所有的可以自主命名的都可以称为标识符
例:变量名、函数名、属性名
规则
- 不能数字开头
- 不能是关键字和保留字
- 一般采用驼峰命名
- 可以含有 _、字母、数字、$
4. 数据类型
基本数据类型 存储在栈中,有编译器自动分配,自动释放
String
Number
Boolean
Null
Undefined
Symbol(es6新增)
BigInt
引用数据类型 值存储在堆中,在栈中存储的是地址值,通过地址值找到
Object
Array
Function
typeof
检查数据类型
注意:typeof null 返回object 这是一个BUG
(26条消息) 为什么typeof(null)返回的是object_flyabovegrass的博客-CSDN博客
以二进制存储,低三位数表示数据类型,null 全是0 所以就判断成 object
000 --- 对象
1 --- 整数
010 --- 双精度浮点数
100 --- 字符串
110 ---布尔值
5. 强制类型转换
1. 转为String
方式一
调用 toString()方法
返回转换的结果
方式二
调用对应的方法
例:转换为String 就调用String(参数)方法
方式三
+‘ ’,也可以转换
2. 转为Number
方式一
调用Number(参数)方法
①String转换成 数值(纯数值)、NaN(包含非数值内容)、0(为空或者空格)
②Boolean转换成 1 、0
③Null 转换成 0
④Undefined 转换成 NaN
方式二
parseInt(参数)整数
parseFloat(参数)小数
方式三
可以使用运算符就行转换。
任何值做 加减乘除 运算都会自动转换成Number
3. 转为Boolean
方式一
调用Boolean(参数)方法
①Number 转换
除了 0 和 NaN 其余都是true
②String 转换
除了空字符串,其余都是true
③null / undefined 转换
false
④对象
true
6. 运算符
可以对一个或多个值进行运算并获取结果
1. 算数运算符
加 减 乘 除 取余 ...
对非number数值进行运算时,会先转换成number 再运算。
任何值和NaN运算,都是NaN
2. 自增和自减
i++ :自增前的值
++i :自增后的值
i-- / --i :同上
3. 逻辑运算符
! 非
&& 与 都真 为true
|| 或 只要有一个真 为true
4. 赋值运算符
= 、+= 、 -= 、*= 、/= 、%=
5. 关系运算符
\ ( > 、 < 、>= 、<= )
6. 相等运算符
== :转换类型
!= 转换类型
=== :不转换,全等才等
!== :不转换
7. 三元运算符
条件表达式 ? 语句1 :语句二;
7. 代码块
{ }
8. if语句
if(){
}
if(){
}else{
}
if(){
}else if(){
}else{
}
9. 条件分支语句
switch(){
case 表达式1:
语句
break;
case 表达式2:
语句
break;
......
default :
语句
break;
}
10. while语句
while(条件){
}
do{
}while()
至少执行一次
11. for循环
for ( ; ;){
}
12. break 和continue
不能在 if 中使用
break 用来退出switch和for
continue 跳出当前循环,执行下一次循环
13. 对象
①内建对象
es中定义的对象
例:Math、String、Number、Boolean、Function、Object
②宿主对象
js运行环境提供的对象
例:BOM、DOM
③自定义对象
自己定义的对象
14.枚举对象的属性
for...in...
for( let 变量 in 对象 ){
}
返回键名
可以自己给for...of...添加迭代器实现遍历对象
15. this
函数执行的上下文对象
①以函数形式调用,this 是window
②以方法形式调用,this 是调用的对象
③以构造函数调用,this 是新创建的对象
④call(obj),this 就是obj
16. 构造函数
普通函数直接调用
构造函数需要new之后调用
构造函数中的方法,
function Person( name , age){
this . name = name;
this . age = age;
this . sayName = function(){}
}
sayName()可以定义在全局作用域中,可以避免在创建实例的时候多次创建函数,但是会污染全局作用域命名空间
this . sayName = fun;
function fun(){}
因此可以改为。
在原型上定义
即:Person. prototype.sayName = function(){}
创建构造函数(默认大写)
function Person(){
}
17. 原型对象
18. call() 和 apply()
对函数调用这个方法会调用函数
可以将一个对象指定为第一个参数
此时这个对象就是函数执行时的this
call()可以将实参在对象之后依次传递
fun . call(obj , 参数1 ,参数2)
apply()需要将实参封装到一个数组中
fun . apply(obj , [ 参数1 ,参数2 ])
19. arguments
一个类数组对象
arguments . length 可以获取实参的长度
20. 垃圾回收
定义为 null 就行
21. 数组方法
数组末尾
①末尾添加一个或多个 push()返回新数组长度
②删除最后一个元素pop()返回被删除的元素
数组开头
①开头添加一个或多个 unshift()返回新数组长度
②删除第一个元素 shift()返回被删除的元素
slice
提取指定元素
slice(开始索引,结束索引),左闭右开,结束位置可选
splice
删除指定元素
splice(开始索引,删除数量,插入元素)
插入到开始位置之前,将插入元素替换被删除的元素
concat()
合并两个或多个数组 返回新数组
不影响原数组
join()
将数组转换成字符串
不影响原数组
可以指定连接符,不指定默认使用 ,
. join(‘’)
sort()
排序,直接修改原数组
reverse()
反转数组
22. Date对象
表示一个时间
var d = new Date()
var year = d . getFullYear()
方法
getFullYear()年份
getMonth()月份
getDate()日份
getDay()周几,0--周一;1--周二 ......
getTime()时间戳
now()代码执行的当前时间戳
23. Math 对象
不是一个构造函数,属于一个工具类,不用创建对象,直接使用就行
方法
abs() 取绝对值
ceil()向上取整
floor()向下取整
round()四舍五入取整
random()生成 0 - 1 之间的随机数
①生成一个 0 - X之间的随机数:Math . round(Math . random()+X)
②生成一个 X - Y 之间的随机数:Math . round(Math . random()* (Y-X)+X)
max()最大值
min()最小值
pow(X,Y) X的Y次幂
sqet()开方
24. 包装类
数据类型转换
String
Number
Boolean
25. 字符串方法
在底层,字符串以字符数组的形式保存的
例:‘Hello’ —> [ ‘H’,‘e’,‘l’,‘l’,‘o’ ]
属性和方法
length 属性
charAt() 返回字符串中指定索引的字符
charCodeAt() 返回指定位置的字符的编码(unicode)
fromCharCode() 根据字符编码获取字符
concat() 链接两个或多个字符串
indexOf(指定内容,开始位置) 返回第一次出现的index,开始位置可省略
lastIndexOf() 同 indexOf(),从后往前找
slice(开始索引,结束索引) 结束索引可以省略,结束可以是负数,倒数第几个,左闭右开
substring(开始,结束) 同上,但是结束索引不可以是负数
substr(开始索引,截取长度) 包括开始位置
split(字符串) 根据字符串截取,空串每个字符截取下来
toUpperCase() 大写并返回
toLowerCase() 小写并返回
replace(被替换的内容,替换内容) 默认替换第一个
26. 正则表达式
1. 简介
2. 语法
3. 量词
27. DOM
文档对象模型
文档 --- 整个HTML网页文档
对象 --- 将网页中的每个部分都转换成一个对象
模型 --- 使用模型表示对象之间的关系,以便获取对象
节点node
元素节点 --- HTML文档中的标签,--> Element
属性节点 --- 元素的属性,--> Attr
文本节点 --- HTML标签中的文本内容,--> Text
文档节点 --- 整个HTML文档,--> document
网页中所有的节点都是它的子节点
document对象作为window对象的属性存在,可以直接使用。
事件简介
用户和浏览器之间的交互行为
文档的加载
浏览器加载一个页面,按照自上向下的顺序加载
onload事件会在整个页面加载完成后才出发
27.1 DOM查询
NodeList都是类数组对象
getElementById()
getElementsByTagName() 返回类数组对象
getElementsByClassName()
getElementsByName()
childNodes 注意这里没有括号,当前节点的所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
parentNode 当前节点的父节点
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点
documentElement属性 保存的是HTML根标签
document . all 页面中所有元素,类数组对象
querySelector(‘ 选择器 ’)
querySelectorAll( ) 返回数组
createElement()创建元素节点对象
createTextNode()
appendChild(子节点)向父节点中添加一个新的子节点
insertBefore(新节点,旧节点)在指定子节点前插入新的子节点
replaceChild(新节点,旧节点)替换
removeChild()删除节点
28. for循环与响应函数的执行顺序
29. 事件
1. 事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为参数传递进响应函数
2. 事件的冒泡
事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也被触发。
取消冒泡
event . cancelBubble = true
3. 事件的委派
btn . onclick = function(){}
将事件统一绑定给元素的共同的祖先元素,这样后代元素上的事件被触发时,就会冒泡到祖先元素
4. 事件的绑定
绑定方式
方式一:
addEventListener()
参数:
- 事件的字符串,不需要写on
- 回调函数,当事件触发时函数被调用
- 是否在捕获阶段触发,布尔值,一般为false
可以绑定多个响应函数,按照绑定顺序执行,即从上到下
支持ie9及以上
this 是绑定事件的对象
btn . addEventListener('click', function(){}, false)
方式二:
直接添加
对象 . 事件 = 函数
的形式绑定响应函数
只能同时为一个元素的一个事件绑定一个响应函数
如果绑定多个函数就会被后面的覆盖
btn . onclick = function(){}
方式三:
attachEvent()
参数:
- 事件的字符串,需要写on
- 回调函数
实行顺序和addEventListener()相反
this 是window
btn . attachEvent('onclick' , function(){})
支持ie8及一下
5. 自定义响应函数
6. 事件的传播
7. 事件
鼠标事件
onclick 点击事件
onmousemove 移动事件
onwheel 滚轮事件
键盘事件
onkeydown 按键被按下 ,一直按着不松手,事件就会一直被触发
onkeyup 按键被松开,不会连续触发
30. BOM
浏览器对象模型
BOM对象
Window:代表整个浏览器的窗口,同事也是网页中的全局对象,全局中的变量 / 函数都作为window的属性 / 方法保存
Navigator:当前浏览器的信息,可以借此识别不同的浏览器
Location:当前浏览器的地址栏信息,或操作浏览器跳转页面
History:浏览器历史记录,可以操作历史记录。但是由于隐私问题,只能操作前后翻页,不能获取到具体的历史记录
Screen:用户的屏幕信息。可以获取用户的显示器的相关信息,主要用于移动端。
1. Navigator
2. Location
方法
assign()跳转页面
reload()重新加载页面,刷新
replace()替换页面,调用后跳转页面
3. History
属性和方法
length 属性,可以获取当前访问的链接数量
back()
forward()
go()
4. Screen
31.定时调用
var timer = setInterval(function(){},时间)
参数
- 回调函数,每隔一段时间就会调用一次
- 间隔时间
clearInterval(timer)关闭定时器
参数: 定时器变量
32. 延时调用
var timer = setTimeout(function(){},时间间隔)
只执行一次
参数
回调函数,延时后被调用
延长时间