黑马程序员技术交流社区

标题: javaScript 知识点详细总结 [打印本页]

作者: 逆风TO 时间: 2020-1-6 10:30
标题: javaScript 知识点详细总结
javaScript 知识点详细总结
一入门
通常把javaScript叫做js，它是一种轻量级的脚本语言。运行在浏览器客户端.
js引入方式：
内嵌式
所有js代码写到一个<script type="text/javascript"> js代码 </script>,标签内
此script标签可以放到html的任何地方
外链式
所有的js代码写到一个外部js文件内（该文件后缀名为.js）,
在html内通过script上的src属性引入过来。<script src="js文件"></script>
事件引入
在开始标签上通过加事件引入js代码<button>按钮</button> 3.注释方式
单行注释
//注释内容
多行注释
/*
注释内容
*/
4.输出方式
警告框alert()
向文档内部写入内容 document.write(内容)
控制台日志输出console.log()
二.变量与数据类型
1.赋值运算符
= 一个等号把右侧的值赋值给左侧变量
2.算术运算符
加号+
2.1加法运算加号两侧同时为数字，进行加法运算
2.2字符拼接加号两侧的任何一侧为字符串，表示字符串拼接得到结果是字符串类型
3 减号- 乘号* 除号/ 取余%
3.1 对应算术运算
符号两侧同时为数字时进行对应运算。
3.2 符号两侧的任何一侧为非数字，运算时会把该侧强制转换成数字进行运算，转换成功进行对应算术运算，转换不成功，得到结果NaN(Not a Number)
4 自增与自减 a++ ++a a-- --a
5.比较运算符（关系运算符）
大于 > 小于 < 等于 == 不等于 != 大于等于 >= 小于等于 <= 恒等 ===
返回值：布尔值 true / false
6.逻辑运算符
6.1 逻辑与 && 逻辑与&&两侧同时为真才为真，其他情况都为假
6.2 逻辑或 || 逻辑或||两侧同时为假才为假，其他情况都为真
6.3 逻辑非 ! 非真即假，非假即真
7 检测数据类型 typeof(待检测的数据)

三.window对象的方法
1 alert() 警告框无返回值
2.confirm() 确认对话框有返回值
1
2
返回值：布尔值
点击【确认】按钮，返回true，点击【取消】按钮，返回false
3.prompt(提醒文本，【默认】) 提示输入对话框
返回值:字符串 / null
点击【确认】按钮，返回输入框中的值(字符串类型)，点击【取消】按钮，返回null

四分支
1.单分支 if(条件){
语句;
}
如果条件成立，执行语句
2.双分支 if(条件){
语句1;
}else{
语句2;
}
条件成立（true），执行语句1，条件不成立（false）执行语句2.
3.多分支 i
f(条件1){
语句1；
}else if(条件2){
语句2；
}
…
else{
语句;
}

如果条件1成立(true),执行语句1；否则，看条件2是否成立，如果条件2成立(true),执行语句2，否则… 如果条件1，条件2，… 均不成立，执行else后的语句

一般常用来做区间段的判断，也可以用来做等值判断
4等职判断
等值判断只能做等值判断
switch(表达式){
case 常量1:
语句1；
break;
case 常量2:
语句2；
break;
…
default:
语句;
}

如果表达式值是常量1，执行语句1，否则，看表达式的值是否是常量2，如果是常量2，执行语句2，否则… 如果表达式的值不是常量1，常量2，… ,执行default后的语句。

注:
常量必须是整数类型或字符串类型

五.循环
1.while循环
while(循环条件){
循环操作;
}
循环条件成立，执行循环操作(可能被执行多次)
特点：先判断，后执行
最少执行0次

2.do-while循环
do{
循环操作;
}while(循环条件);
先执行一次循环操作，再判断循环条件是否成立，条件成立，再次执行循环操作.
特点：先执行，再判断
不管条件是否成立，至少执行一次。

