一名前端工程师的笔记分享！Js篇（03-05更新）

今天改bug改的自己差点忘记交房租了，哎心塞。对了昨天忘记写了，关注我的小伙伴不光可以看到更新的视频，还能私信我，发送-书籍，就会送大家四十多本技术方面的pdf书籍。^_^

offset 家族

获取元素的宽和高：

offsetWidth / offsetHeight 获取的宽度为：内容宽度　＋　补白　＋　边框

clientWidth / clientHeight 获取的宽度为：内容宽度　＋　补白

对象.style.width 和 offsetWidth 区别：

1、前者获取的宽度 为内容的的宽度（不包括补白和边框） ， 后者获取的宽度为 内容宽度 + 补白 + 边框

2、前者获取的结果类型 为 string 后者获取的类型为 number ，可以直接操作

3、前者可读可写 后者只可读不可写（只能获取结果不能设置结果）

4、前者只能获取行内样式值（带有px值） 后者可以获取行内值也可以获取内嵌样式值

获取元素偏移量：

offsetLeft ： 获取距离上一级中（离他最近）具有定位的元素的左偏移，这里的上一级可能是父元素，也可能是上上一级爷爷元素，也可能是曾爷爷....

offsetTop : 获取上偏移（含义同上） 如果上一级中所有元素都没有定位，默认相对body的左偏移

---

Js实现拖拽效果

1、要想实现拖拽效果，首先要有鼠标按下事件

鼠标按下时，需要记录 鼠标按下时相对于移动盒子的偏移量

rex = e.offsetX || e.layerX

rey = e.offsetY || e.layerY

2、鼠标拖拽盒子在文档上移动，需要给文档添加一个 鼠标移动事件

document.onmousemove = function(){....}

3、如果要停止拖拽，鼠标抬起时需要取消文档的移动事件

document.onmouseup = function(){

//取消文档的移动事件

document.onmouesmove = null;

}

代码实现：

box.onmousedown = function(){

rex = e.offsetX;

rey = e.offsetY;

document.onmousemove = function(){

box.style.left = e.pageX - rex

box.style.top = e.pageY - rey;

}

}

document.onmouseup = function(){

document.onmouesmove = null;

}

获取窗口的宽度和高度：

window.innerWidth / window.innerHeight

window.outerWidth / window.outerHeight(包含浏览器的工具条高度)

---

取消拖拽时文字的选中状态

window.getSelection?window.getSelection().removeAllRanges() : document.selection.empty();

---

客户端和服务器

客户端：一台电脑，为用户提供服务

服务器：安装了特定服务软件的一台电脑

java php .net 服务器语言

Tomcat apache iis 服务器软件

客户端和服务端的工作流程：

---

会话跟踪技术

客户端请求数据，服务器端根据客户端请求的数据并将数据解析返回的这样一个过程;称为一个会话。

会话跟踪技术 就是cookie

从客户端向服务器端发送一些数据 ， 部分数据可以通过cookie存储 ， cookie就是用来存储数据的

通过cookie可以存储会话过程中的状态和信息

会话结束：浏览器关闭后;本次会话结束

---

cookie的存和取

存： document.cookie = "键=值"

取： document.cookie

---

对象类型和字符串类型之间转换

JSON.stringify( 对象 ) 将对象类型转成字符串

JSON.parse( 字符串 ) 将字符串转成对象 这里的字符串要求： 去掉引号后就是一个对象

例如： "[1,2,3,4,5]" 可以正常转换 '{"name":"admin"}' 可以

"hello" 不可以正常转换

cookie 存的数据类型是字符串

document.cookie取出来的数据一定是字符串

---

cookie的生存期

生存期：cookie信息在浏览器中生存时间

设置生存期：

document.cookie = "键=值;expires=标准时间格式";

生存期说明：

1、如果不设置生存期，浏览器关闭，cookie信息自动消失

2、如果设置生存期，cookie信息会在生存期规定时间后自动消失。

3、如果通过更改系统时间的方式删除cookie，这种删除方式为假删除 ， 系统时间恢复后，cookie信息自动恢复

4、如果要删除cookie， 可以将cookie的值设置为"", 或将cookie的生存期改为 -1

---

欢迎大家持续关注。号内有多个专题，小程序（持续更新中）,Javascript（持续更新）,Vue（视频）等学习资源。觉得有收获的可以收藏关注，欢迎骚扰，一起学习，共同进步。

---

我的小程序，自律更自由，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

一只喜欢锻炼的程序猿，嘿嘿。

你都看到这了，不点个关注就过分了哈～