web API
querySelector ~满足条件的第一个元素
querySelectorAll ~满足条件的元素集合(伪数组)
innerText ~显示纯文本,不解析标签
innerHTML ~会解析标签,多标签建议使用模板字符
style ~控制标签style行内样式,操作css属性需要遵循驼峰命名
className ~属性可控制标签class属性
add ~添加类
remove ~删除类
toggle ~切换类
value ~值
disabled=true ~按钮不可点击
checked= true ~复选框默认选择
selected ~下拉列表的默认显示
data- ~自定义属性
dataset ~自定义属性获取
setInterval(回调函数, 间隔时间) ~间歇定时器
clearInterval(定时器名) ~清理间歇定时器
addEventListener ~事件监听
click ~鼠标点击事件
mouseenter ~鼠标经过
mouseleave ~鼠标离开
focus ~获得焦点
blur ~失去焦点
keydown ~键盘按下触发
keyup ~键盘抬起触发
key ~ 键盘按键值
type ~事件类型
submit ~ 提交事件,一般用来阻止表单的提交默认行为时使用
this ~环境对象,谁调用,它就是谁
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
e 、event ~ 回调函数的第一个参数就是事件对象
e.stopPropagation() ~阻止事件冒泡
e.preventDefault() ~阻止元素默认行为
e.target ~触发的目标元素
e.target.tagName ~触发的目标元素字母
window ~全局对象,也可以说是JavaScript中的顶级对象
scroll ~页面滚动事件
window.addEventListener('scroll', fn) ~滚动条在滚动的时候持续触发的事件
scrollTop ~在scroll事件里面获取被卷去的高度,可修改
scrollLeft ~在scroll事件里面获取被卷去的宽度,可修改
resize ~页面尺寸事件
window.addEventListener('resize', fn) ~给window注册尺寸改变事件
clientWidth ~获取元素的可见部分宽 (不包含border,margin,滚动条等)
clientHeight ~获取元素的可见部分高(不包含border,margin,滚动条等)
offsetWidth ~获取的是当前元素到自己最近的开启定位的父元素的宽,包含元素宽高,内边距,边框,不包含外边距
offsetHeight ~获取的是当前元素到自己最近的开启定位的父元素高,包含元素宽高,内边距,边框,不包含外边距
document.documentElement.scrollTop=0 ~回到页面顶部
new Date() ~日期对象
.getFullYear() //年
.getMonth() //月
.getDate() //日
.getDay() //周
.getHours() //时
.getMinutes() // 分
.getSeconds() // 秒
toLocaleString() ~ 返回该日期对象的字符串(包含日期和时间)
toLocaleDateString() ~ 返回日期对象日期部分的字符串
toLocaleTimeString() ~ 返回日期对象时间部分的字符串
元素.parentNode ~查找父节点
父元素.children ~ 查找子节点(伪数组)
.previousElementSibling ~查找上一个兄弟元素
.nextElementSibling ~查找下一个兄弟元素
元素.remove() ~删除节点
touchstart ~触摸开始(移动端)
touchmove ~滑动中(移动端)
touchend ~手指离开(移动端)
forEach ~遍历数组
字符串.substring(起始索引号, [结束索引号]) ~获取字符串中的字符
setTimeout(回调函数, 延迟时间) ~延时定时器
clearTimeout(定时器名) ~清除延时定时器
location ~对象,主要负责网页的地址栏
location.href ~跳转页面
location.reload() ~刷新
navigator.userAgent ~主要用来获取浏览器的信息(了解)
histroy ~对象,主要负责管理历史记录
.forward() ~前进一页
.back() ~后退一页
.go(值) ~ 值为 1 前进一页, 值为- 1后退一页
localStorage.setItem('键', '值') ~本地存储数据
localStorage.getItem('键') ~取出本地存储的数据
localStorage.removeItem('键') ~删除本地存储的数据
JSON ~字符串的语法
JSON.stringify(复杂数据类型) ~将复杂数据转换成JSON字符串(一般用来数组转字符串)
JSON.parse(JSON字符串) ~将JSON字符串转换成对象(一般不用)
map ~循环,可以遍历数组处理数据,并且返回新的数组
test ~方法用于判断是否有符合规则的字符串
+号 ~表示重复至少 1 次
?号 ~表示重复 0 次或1次
*号 ~表示重复 0 次或多次
{m,n} ~表示复 m 到 n 次
[abc] ~三选1
[a-z] ~26个小写英文字母选1
i ~是单词 ignore 的缩写,正则匹配时字母不区分大小写
g ~是单词 global 的缩写,匹配所有满足正则表达式的结果
change ~ 事件,值被修改并且失去焦点后触发
contains ~元素.classList.contains() 查看有没有包含某个类,如果有则返回true,么有则返回false
required ~表单 input 的属性,表示必填项,加了该属性就必须要 用户填写后才可以提交
javascript进阶
arguments ~是一个伪数组,只存在于函数中,作用是动态获取函数的实参
arguments .callee ~严厉模式
... ~剩余参数,用于获取多余的实参,并形成一个真数组
... ~展开运算符,将一个数组/对象进行展开
filter() ~筛选,函数内部要返回筛选条件,符合条件的会把当前遍历的元素加到新数组中,最后 filter 返回新数组
new ~关键字调用函数的行为被称为实例化
.keys ~获取对象的所有属性,键
.values ~获取对象所有的属性值
.assign ~拷贝一个对象,复制出一个新的对象,且互不影响
Array.from ~将伪数组转换为真数组
forEach ~遍历,无返回值
map ~对元素进行加工,返回一个新数组
filter ~筛选,找到所有符合符合条件的元素添加到新数组并返回
reduce ~求和,累加器,有两个参数(prev、item)遍历后返回累加的值
find ~查找元素,对数组元素进行遍历,符合条件则返回该元素
findlndex ~查找元素,对数组进行遍历,符合条件,返回该元素得索引
some ~判断是否有指定条件的元素,先对元素进行遍历,有一个符合的就返回 true
every ~判断所有的元素都符合条件,全部符合返回 true
concat ~合并数组
reverse ~翻转数组
sort ~数组排序
length ~长度
replace ~替换
substring ~截取
splitn ~切割字符串
startsWith ~判断开头
endsWith ~判断结尾
include ~判断是否包含
trim() ~清除首尾的空白字符
contains() ~方法用于判断字符串中是否包含指定的字符或字符串。
toFixed ~保留 n 位小数,自动补零
findIndex() ~方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
confirm() ~询问框,确定则继续向下执行,否则执行返回值,退出函数
prototype ~ 这也是一个对象,称为原型对象
constructor ~ 每个原型对象里面都有个constructor 属性,它指向原型对象的构造函数
proto ~原型,对象都会有一个属性 proto 指向构造函数的prototype 原型对象,proto属性链状结构称为原型链
[[prototype]] ~ 和proto意义相同
instanceof ~运算符,用来检测构造函数.prototype 是否存在于实例对象的原型链上,返回值是 布尔值
throw ~抛出异常信息,程序也会终止执行,throw 后面跟的是错误提示信息
Error ~此对象配合 throw 使用,能够设置更详细的错误信息
debugger ~相当于断点调试
try...catch ~ 用于捕获错误信息,异常处理,一般广泛用于网络请求中,因为网络请求是未知的
(
try { } catch(error) { } finnaly { } ~语法
error ~捕获到错误的代码,不做如何处理
try ~尝试 ,预估可能发生错误的代码
catch ~拦住 ,如果try 中的代码出现错误,就会执catch的代码 ,并截获 错误内容
inally ~最后 ,不管是否错误,都会执行 finally 内的代码
)
call() ~改变this指向,传递参数列表,调用函数
apply() ~改变this指向,参数是数组,调用函数
bind() ~改变this指向,传递参数列表,不调用函数
debounce ~防抖,单位时间内,频繁触发事件,只执行最后一次
throttle ~节流,单位时间内,频繁触发事件,只执行一次
console.dir() ~可以打印元素的所有属性
integer ~整数类型
.reset() ~这个方法可以重置表单,清空表单
axios ~库
url ~引入网址
GET ~请求从服务器获取数据
POST ~请求向服务器提交数据
method ~指定请求方法(默认是 GET)
data ~提交数据
params ~获取数据
pname ~要获取什么数据
.then ~处理数据
.catch ~处理错误
scrollHeight:内容的高度,当盒子有滚动条时说明内容的高度超过了盒子本身
scrollTop:盒子滚出去的距离
XMLHttpRequest 的方法 :
.status 用于获取状态码
.response 用于获取结果
.resolve() 成功
.reject 失败
.send() 发送请求
.message 错误
清除所有的 localStorage 中的数据 ~ .clear()
B 终端
Error 报错
Fatal 严重报错
CTRL+C 中断
CTRL+L 清空列表
选中就是复制
鼠标右键 paste 是粘贴
git中有哪三个区域? 工作区, 暂存区, 仓库区
git config --global user.name 你的用户名
git config --global user.email 你的邮箱地址
git config --list ~配置后, 可以运行如下命令查看是否成功
git init ~初始化 git 仓库
git add . ~a次性把所有变化文件, 放入暂存区
git commit -m '提交的内容说明' ~把暂存区内容, 提交到版本库,(如果不加 -m ,会进入另一个模式,可以使用 :q! 来退出此模式)
git log ~查看所有提交的日志记录
git log --oneline ~简化查看所有提交的日志记录,查看Head标记,查看版本号
git status ~查看git仓库变化
git reset --hard 版本号 ~版本回退,跳转到对应版本
git reflog ~可以查看 git 所有的操作记录,包括你的reset记录
.gitignore ~ 我们需要在.git文件夹隔壁, 来个叫做 .gitignore (固定名字)的忽略文件, 并写入忽略规则
git branch 分支名 ~创建分支
git branch ~查看当前版本库所有分支,绿色带*代表, 你现在所处的分支
git checkout 分支名 ~切换分支命令
git merge 目标分支名 ~把目标分支名下的所有记录, 合并到当前分支下
git branch -d 分支名 ~删除分支的命令
git checkout -b 分支名 ~创建并切换到此分支(不要经常用)
git remote -v ~查看当前仓库地址
.hide() ~隐藏弹窗
.show() ~显示弹窗
Object.keys() ~取属性中出每一个键(属性名)
hash: true, emtey: true ~获取表单
push ~添加多个元素,方法会改变原有数组,且返回改变后数组的长度