一些前端常用属性

25 阅读9分钟

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 ~添加多个元素,方法会改变原有数组,且返回改变后数组的长度