前端
关注
分享
扫一扫
除了HTML CSS JavaScript之外的东西都塞到这里
Ann's Blog
是个小白。啥也不会。
展开
-
css经典布局 圣杯布局 双飞翼布局 经典写法
双飞翼<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> footer, header { height: 110px; backgr...原创 2020-04-12 12:06:46 · 411 阅读 · 0 评论 -
前端笔记（6）flex弹性盒
文章目录`flex-direction`弹性元素的属性`flex-basis`元素基础长度flex`order``flex-wrap``flex-flow``justify-content``align-items``align-self``align-content`使用flexbox布局的文档区域称为flex容器。 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局flex可以使...原创 2020-03-09 23:30:05 · 387 阅读 · 0 评论 -
前端笔记（7）CSS图标字体
图标字体（iconfont） 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标下面提供两个图标字体库： font awesome和阿里图标库font awesome下载官网：https://fontaw...原创 2020-03-08 23:49:49 · 934 阅读 · 5 评论 -
前端笔记（5）position定位
文章目录相对定位绝对定位固定定位粘滞定位布局z-index定位（position）一定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用 position属性来设置定位可选值:static默认值，元素是静止的没有开启定位relative开启元素的相对定位absolute开启元素的绝对定位fixed开启元素的固定定位sticky开启元素的粘滞定位偏移量：...原创 2020-03-07 23:04:31 · 563 阅读 · 1 评论 -
前端笔记（4）CSS浮动
文章目录float浮动的特点clear高度塌陷解决高度塌陷问题探索过程设置BFChtml方法css方法解决高度塌陷问题（也可以解决父元素和子元素外边距重合）float通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用 float属性来设置于元素的浮动可选值：none默认值，元素不浮动left元素向左浮动right元素向右浮动注意，元素设置浮动以后，水平布局的等式（就那个内外边...原创 2020-03-07 17:52:21 · 330 阅读 · 1 评论 -
CSS清除浏览器默认样式
上图我们可以看出虽然我对div和p没设置任何外边距内边距，但是他们之间还是会出现间隔。这是因为浏览器给他们设置了默认的边距。设置了默认值不要紧，但是不同浏览器会设定不同的默认值，这种默认样式在开发中会造成影响，因此我们要将其去除，使页面中的样式在所有浏览器中显示效果都相同。本文给出三种对策。可以下载我提供的文件，引入即刻生效。我在文章末尾给出了源码，也可以直接复制使用。*通配选择器简单处理...原创 2020-03-06 10:31:19 · 14126 阅读 · 0 评论 -
前端笔记（3）CSS盒模型
文档流（normal flow）网页是一个多层的结构，一层摞着一层，通过css可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层。这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。对于我们来元素主要有两个状态：在文档流中不在文档流中（脱离文档流）元素在文档流中有什么特点：块元素块元素会在页面中独占一行（自上向下垂直排列）...原创 2020-03-05 20:37:46 · 469 阅读 · 0 评论 -
前端笔记（2）CSS选择器
这是我以前学的时候记的东西了，最近想把关于计算机的东西清理出电脑，就发出来了。也没什么用，详细的还是去看时文档比较靠谱。如果出现☆就证明是CSS3才有的嗷。文章目录选择器，叫选择符啊什么的也行元素选择器通配选择器类型选择符id选择器类选择器复合选择器关系选择器包含选择符、子选择符相邻选择符兄弟选择符属性选择器伪类选择器伪元素网页分成三个部分：结构（HTML）表现（CS）行为（JavaS...原创 2020-03-02 18:23:35 · 510 阅读 · 0 评论 -
一个很简单，但是综合了作用域、事件轮询的JavaScript题目
（1）输出什么？for (var i = 0; i < 5; i++) { console.log(i);}答案：0 1 2 3 4（2）输出什么？for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100 * i);}答案：5 5 5 5 5（3）输出什么...原创 2020-04-17 17:12:11 · 412 阅读 · 0 评论 -
从几个题目看一下JavaScript的 共有、私有、静态属性和方法
本文是从两个面试题入手分析一些JavaScript的基础知识。主要涉及两方面的内容：1.JavaScript的公有属性、公有方法、私有属性、私有方法、静态属性、静态方法2.JavaScript运算符的优先级原创 2020-04-17 10:51:56 · 344 阅读 · 0 评论 -
JavaScript 创建对象的模式 (蜜汁上帝视角
这个博客里主要介绍一下JavaScript创建对象的一些模式。想要深入详细了解还是建议大家看看书。文章目录工厂模式构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数模式说起创建对象，一般来说我应该讲创建女朋友的。可是想了想我就是女的，也没什么特殊爱好，所以我还是不创建女朋友了。行现在开始????就是????上帝。????要开始造人了。我先造一个亚当，再造一个夏娃。 ...原创 2020-04-01 20:29:34 · 325 阅读 · 0 评论 -
JavaScript原生 解决跨域问题
什么是跨域呢？简单来说就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。www.abc.com/index.html --> www.abc.com/service.php（非跨域）www.abc.com/index.html --> www....原创 2020-03-28 13:50:37 · 6020 阅读 · 0 评论 -
JavaScript异步 之 Generator函数
Generator 函数是 ES6 提供的一种异步编程解决方案。有人称为生成器。首先可以把它理解是一个状态机，封装了多个内部状态。还是一个遍历器对象生成函数。因为执行 Generator 函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。原创 2020-04-19 00:21:02 · 404 阅读 · 0 评论 -
JavaScript 数组扁平化的几种方法
Q：什么是数组扁平化？A：把一个多维数组变成一维数组就是数组扁平化Q：数组扁平化有什么作用？A：这个其实我也不知道，我也是停留在理论层面，没有什么实战经验的。**但是** 据我老师说，可以处理复杂的后台数据。你想一下，如果你接受到一个json文件，里边的数据一层一层一层又一层的洋葱一样的嵌套，那你要取用数据就是很麻烦的，所以比就需要把它扁平化处理。原创 2020-05-01 18:24:32 · 947 阅读 · 1 评论 -
JavaScript 判断数据类型的6个方法
文章目录typeofObject.prototype.toString...instanceofconstructortypeoftypeof是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示typeof虽然能用，但是如果你用它来看null或者数组的类型，就会翻车哦因为typeof只会返回number，boolean，str...原创 2020-03-27 23:48:41 · 354 阅读 · 0 评论 -
JavaScript 深拷贝浅拷贝
数据类型数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和引用数据类型基本数据类型特点： 存储的是该对象的实际数据对象数据类型特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里复制数据基本数据类型复制没问题：但是当你复制对象/数组的时候就出现问题啦为什么复制数组之后，修改了b的值，连a也一起修改了！！！？为什...原创 2020-03-28 00:28:15 · 254 阅读 · 0 评论 -
JavaScript 浅析回调函数
文章目录函数JavaScript中如何声明一个函数呢？函数调用回调函数什么是回调函数？举个栗子回调函数的参数函数在看这篇文章之前你应该已经知道，在JavaScript中什么是函数。如果你不知道什么是函数，那就退出去查一下嗷。(●′ω`●)JavaScript中如何声明一个函数呢？现在我先给出一个简单的要求： 写一个函数，能够打印出hello world。下边我给出三种声明函数的方法。...原创 2020-03-27 21:53:25 · 305 阅读 · 0 评论 -
JavaScript 事件轮询 | 宏任务队列 微任务队列 | async await，setTimeOut，promise的执行顺序
事情起因是这样的，我吹了个牛然后小哥哥就真的给了我一个面试题！！！结果我发现自己不会！！！(╯￣Д￣)╯╘═╛不过现在会了，查漏补缺了。这篇文章主要涉及JavaScript的宏任务队列和微任务队列相关内容，后续有机会的话我可能整理一下JavaScript的异步？首先来思考一下，这个代码输出什么。 const p = new Promise(function(resolve, rej...原创 2020-03-26 21:38:33 · 1177 阅读 · 7 评论 -
详细解析 JavaScript 闭包
如何产生闭包?当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包产生闭包的条件?函数嵌套内部函数引用了外部函数的数据(变量/函数)注意： 闭包存在于嵌套的内部函数中常见的闭包将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用闭包的作用使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)让函数外...原创 2020-03-26 13:00:53 · 1249 阅读 · 1 评论 -
JavaScript 变量提升 | 作用域 | 执行上下文 | 变量提升
文章目录变量提升执行上下文全局执行上下文函数执行上下文执行上下文栈变量提升JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后声明，也就是变量可以先使用再声明。声明了a，没声明b，输出a不会报错，但是输出b会报错==>变量可以先使用再声明。变量的提升只会把声明提升，但是初始化不会提升，也就是说可以输出a，但是a = 5却没有输出出来。函数...原创 2020-03-25 19:11:52 · 624 阅读 · 0 评论 -
JavaScript 详细图解原型
文章目录显式原型 隐式原型图解原型（这个说的不全，要完全理解一定要往下看）图解原型链总结先说对象再说函数补充：显式原型 隐式原型每个函数都有一个prototype属性如果你自己写一个函数， 那么它默认指向一个Object空对象(即原型对象)，你可能说这不是里边有constructor和__proto__吗，这个看了下边的就明白了了。查看一下js提供的array函数的prototype，...原创 2020-03-25 16:54:20 · 959 阅读 · 1 评论 -
JavaScript中 构造函数的new都做了什么
创建一个新的对象将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象（将构造函数的作用域赋给新对象）逐行执行函数中的代码（执行构造函数中的代码，为这个新对象添加属性）将新建的对象作为返回值返回 var arr = new Array; console.log(arr); console.log(Array.prototype);下图中左边...原创 2020-03-23 22:31:26 · 1035 阅读 · 0 评论 -
JavaScript异步 ES6 Promise对象
文章目录简介语法创建一个promise对象语法如下：.then举个栗子创建成功或失败的Promise对象promise和AJAX举个栗子ajax的原生方法fetch简介Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。...原创 2020-03-23 20:39:24 · 293 阅读 · 0 评论 -
JavaScript原型 | ES6 class 类
对prototype对象是否有很多的问号，作为一个计算机入门语言是c++和java的我，理解原型当然很容易，但是也会觉得写法麻烦，于是ES6提出了解决办法。ES6可以像c++样使用class了。用法也差不多。比如：创建一个person类，constructor方法就是类的构造方法。你在person类里添加的方法，都会作为这个类的原型存在。注意添加方法的时候要采用对象方法的简写方式。子类对...原创 2020-03-25 16:28:35 · 1265 阅读 · 0 评论 -
详细解析 JavaScript中的this 与 ES6箭头函数的this
文章目录普通函数的this箭头函数普通函数的this如果单独使用，this 表示全局对象。在函数中，this 表示全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。在方法中，this 表示该方法所属的对象。在事件中，this 表示接收事件的元素。类似 call() 、apply()、bind() 方法可以将 this 引用到任何对象。 var...原创 2020-03-22 22:03:22 · 788 阅读 · 0 评论 -
总结ES6的一些简写
可能严格意义上来说不能叫简写，反正我想表达的意思是比起原来的方法写起来更简单的东西。希望你们能懂。 ( ᖛ ̫ ᖛ )ʃ) 文章目录模板字符串：简化字符串的拼接简化对象写法...rest变量的解构赋值：赋值简化形参默认值箭头函数模板字符串：简化字符串的拼接模板字符串必须用``包含，变化的部分使用${xxx}定义， 下边例子可以看出比用+拼串短很多嗷。var name = "sian";...原创 2020-03-22 21:56:44 · 869 阅读 · 0 评论 -
JavaScript 事件流：事件捕获和事件冒泡的范围 | 事件监听
事情本来是这样的，对于事件，微软认为应该是从内向外的，但是网景认为应该是从外向内的。最后w3c就制定了事件流分为三个阶段：事件捕获：由外向内事件目标事件冒泡：由内向外，当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。我这个文章主要是解释事件流的范围。 因为之前看到某大厂的面试题问到事件冒泡最后到哪里结束。我不知道答案，结果在网上查，答案也是没个准，只好自己动...原创 2020-03-22 19:16:04 · 573 阅读 · 0 评论 -
BOM window对象 计时器实现图片轮转
今天写网站，主页有一个定时调用，虽然简单但还是写一下，怕我以后忘了的时候可以直接过来复制代码。文章目录先介绍两个相关的window方法定时调用延时调用:ok_hand:总结一下两个函数来实习操作一下吧先介绍两个相关的window方法定时调用setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。即可以将一个函数，每隔一段时间执行一次参数：回调函数，该函数会每隔...原创 2020-03-16 15:14:12 · 348 阅读 · 0 评论 -
CSS DOM | CSSStyleDeclaration
文章目录DOM对CSS的操作读取和修改内联样式读取元素的当前样式IE其他浏览器和或IE9+所有浏览器都兼容的方式其他的样式相关的属性CSSStyleDeclaration对象属性对象方法DOM对CSS的操作读取和修改内联样式读取内联样式：语法：元素.style.样式名修改内联样式：语法：元素.style.样式名=样式值注意： 如果样式名中带有-，则需要将样式名修改为驼峰命名法...原创 2020-03-14 14:11:31 · 1449 阅读 · 0 评论 -
HTML DOM对象 dom查询 | dom修改
Document Object Model 文档对象模型HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。JavaScript通过DOM可以来任意来修改网页中各个内容。文档：文档指的是网页，一个网页就是一个文档对象：对象指将网页中的每一个节点都转换为对象，（所见都是对象嗷）转换完...原创 2020-03-13 13:38:01 · 398 阅读 · 0 评论 -
JavaScript RegExp 对象 正则表达式
文章目录创建正则表达式：语法：量词方法与string方法联动正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。创建正则表达式：var reg = new RegExp ("正则","匹配模式");var reg = /正则表达式/匹配模式语法：匹配模式： 设置匹配模式时，可以都不设置，也可以设置1个，也可以...原创 2020-03-13 00:09:52 · 508 阅读 · 0 评论 -
JavaScript 保留两位小数 | 如何精确四舍五入
文章目录保留两位小数向下取整向上取整四舍五入方法一方法二为什么这么写才会生效？先说为什么不能只用.toFixed()Math.round方法重定义toFixed()保留两位小数把num修改为你要保留两位小数的变量即可。 想找方法的看完这个大标题即可，想知道原因的可以继续看大标题2。向下取整Math.floor(num* 100) / 100.num = num.toFixed(2);...原创 2020-03-12 23:37:13 · 17682 阅读 · 1 评论 -
JavaScript对象
文章目录ArrayRegExp 对象 正则表达式语法：方法与string方法联动包装类StringNumberBooleanMathDateArrayhttps://www.runoob.com/jsref/jsref-obj-array.htmlRegExp 对象 正则表达式正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容...原创 2020-03-12 23:05:16 · 415 阅读 · 0 评论 -
JavaScript 基本数据类型 | 类型转换 | 运算符
JavaScript负责页面中的的行为。它是一门运行在浏览器端的脚本语言。本文主要涉及JavaScript 基本数据类型 | 类型转换 | 运算符原创 2020-03-10 21:46:39 · 565 阅读 · 0 评论 -
vue cli2和cli3创建项目
我开始学vue了！我又要写傻瓜教程了。现在就是怎么用vue cli创建我的第一个项目。????前提是你已经下载安装配置好了nodejs，如果没有点这个：Node.js安装配置你已经会用npm了，如果不会看这个：npm入门教程然后打开你的cmd，或者其他支持cmd的命令行工具都可以。我就用cmd了。进入你要创建项目的文件夹输入：vue init webpack 项目名输入后回车，一下没反...原创 2020-03-18 20:58:47 · 702 阅读 · 0 评论 -
JSON
JSON 指的是 JavaScript 对象表示法（J 指avaS 指cript O 指bject N 指otation）JSON 是轻量级的文本数据交换格式JSON 独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言（例如PHP，JSP，.NET）。JSON 具有自我描述性，更易理解JSON 使用 Javascript语法来描述数据对象，文本格式在语法上与创建 Ja...原创 2020-03-15 14:01:20 · 594 阅读 · 0 评论 -
前端常见HTML面试题
一个网页最基本的框架要包含这几样东西：<!DOCTYPE html><html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html><!DOCTYPE>...原创 2020-03-01 13:00:04 · 557 阅读 · 0 评论