前端基础
关注
分享
扫一扫
文章平均质量分 77
ganlubaba666
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
浏览器标准模式和怪异模式之间的区别是什么？
由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks mode(怪异模式或兼容模式)；当W3C标准出台之后，不同浏览器对页面的渲染有了统一的标准,即Strict mode（标准模式或严格模式）；这就是两者之间的区别...转载 2018-11-13 15:24:54 · 233 阅读 · 0 评论 -
延长作用域链之with语句
在探究延长作用域的问题之前，首先我们要洞悉一个概念 执行环境：定义了变量或函数有权访问的其他数据，每一个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。 延长作用域有两个方法 try-catch语句的catch块 with语句 这两个语句都会在作用域链的前端添加一个变量对象 今天我们重点探究with语句 with语句定义：with语句的作用是将代码的作用域...原创 2018-12-14 19:10:00 · 411 阅读 · 0 评论 -
浅谈弹性布局
今天很悲伤 QAQ，我写了两个星期的项目孵化失败了，原因也很愚蠢，是因为我把css尺寸写死了，没有用到弹性布局。所以我特地学习了弹性布局的时候，在这里通过一些摘抄记录一下难点和疑惑，以供以后参阅。 什么是弹性布局？ 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 ...原创 2018-12-10 23:11:41 · 2007 阅读 · 0 评论 -
关于调整input里面的输入光标大小
以前在项目里碰到过一个问题 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中， 在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高， chrome下光标跟input的height一样高， 而IE下光标跟文字的大小一致。 一直没弄明白为什么这样子，今天听罗浮宫...转载 2019-02-07 14:43:35 · 1623 阅读 · 0 评论 -
position的属性(sticky属性)
position的属性对position所有的属性的介绍sticky属性定义demosticky生效以及失效fixed属性定义demoabsolute属性定义relative属性定义demo 对position所有的属性的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position sticky属性 定义 粘性定位元素（stickily ...原创 2019-03-24 21:04:48 · 3285 阅读 · 0 评论 -
用a标签结合有序列表实现select
大家在使用select的时候有没有发现一个问题：固定样式很难隐藏掉，只能通过设置宽度，然后再设置overflow:hidden来隐藏固定的下拉标签 这里是一个用a标签结合有序列表来实现select <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...原创 2019-03-30 22:59:25 · 417 阅读 · 0 评论 -
数组扁平化
最近学习es6，发现了一个东西很有意思 Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。 当没有参数时，flat默认只会“拉平”一层 [1, 2, [3, 4]].flat() // [1, 2, 3, 4] 当参数存在时，flat会拉平指定的层数 [12,[2,[3]]].flat(1) (3) [12,...原创 2019-04-18 21:29:38 · 174 阅读 · 0 评论 -
对session和cookie的整理以及自己的理解
cookie 1、什么是cookie 是指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。 Cookie是由服务端生成的，发送给客户端（通常是浏览器）的。Cookie总是保存在客户端中。 2、为什么要使用cookie？ 这是因为http是无状态的，两次请求间，服务器不知道用户上一次执行了什么操作，这严重的阻碍了交互式web应用程序的实现。服务器可以通过...原创 2019-05-03 17:32:49 · 396 阅读 · 0 评论 -
原型链的总结
原型链是js中的重中之重。因为我感觉红宝石书上的记载不够详尽易懂，因此我自己做了一下总结，方便以后复习时使用。 这里有几个要注意的点： 只有构造函数才有prototype属性 构造函数的原型是原型对象，因此函数的原型具有__proto__属性和construct属性 构造函数的实例是对象，对象具有__proto__属性，__proto__属性指向构造函数的原型 除了Function.proto...原创 2019-04-25 11:26:25 · 186 阅读 · 0 评论 -
利用jsonp实现跨域操作并做出超时处理
什么是jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，是一种非官方跨域数据交互协议，可用于解决主流浏览器的跨域数据访问的问题。用 JSONP 抓到的资料并不是 JSON，而是任意的填充JSON数据的JavaScript。 为什么要使用jsonp 1.Ajax直接请求普通文件存在跨域无权限访问的问题 2.web页面上调用js文件时不受是否跨域的影响，凡是有s...原创 2019-05-05 21:22:09 · 3057 阅读 · 0 评论 -
上传图片以及使用canvas压缩图片
最近在写一个头像上传的功能 用input[‘file’]上传文件并设置类型为图片 <input type="file" id="personFile" accept='image/*' @change="upload"> 在上传头像的时候，首先要把type设置为file，表示这个input是用来实现上传图片功能的，再把accept设置为’image/*’，这样就只能上传图片 <...原创 2019-08-05 11:43:55 · 412 阅读 · 0 评论 -
联系promise帮你理解async
文章目录前言主要内容**await**只为**thenable**对象停留1. 非thenable对象2. promise对象3. **thenable**对象async对await的错误决不轻饶逃避async的惩罚 前言 最近学习了async，并且用async将一个比较复杂的promise请求进行了拆分。 在这里总结一下我对async的了解 首先这是两句重要的话 async是generator...原创 2019-08-06 22:07:41 · 159 阅读 · 0 评论 -
parseInt、parseFloat和Number的区别
Number Number可以将Boolean值(true(1),false(0))，数字值，null(0)，undefined(NaN)，字符串转换为数字。在这里我们讨论Number和parseInt、parseFloat的区别，其实在讨论的是在将字符串转换为数字时这三种方法的异同。 字符串中只包含数字(可以包含正负号)，两者转换方式相同 字符串前有空格，两者都忽略字符串前面的空格，两者转换...原创 2018-12-13 21:55:57 · 3507 阅读 · 0 评论 -
谷歌浏览器关闭跨域（跨域一直是前后端交互头疼问题，个人开发比较常用）
版本号49之前的跨域设置 其实直接在打开命令上加–disable-web-security就可以了。 具体做法为： 1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。 2.在属性页面中的目标输入框里加上 --disable-web-security 新版本49之后谷歌关闭跨域： 具体做法为： 1.找到谷歌安装目录，例如：C:\Program Files (x...原创 2018-11-25 17:17:39 · 728 阅读 · 0 评论 -
用图灵机器人2.0实现聊天机器人
聊天机器人是我最近写的一个项目，本来以为这个项目的难点是请求ajax，但是真正实现起来，发现，聊天机器人这样的一个小demo对前端的基础的要求还是挺大的，下面我将从HTML、CSS、JS三个方面来阐述我在做这个项目的过程中遇到的一些问题。 AJAX 说来还挺痛苦的，写机器人的第一天就让我碰到了最让我头疼的跨域问题。 解决方案，我发在了 ...原创 2018-11-25 17:14:22 · 3221 阅读 · 3 评论 -
字体图标的使用
不得不说字体图标使用起来真的很方便，能实现图片的效果，但实施起来却很方便，因为你可以把字体图标当作文字一样去随意修改，比如修改颜色、修改大小等，都十分易于去实现。 接下来就说说字体图标如何使用： 1、打开网站 icomoon.io （1）点击右上角 Icomoon App 1.PNG (2)选择要使用的图标，点击右下角Generate Font 2.PNG (3)...转载 2018-11-13 20:15:52 · 165 阅读 · 0 评论 -
对于input标签兼容问题的处理
##placeholder placeholder属性想必大家都不陌生，在表单的制作中经常会使用这个属性，在写西部经济研究院页面时，我遇到了placeholder的兼容问题，在此我整理一下解决思路。 placeholder属性在只在IE9以上的浏览器兼容 在Firefox/Chrome/Safari浏览器下点击placeholder，字符不会消失 在IE 10+里鼠标点击时（获取焦点）place...原创 2018-11-16 23:17:50 · 1109 阅读 · 0 评论 -
CSS3常用选择器一览表
转载 2018-11-24 11:42:35 · 249 阅读 · 0 评论 -
提交表单
1、 2、通过form表单的action传值 一般情况下数值在传给后台之前需要校验，可以在form中的onsubmit调用js方法进行校验，当js方法返回值为true时，触发action，当js方法返回值为false时，action不触发。这样处理的好处在于当用户输入不正确时，不会刷新页面，表单仍然会保留用户之前的输入 function query(){ var inputs = docum...原创 2018-11-20 15:49:59 · 1995 阅读 · 0 评论 -
CSS浏览器前缀兼容写法
前言 Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀...转载 2018-11-17 20:56:55 · 252 阅读 · 0 评论 -
vue复习笔记
vue的一些重点难点computedcomputed中的值不能直接修改，要用settercomputed计算属性传参，用闭包computed计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。v-for遍历数组遍历对象数组变动对象变更v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：...原创 2019-08-15 16:28:29 · 530 阅读 · 0 评论