3.for循环
for(初始化变量 ; 循环条件 ; 变量更新){
循环操作;
}
循环条件成立，执行循环操作。
特点：先判断，再执行。
最少执行0次

执行顺序：初始化变量 —> 循环条件(true) —> 循环操作 —> 变量更新

六.跳转语句
1.break
一般用在循环内
跳出整个循环循环停止
2.continue
一般用在循环内
跳出当前循环循环进入下一轮

七.数组
1.增删改查
IndexOf(A)
在数组里面查找A元素所在的下标 0开始
push(A)
把A添加的数组最后面
unshift(A)
把A添加到数组的最前面
shift()
删除数组的第一个元素
splice(A,B)
删除数组中的B个元素从A下标开始
splice(A,B,C)
删除数组中的B个元素从A下标开始再添加C元素

2.合并

A.concat(B)
把B合并在A的后面

3 创建数组
var arr = new Array()
var arr = […]

4.length 数组长度

5.sort()排序
function asc(a,b){if(a>b){return 1}esle{return-1}}
function desc(a,b){if(a>b){return -1}esle{return 1}}

6.str.split(“分隔符”) 将字符分割为数组
7.arr.join(“连接符”) 将数组连接为字符串
8.arr.reverse() 反转

八对象
定义：多个键值对应的集合，键是不重复
1.创建
var obj1 = new Object()
var obj2 = {…}
2.访问
obj.key obj[“key”]
3.写入
obj.key=value
obj[“key”]=value
4.属性也可以是函数
obj.key = function(){};
访问 obj.key();
5.遍历
for(var key of arr){
console.log(“键:”,key);
console.log(“值:”,obj[key])
}

九.json
定义：javascript对象表现方式，本质是字符串
前后端传递数据通常用json字符串格式
值：null，true，false ，Object，String,Array,Number
JSON.stringify(obj) 把obj对象转换为json字符串
JSON.parse(str) 把字符串转换为javascript对象

十.DOM
1.选择器
document.getElementById（id）
通过id来获取html元素单个
document.getElementsByTageName（tag）
通过tag标签名来获取html元素（类数组多个）
document.getElementsByName（class）
通过class类名来获取html元素（类数组多个）
document.querySelectorAll（css选择器）
通过css选择器来获取html元素（类数组多个）
document.querySelectorcss（css选择器）
通过css选择器来获取html元素（单个）

2.获取和改变层的内容
1.1获取
innerHTML
获取元素的内容包括标签
innerText
获取元素的内容过滤标签
1.2 改变
innerHTML
设置元素的html内容
innerText
设置元素的文本内容

3.定义
当浏览器去解析html标签完毕后会生成一个dom树形结构
会有三种类型节点：元素类型文本类型属性类型
节点之间会用关系父子兄弟
操作html有三种方式 html方式 Dom 核心方式 xml方式

4.属性操作
getAttribute（属性名）
setAttribute（属性名，属性值）

5.创建
createElement（标签名）

6.添加
parent.append（被添加的元素）
parent.insertBefore(被提交的元素，在之前)

7.删除
parent.removeChild(被删除的元素)

8.节点关系
parentElement
父元素节点
Children
子节点
lastElementChild
最后一个子节点
firstElementChild
第一个子节点
nextElementSibling
下一个兄弟子节点
previousElementSibling
上一个兄弟子节点

9.其他节点关系
parentNode
父节点
firstChild
第一个子节点
lastChild
最后一个子节点
nextElementSibling
下一个兄弟子节点

10.节点类型
nodeType
节点的类型 3 文本节点 1 元素节点
nodeValue
节点的值
nodeName
节点的名称

11.table表格操作
table.insertRow(0)
插入行
tr.insertCell（0）
插入列
tr.rowIndex
获取是第几行
table.deleteRow（index）
删除行

12.间隔调用
setInterval（fn，time）
clearInterval()

13.延迟调用
setTimeout（fn；time）
clearTimeout()

14.事件
onclick 鼠标单击
focus 获取焦点
blur 失去焦点
submite 提交

