前端学习笔记
关注
分享
扫一扫
前段基础分享，可用于面试准备
软件小姐
白菜进阶日记
展开
-
对象——《你不知道的js(上卷)》读书笔记（六）
对象写在前面创建一个对象获取对象的值写在前面在上一篇笔记中，我们介绍了不同的调用位置this会绑定不同的对象，那么，什么是对象呢？在这里我们介绍一下JS的对象是个什么创建一个对象// 字面量创建方式var obj1 = { key : value , ...}//构造函数创建var obj2 = new Object();obj2.key = value;这两种方式创建的对象基本一样，他的不同点是字面量声明可以一次声明多个健值对，但是构造方式每次质嫩个设置一个。value可原创 2020-12-14 22:03:12 · 170 阅读 · 0 评论 -
JS中的类型——《你不知道的js 中》读书笔记（一）
七种内置类型类型是谁的类型？js的变量是没有类型的说法的，只有值才有类型。只有当变量被赋值的时候它才看起来有了值的类型。他可以随时持有任何类型的值。这就是js弱类型的体现，如果是强类型，会要求变量总是持有其初始化的类型的值。变量没有赋值时，仅仅声明是没有类型可言的。所以在表述上也应该注意，变量没有类型，值才有类型。undefined理解为未定义的值，即被var或者其他声明方式声明，但是没有赋值。var a;console.log(a); // undefinedconsole.log(b原创 2020-11-30 18:14:30 · 276 阅读 · 0 评论 -
粘性定位 sticky的使用场景——CSS使用场景
粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。例如我们常用的表格的表头即将滚出可视区时吸附在顶部等它是有使用条件的：父元素不能 overflow:hidden 或者 overflow:auto 属性必须指定 top、bottom、left、right 4 个值之一，否则只会处于相对定位父元素的高度不原创 2020-09-25 11:33:34 · 982 阅读 · 0 评论 -
多层嵌套的环境中如何快速找到滚动条的对应位置——CSS特殊场景整理
前两天代码中出现了需要调整滚动条样式的问题，对于滚动条属于哪个div还是磕了一会。特此记录案例：//为代码<div 1 height = 屏幕高度> <div 2 height = auto> <div 3 height = 2*屏幕高度> 内容 </div> </div></div>这种方式如果理性的进行分析，其实是可以分析出答案的～首先我们先明确一点，什么情况下会有滚动条，就是子元素的高度（或者.原创 2020-09-25 11:22:00 · 923 阅读 · 0 评论 -
什么情况下lineheight和height相等却不会居中对齐——特殊场景整理
目录居中对齐的原理无法居中对齐的原因居中对齐的原理line-height可以理解成每行文字所占的高度。他的标准定义是每行文字基线与基线的距离。例如，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。显然，每个字的大小只有20px，于是浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。这样的话，如果你原创 2020-09-08 14:06:02 · 1845 阅读 · 1 评论 -
js中的宽松相等和严格相等 “==” 和 “===” ——js基础
宽松相等和严格相等都用来判断两个值是否相等，但是在条件上有一个重要的区别！------待更原创 2020-08-31 14:40:12 · 219 阅读 · 0 评论 -
伸缩盒Flex布局，让你更好的实现响应式！——特殊场景整理
伸缩盒布局，让你更好的实现响应式原创 2020-08-10 11:04:27 · 213 阅读 · 1 评论 -
CSS中的盒类型display——属性整理
CSS中的盒类型display，你了解多少呢？原创 2020-08-10 10:24:32 · 739 阅读 · 0 评论 -
js使用new操作函数
js使用new操作函数会执行的操作：1、创建一个新的对象2、这个新对象会被执行原型的链接3、这个对象会被绑定到函数调用的this4、如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象...原创 2020-08-06 09:46:22 · 333 阅读 · 0 评论 -
CSS中的百分数到底是以谁为基准的？——场景整理
%%原创 2020-08-05 10:19:32 · 879 阅读 · 0 评论 -
js中的this，你真的理解了吗？——《你不知道的js 上》读书笔记（五）
this原创 2020-08-05 11:49:55 · 195 阅读 · 0 评论 -
meta元素能干啥——标签整理
请问原创 2020-08-05 10:03:03 · 171 阅读 · 0 评论 -
js中的提升！绝对神总结——《你不知道的js 上卷》读书笔记（四）
看到这个题目我们可能会想到若干问题：1.提升什么东西？2.提升到哪里？3.为什么要提升？4.什么时候提升？5.提升做什么用？如果你也有这些疑问，就跟着我一起来学习这篇文章吧！不论你是连提升两个字都没听过的j小白，还是你已经略知一二，这篇文章都可以给你一定的收获！什么是js的提升？首先呢我们应该知道，js这门语言他虽然是解释型的语言，但是也是有编译过程的！如果你不知道js编译器做什么可以看看 之前的文章 ,在编译阶段，有一部分工作就是提升！提升可以理解成字面本意，就是把一部分代码从其出现的原创 2020-07-29 20:52:38 · 448 阅读 · 1 评论 -
超链接a标签——标签整理
今天，我发现我前天的一篇文章有七个人收藏了！！访问量有八百，还多了一个粉丝！！因为之前的粉丝都是熟人啊啊啊啊啊，为了7个收藏我文章的人和一个我的粉丝，我决定今天多更一篇！！上一篇文章我第一次用脑图啊a标签超链接废话不多说，先来上波图！！！日常开发中，我们用a标签来生成一个超链接，帮助用户来导航！！<a href = '' target = '' download = '' hreflang = ''></a>属性整理href属性该属性用来定义资源的位置（url）.原创 2020-07-29 10:31:09 · 379 阅读 · 0 评论 -
与图像相关的html标签img以及 各种格式的图片对比 —— 标签整理
图像img相关的标签一般用法//日常<img src = '图片url' alt = '获取图片失败的提示' /> //其他<img src = '图片url' alt = '获取图片失败的提示' crossorigin = '帮助跨域' //说明见下 usemap = '关联分区响应图，见下文' //说明见分区响应图部分/>// crossorigin是html5新增的一个属性，用来帮助图像跨域,// 主要目的用于帮助canvas元素能够使用原创 2020-07-28 15:07:23 · 1513 阅读 · 0 评论 -
css 选择器 及 层叠规则 ——场景整理
废话不多说，先来上波图！！！选择器类型（color为例）基本选择器通配选择器*{color:red}标签选择器p{color:red}类选择器.class-red{color:red}id选择器#id-red{color:red}属性选择器属性名选择input[name]{color :red}属性值选择input[type = 'text']{color:red}部分属性值input[name ^= 'data原创 2020-07-27 17:45:52 · 1848 阅读 · 1 评论 -
前端 书单 笔记 推荐好书，给你笔记 全是干货哦
1 编写可维护的js领导一看就加薪的编程风格！！！——读书笔记篇《编写可维护的js》（一）领导一看就加薪的编程风格！！！——读书笔记篇《编写可维护的js》（二）原创 2020-07-17 20:09:00 · 1299 阅读 · 2 评论 -
JS引擎和他的朋友编译器和作用域的故事 第二集《function foo(a) {var b=a；return a+b；}var c=foo(2)；》——《你不知道的js(上卷)》读书笔记（二）
———待更新原创 2020-07-24 16:41:57 · 509 阅读 · 0 评论 -
JS引擎和他的朋友编译器和作用域的故事 第一集《var a = 2 ；》——《你不知道的js 上》读书笔记（一）
javascript 剧场新节目 《var a = 2》，来咯报幕主持人：下面由我社团编译器同学、作用域同学、引擎同学为大家带来话剧表演《配合》。在表演前请允许他们三人做一个简单三位自我介绍。引擎：大家好，我叫引擎，我主要负责js程序的编译和执行过程。编译器：大家好，我是编译器，引擎的好朋友。我主要负责语法分析、代码生成等脏活累活。作用域：我是引擎的另一位好朋友，作用域。我负责收集和维护所有的变量，并实施一套非常严格的查询规则。三人齐：好戏正式开始！...原创 2020-07-24 16:02:06 · 308 阅读 · 0 评论 -
前端学习笔记 ！！持续加更,当然我知道我现在还配不上呢---哭
html相关标签整理＜ html ＞＜ /html ＞ 标签？？？呐尼 这有什么好说的！！！——标签整理你真的了解DOCTYPE吗？——标签整理input表单标签 最全整理 使用情景 细节处理等等等——标签整理css相关属性整理背景相关css属性 你还模棱两可吗？ 进来看看 有源码有实例——属性整理布局应用js相关下边真的可以不看 -----想学习一些前端的书籍吗，我都帮你整理好啦！最全的学习笔记等你来拿哟有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗这次真的可以原创 2020-07-18 14:22:14 · 394 阅读 · 0 评论 -
背景相关css属性 你还模棱两可吗？ 进来看看 有源码有实例——属性整理
背景相关使用的原始图片：起始点background-origin（css3） <div class = 'backgrounddemo originpadding'></div> <div class = 'backgrounddemo originborder'></div> <div class = 'backgrounddemo origincontent'></div> <style>原创 2020-07-18 14:11:54 · 367 阅读 · 1 评论 -
input表单标签 最全整理 使用情景 细节处理等等等——标签整理
input 标签input 标签用来获取用户的数据，根据数据类型的不同，进行了如下分类：文本类数据文本类type属性hidden使用场景：存储不让用户看见和编辑但又需要发送的数据。text只能输入单行文本，回车换行符自动忽略。password密码输入，防止偷窥tel（html5新增）移动端可以弹出数字键，如果是pc端，与text一样，这个功能仅仅是免去了用户切换键盘，仅此而已，没有电话号码的检测！！！email（html5新增）输入邮箱，提交时会验证基本格式search（html原创 2020-07-18 14:07:38 · 1135 阅读 · 0 评论 -
你真的了解DOCTYPE吗？——标签整理
DOCTYPE该元素一般声明在html文档的首行，也是最顶行，在html标签之前。准确的说这不是html标签的一部分，他是html文档的一部分。并且有固定的书写格式。告诉浏览器用何种方式解析html文档。<!DOCTYPE 根元素 PUBLIC FPI [URI] >DOCTYPE元素重的关键字有：1.根元素——一般是html，2.PUBLIC——公开的文档类型定义（dtd）3.FPI—— 正式公共标识符，唯一标识文档、产品、规格等。该标识分为两个部分，一部分是所有者标识符，一部分原创 2020-07-18 14:02:22 · 205 阅读 · 0 评论 -
＜ html ＞＜ /html ＞ 标签？？？呐尼 这有什么好说的！！！——标签整理
< html >< /html ><html><head></head><body><div>aaa</div></body></html>html是所有元素的根元素，以< html >开始，< /html >结束，在标签中，是一个head元素后跟一个body元素组成。这告诉识别代码的机器中间是一个html语法的内容。根元素属性目前根标签html原创 2020-07-18 13:59:34 · 564 阅读 · 0 评论 -
超详细！！！浏览器输入URL到页面展示的全过程
1. 输入URL WWW.baidu.com 搜索2.查看缓存3.解析URL4.组装http请求报文5.获取ip地址6.建立tcp链接7.发送请求报文8.服务器接受请求报文进行解析9.组装响应报文10.发送响应报文11.关闭tcp链接12.原创 2020-07-07 15:22:20 · 346 阅读 · 0 评论 -
渲染 前端
vue 渲染起源所谓渲染，就是要把一个真实的dom节点渲染到html页面中。vue渲染也不例外。一般情况下，页面的渲染都要经过以下四个步骤（浏览器为例）：解析html，生称dom树解析css，生成cssom树合并以上两个生成渲染树计算布局、div尺寸（排列），浏览器引擎进行渲染（绘制）当一些背景样式等不影响布局的样式改变时，会引起浏览器的重绘，重绘就是重新绘制，不会重新布局，不会重新计算尺寸渲染。与之相对应的就是重排，也称为回流，也就是dom结构发生改变或者元素尺寸发生改变时，浏览器需要原创 2020-06-22 18:41:21 · 226 阅读 · 0 评论 -
vue v-if与v-show
使用方式<p v-if = 'true'> v-if为true</p><p v-if = 'false'> v-if为false</p><p v-show = 'true'>v-show为true</p><p v-show = 'false'>v-show为false</p>结果：页面渲染：dom结构：区别：v-if逻辑会预先做出判断,v-show只是单纯的css控制display:none原创 2020-06-20 11:20:47 · 153 阅读 · 0 评论