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次
|
|
收藏
淘帖
踩