十一.window
1.screen屏幕
width 宽 height高 availWidth 可用宽 availWidth 可用高

2.history 历史记录
back（）后退
forWard（）前进
go（2）前进两步
go（-3）后退三步
length 历史记录的长度

3.location
属性 href地址
方法 reload（）刷新
assign()
跳转有历史记录
replace（）
跳转没有历史记录
location.href=" ";
4.navigator
useAgent 浏览器头信息
可识别当前浏览器是什么浏览器

5.open（url，name，feature）打开一个新窗口
url 打开的地址
name 窗口名称
feature “ width=100，height=”

十二.js css
1.行内样式
el.style.fontSize=“18px”

2.传统class改变
el.className=“red”
设置元素的类名为red

3.classList
add（）添加
remove（）删除
toggle（）切换

4.获取到css最终值
document.defaultView.getComputedStyle(el,null).css属性

5.css中高度获取
clientHeight 元素内容的高
offsetHeight 元素内容+边框的高
scrollHeight 元素内容+滚动区域的高

6.滚动距离获取
scrollTop 元素滚动顶部的距离
scrollLeft 元素滚动左侧的距离

7.元素在页面中个位置
el.getBoundingClientRect()
top left width height
距浏览器可视区域顶部的距离
el.offsetTop
e.offsetLeft
距离已定位的父亲（body）元素距离

十三.事件
1.1：
事件流冒泡捕获
阻止冒泡 e.stopPropagation()
阻止默认事件 e.preventDefault()

1.2常用事件
键盘
onkeydown按下
onkeyup弹起
onkeypress键盘按下

窗口
onscroll 滚动
onresize 调整大小
onload 加载
onunload 卸载

鼠标
右键菜单oncontextMenu
鼠标滚动onmousewheel
鼠标拖放
ondragstart开始拖动
ondragover拖放在元素上面
ondrop拖放松开
鼠标单击 onclick
双击 ondblclick
鼠标经过 onmouseover
鼠标离开 onmouseout

表单
onchange表单发生改变
onblur 失去焦点
onfocus 获取焦点
onsubmit 提交

1.3事件参数
target 目标
srcElement 事件元素
pageX 相对于页面的偏移
clientX 相对于视口的偏移
offsetX 相对于当前元素的偏移
wheelDelta 鼠标滚动值（判断方向）
keyCode键盘值是哪个键被按下了
stopPropagation() 阻止事件冒泡
preventDefault（）阻止默认事件
拖动事件的参数
dataTransfer 数据传递器
setData(k,v) 设置传输数据
getData(k) 获取传输数据

1.4事件的绑定
1 html标签调用
< div οnclick=“func()”>
2.script DOM 1 级
el.οnclick=function(e){} 匿名
el.οnclick=fun; 函数名式
function fun(){}
3.script DOM2
el.addEventListener(“click”,function(){})
el.addEventListener(“click”,fun);
function fun(){}
区别
1标签调用可操作性小，方便理解
2DOM1 后面的调用与前面代码一致，会覆盖前面
DOM2 最好控制事件冒泡捕获可以取消绑定
3.匿名函数式复用性低

十四.本地存储
cookie特点
1.保存在客户的小量数据（2k）
2. 有时间限制会过期
3. 服务器端可以修改，浏览器端（前端）也可以修改
4. 每次发送http请求都会携带cookie
5.cookie有域名限制，只能获取同一个域名的cookie

cookie
名称=值 name=value;
过期时间=日期 ;expires = d;
访问路径=路径 ;path=/;

2.sessionStorage 会话存储
功能与方法与localStorage一样但是关闭浏览器数据清空

3.localStorage 本地存储
特点
1 可以存5M内容（各浏览器不一样）
2.不会过期，不会销毁
3 不会被发送到服务器
4 api完善操作简单

setItem(name,value) 存储数据
getItem(name) 获取本地数据
removeItem(name) 删除本地数据
clear() 清空当前域名所有本地数据

