前端第27次总结-
节点
快捷尺寸
1、元素:
clientWidth|Height 内容宽高
offsetWidth|Height +padding宽高
clientLeft|Top border的宽高
2、jq
Width|Height 内容宽高
innerWidth|innerHeight 带padding宽高
outerWidth|outerHeight 带border宽高
outerWidth|outerHeight(true) 带margin
3、定位元素
offsetParent 定位父元素
parentNode 父元素
offsetLeft|Top 相对于定位父元素的左上距离
4、jq
offset() 距离整个页面的左上
position() 距离定位父元素的左上距离
scrollTop/Left() 卷动
事件对象的属性
5、事件对象的属性
clientX|Y 视口
screenX|Y 屏幕
pageX|Y 页面
layerX|Y 和page相同
offsetX|Y 定位父元素
scrollX|Y 卷动值
scrollTop、scrollLeft都是css方法,滚动条进行位移
获取样式的方法
1、非行间式
getComputedStyle 和 currentStyle
2、行间式
box1.style.XXX
3、get/setAttribute('style', 'borderRadius:20px');
4、实现getStyle方法
键盘事件
onkeydown 键盘放下
onkeyup 键盘弹起
onkeypress 字符输入
tabindex属性,获取离开焦点。focus/blur
事件对象e.key 或者 keyCode
面向对象
普通函数为了实现某一种功能、构造函数为了创建对象。
构造函数new关键字进行调用,函数名、类名首字母大写。
构造函数4步骤:
开辟空间、改变this指向、执行代码为this赋值、返回this
优点:
防止全局变量被污染
复用属性名称和方法
定义类:可以区分类别(人/狗)
构造函数加原型
简单工厂模式:
createPerson 函数返回了一个对象,这种创建对象的方法就称之为工厂模式。
原型:
特点:
1、 定义同名方法时,构造函数里面的优先
2、constructor属性,代表构造函数
3、for in循环遍历实例, hasOwnProperty 判断属性是自己的还是原型的。
4、instanceof 会查询整条原型链
原型链
安全类
// 安全类 防止this指向全局,污染全局变量
// 无论怎么调用构造函数,都会返回一个对象
function Dog(name, age) {
// 判断怎么调用
if (this instanceof Dog) {
this.name = name;
this.age = age;
} else {
return new Dog(name,age);
}
}
内置的构造函数
Object Array Function String Number Boolean RegExp Error Date
继承
构造函数继承
类继承
组合式继承 每次创建实例会执行一遍父类语句
寄生式继承
BOM对象 以及其下属的各种对象
Git
https://blog.csdn.net/halaoda/article/details/78661334
分支
checkout 是切换分支
touch事件
移动端一般不会使用click事件,原因:
1、click事件慢
2、长时间不抬起鼠标会被取消
3、点击穿透
使用是为了判断双击
动画
zepto
touch
百度地图API
模块化开发
本地存储
JSON.stringify 转为字符串
JSON.parse 转为原类型
会话存储
WebSql
sql语句 学习
https://blog.csdn.net/a88055517/article/details/6736284
history对象
音频
视频
拖拽
服务器 和 HTTP
多线程Worker函数
线程通信
cavas
绘制图片