十五.正则RegExp
1.作用匹配，捕获有规律的字符串
2.创建
表达式 /表达式/
实例化Reg new RegExp(表达式,修饰符)
3.正则修饰符
g 全局匹配
i 忽略大小写
m 多行
4.正则的方法
re.test(str)
字符串是否匹配正则
re.exec(str)
匹配捕获匹配到字符串 index：字符串所在字符的下标 input：字符串
如果re是全局正则，
exec可以循环执行多次匹配不到返回null

5.字符串与正则相关方法
1.match
非全局 index：字符串所在字符的下标 input：字符串
全局返回一个匹配到的字符串数组

2.replace(正则,新的的字符)
$0-$1

6.正则元字符
\d 数字
\w 0-9 a-z A-Z _
\s 空白空格
\D 非\d 除了数字
\W 除了\w
\S 除了\s
.任意字符（除了\n之外）
\ 转义特殊字符
| 或者
() 分组
\n 换行
\b : 匹配边界字符串的开头和结尾空格的两边都是边界 => 不占用字符串位数
^ : 限定开始位置 => 本身不占位置
$ : 限定结束位置 => 本身不占位置
[a-z] : 任意字母 []中的表示任意一个都可以
[^a-z] : 非字母 []中^代表除了
[abc] : abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符
7.正则次数
? 0次或者1次
1.* 0次或者多次
2.+ 一次或者多次
3. {n} : 正好n次；
{n,} : n到多次
{n,m} : n次到m次

作者: zhaosongzhi 时间: 2020-1-6 11:04
相信自己，加油！

作者: 小公举 时间: 2020-1-6 11:10
感谢楼主的分享祝你天天开心

作者: zhaosongzhi 时间: 2020-1-6 11:13
相信自己，加油！

作者: zhanghua342 时间: 2020-1-6 11:25
6666666666666

作者: lzq123 时间: 2020-1-6 11:29
6666666666666666666666666666666

作者: 九月丫 时间: 2020-1-6 11:36
棒棒棒。。。。。

作者: zhaosongzhi 时间: 2020-1-6 11:37
学习到很多

作者: 霍尔 时间: 2020-1-6 11:39
棒棒的！加油

作者: 王锦 时间: 2020-1-6 11:40
66666666666666666

作者: 王锦 时间: 2020-1-6 11:41
666666666666666

作者: zhaosongzhi 时间: 2020-1-6 11:46
学习到很多

作者: zhaosongzhi 时间: 2020-1-6 11:56
学习到很多

作者: 半个程序员 时间: 2020-1-6 12:09
2020扬帆起航。。。

作者: 逆风TO 时间: 2020-1-6 18:19
相信自己，加油！

作者: hongping 时间: 2020-1-6 18:23
相信自己，加油！

作者: 王微 时间: 2020-1-6 18:27
6666666666666666666666666666

作者: 孙丽 时间: 2020-1-6 18:30
6666666666

作者: dendi 时间: 2020-1-6 20:37
学计算机哪家强，就来西安黑马程序员

作者: 你不爱我 时间: 2020-1-6 20:48
为千万学子而著书，66666

作者: 半个程序员 时间: 2020-1-6 20:58
为千万学子而著书，66666

作者: 举个栗子 时间: 2020-1-6 21:08
666666666666666666666

作者: ruoquan 时间: 2020-1-6 21:18
黑马程序员，用爱成就每一位学员

作者: hongping 时间: 2020-1-7 09:49

学计算机哪家强，就来西安黑马程序员

作者: hongping 时间: 2020-1-7 09:50

学计算机哪家强，就来西安黑马程序员

作者: 咨询部王丹 时间: 2020-1-7 09:52
多努力，多学习，加油

作者: daoqin 时间: 2020-1-7 09:55

学计算机哪家强，就来西安黑马程序员

作者: 大安 时间: 2020-1-7 10:10

学计算机哪家强，就来西安黑马程序员

作者: 温柔一刀！喵！ 时间: 2020-1-7 10:31
加油~

作者: 李娟玲老师 时间: 2020-1-7 10:52
棒棒哒！加油

作者: duanshaobo 时间: 2020-1-7 11:32
六六六六六六六六

作者: zhuyanting 时间: 2020-1-7 11:55
学习学习学习学习

作者: sdjadyhm 时间: 2020-1-7 16:16
66666666 厉害！棒棒哒～～

作者: 哦嗨呦 时间: 2020-1-8 11:23
好人一生平安

作者: lvxinvip 时间: 2020-1-8 17:51

作者: manyihang 时间: 2020-1-8 18:34
66666666666666666666666666666

作者: 耙丫丫 时间: 2020-1-8 18:53
66666666666666666666

作者: 黑马程序员啊 时间: 2020-1-8 20:45
666666666666666666666666666

作者: fujiangbo 时间: 2020-1-8 20:58

作者: jsnoob 时间: 2020-1-8 21:33
加油，加油，加油！！！！

作者: zplxwl 时间: 2020-1-9 00:41
为千万学子而著书

作者: Emmmmm~ 时间: 2020-1-9 10:24
厉害了呢整理的很到位

作者: 殷凯老师 时间: 2020-1-9 10:43
6666666666666666666

作者: yujq 时间: 2020-1-9 13:26
66666666666666

作者: 宗进1 时间: 2020-1-9 15:00
努力。努力6666666666666666666

作者: 宗进1 时间: 2020-1-9 15:03
加油，加油

作者: 八戒猪 时间: 2020-1-9 19:15
详细

作者: 逆风TO 时间: 2020-1-10 10:19
加油哦~

作者: 大智叔叔 时间: 2020-1-10 10:23

为千万学子而著书，66666

作者: 专找bug 时间: 2020-1-10 10:29
只有登上山顶，才能看到那边的风光。

作者: hello！！！ 时间: 2020-1-10 10:36
感谢分享

作者: 爱笑的姑娘 时间: 2020-1-10 11:01
66666666666666666666666666666666

作者: 我爱我1022 时间: 2020-1-10 12:33

作者: 零度☆黎明 时间: 2020-1-10 12:36
66666666666666666666666666666666666666666666666666

作者: kdhdjdj 时间: 2020-1-10 12:46

学习到很多

作者: 1467584 时间: 2020-1-10 13:05

学习到很多

作者: longyu3 时间: 2020-1-10 13:37
大牛大牛大牛

作者: json0314 时间: 2020-1-10 13:56
赞赞赞!!!

作者: 影@子~ 时间: 2020-1-10 14:02
感谢分享

作者: 竹竹竹竹 时间: 2020-1-10 14:08
感谢分享

作者: majie 时间: 2020-1-10 14:19
干货

66666666666

作者: mydorling11 时间: 2020-1-10 21:20
666666666666666666666666

作者: 雨落轻舟 时间: 2020-1-11 11:15
很详细，受益匪浅

作者: 素问 时间: 2020-1-11 14:13
努力奋斗，加油，学到很多

作者: 逆风TO 时间: 2020-1-14 11:06

zhaosongzhi 发表于 2020-1-6 11:04
相信自己，加油！

加油哦~

作者: 逆风TO 时间: 2020-1-14 11:06

小公举发表于 2020-1-6 11:10
感谢楼主的分享祝你天天开心

加油哦~

作者: 逆风TO 时间: 2020-1-14 11:06

zhaosongzhi 发表于 2020-1-6 11:13
相信自己，加油！

加油哦~

作者: 逆风TO 时间: 2020-1-14 11:06

dendi 发表于 2020-1-6 20:37
学计算机哪家强，就来西安黑马程序员

加油哦~

作者: 逆风TO 时间: 2020-1-14 11:06

你不爱我发表于 2020-1-6 20:48
为千万学子而著书，66666

加油哦~

作者: 逆风TO 时间: 2020-1-14 11:06

王微发表于 2020-1-6 18:27
6666666666666666666666666666

加油哦~