前端
关注
分享
扫一扫
呦不错哦
安于此，还算好
展开
-
前端错误监控
前端错误分类： 即时运行错误：代码错误 资源加载错误错误的捕获方式： 即时运行错误的捕获方式： try.catch window.onerror 资源加载错误： object.onerror 这个错误不会冒泡，需要以捕获的模式监听 performance.getEntries 获取已加载资源的加载市场，可以间接的得到没有加载资...原创 2018-04-17 23:03:13 · 427 阅读 · 0 评论 -
js获取元素的宽高的方法
HTML代码：<section class="sec" style="width: 400px;"><style type="text/css"> .sec { background-color: red; overflow: hidden; /*width: 500px;*/ } .child { background-color: yellow...原创 2018-04-14 01:24:36 · 3060 阅读 · 0 评论 -
css BFC(块级格式化上下文)
BFC的概念：块级格式化上下文BFC的原理：垂直方向的外边距会发生重叠；BFC的区域不会与浮动元素的区域重叠（常用来清除浮动）；BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素；计算BFC高度时，浮动元素也会参与计算如何创建BFC：float值不为none；position的值不为static和relative；display的值为inline-bloc...原创 2018-04-14 02:19:59 · 219 阅读 · 0 评论 -
单行和多行文本溢出显示省略号
给块级元素添加CSS样式实现单行文本溢出显示省略号：{ width: 200px; //必须固定容器宽度 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 给块级元素添加CSS样式实现单行文本溢出显示省略号： { display: -webkit-bo...原创 2018-05-02 19:37:58 · 264 阅读 · 0 评论 -
向父元素内添加其中的子元素会覆盖当前子元素及不覆盖原本子元素的解决方法
首先显示初始状态：<body> <div class="parent"> <div class="child">0</div> <div class="child">1</div> <div class="child"&a原创 2018-05-05 13:22:21 · 2217 阅读 · 0 评论 -
无缝滚动轮播图
即实现无缝滚动，又拥有普通轮播图的的功能。无缝滚动原理： 首先声明图片向左滑动的； 1.HTML，开始我们要在轮播图容器内第一张图片前添加我们需要显示图片的最后一张，同样在最后一张的后面添加我们需要显示图片的第一张； 2.CSS，刚开始我们需要显示第一张图片，所以这时就需要设置图片容器的起始位值的CSS样式{left：-544px} 3.JavaScript，我们实时监控图...原创 2018-05-06 10:38:25 · 661 阅读 · 1 评论 -
提升页面性能之重排(reflow)和重绘(repaint)
提出问题： JavaSctipt 操作改变元素样式的四种方法之一,element.style.cssText=”width:20px;height:20px;border:solid 1px red;”这样简写比一次次地element.style.width = 20 + 'px'...添加，会**避免页面的重构（refolw)，提升页面行性能**。首先我们要了解浏览器的渲染机制（也就是我们写的H...原创 2018-07-16 10:18:17 · 602 阅读 · 0 评论 -
前端开发中遇到的奇怪问题集锦--CSS
1.独有一个样式不能渲染到页面为什么单单这里的center样式不生效呢？//示例代码-----.bg { background: red;};.center { width: 1080px; margin: 0 auto;}.link { text-decoration: none; color: #999;}因为上一个样式后面...原创 2018-10-01 09:26:13 · 2044 阅读 · 0 评论 -
Fidder代理服务器的使用方法
A、下载安装；B、配置监控https请求：菜单->Tools->Options…->点击https选项卡->选中 "Decrypt HTTPS traffic"->点击 "OK";1.2.3.注意！应保证先打开代理服务器在打开网站才能监控到该网址；C、配置信息...原创 2018-09-25 20:55:49 · 2748 阅读 · 0 评论 -
webpack踩坑笔记（一）
1.css文件单独打包 extract-text-webpack-plugin 插件报错 You may need an appropriate loader to handle this file type.刚开始配置是这样的，看着毫无毛病，但是一直报错，始终找不到原因loaders: [ { test: /\.css$/, exclude...原创 2018-09-26 22:01:26 · 326 阅读 · 0 评论 -
前端项目从零开发之 webpack 配置（webpack 4.0 以下）
前提提要，这个配置只针对webapck 4.0以下的项目开发，并且开发中依赖的插件都只针对指定的版本，因为我在安装这些插件时时常会遇到不知名的 “not found moudle ……”报错，绝大多数情况下是因为各个插件之间版本依赖的关系产生的，所以先祭上我的package.json和项目目录"devDependencies": { "css-loader": "^1.0.0", ...原创 2018-10-03 22:51:29 · 498 阅读 · 0 评论 -
webpack全局配置jQuery
1. 全局变量引入，全局引入jQuery Plugin: webpack.ProvidePlugin 自动加载模块，不必到处import 或 require 引入模块。 webpack.config.js文件``` let webpack = require('webpack') plugins: [ ..., new...原创 2018-10-07 23:36:48 · 2278 阅读 · 0 评论 -
用最简单的代码同时实现自适应宽度和高度的布局效果
html代码：<header class="header"></header><aside class="aside"></aside><main class="main"></main>css代码：.header{ width: 100%; height: 60px; background-color...原创 2019-03-28 21:31:53 · 756 阅读 · 0 评论 -
Handlebars : Can't resolve 'fs'
正常情况下我们安装并配置好了handlebars模板引擎：npm install handlebars -Snpm install handlebars-loader -D---------------------------------rules: [ { test: /\.hbs$/, use: 'handlebars' }]然后就会报错:== Can’t res...原创 2019-04-09 19:48:18 · 1964 阅读 · 0 评论 -
jQuery
什么是jQueryjQuery是一个JavaScript函数库。jQuery有什么用处获取Dom元素修改元素样式操作Dom元素Html事件函数ajaxDom的遍历和操作JavaScript特效和动画Utilities事件函数jQuery的兼容性IE浏览器6、7、8兼容的最高版本是 jQuery 1.9.1。自从微软停止对windows 7的更新后，大部分的win...原创 2019-04-30 09:56:48 · 142 阅读 · 0 评论 -
根据首字母的排列顺序对一组数据进行排序
结果：原创 2018-03-29 16:16:08 · 815 阅读 · 0 评论 -
提升页面性能
1.资源压缩合并，减少http请求；2.非核心代码异步加载； 异步加载的方式： a.动态脚本加载； b.defer; c.async; defer:在HTML解析完成之后才会执行，并按照加载顺序执行； async:在加载完成之后立即执行，和加载顺序无关。3.利用浏览器缓存； 缓存的分为强缓存和协商缓存； 强缓存：...原创 2018-04-17 18:34:21 · 161 阅读 · 0 评论 -
浏览器的渲染过程
浏览器的渲染过程：浏览器将HTML解析成一个DOM Tree;将CSS解析成一个CSSOM(CSS Object Model)树;合成渲染树：将DOM 树和CSSOM 树合成成一个Rendering Tree渲染树;有了渲染树，浏览器已经知道了文档HTML中有哪些节点和各个节点的CSS样式及他们之间的从属关系，接下来就是Layout计算出各个节点在屏幕中的位置。最后就是绘制了。重排Reflow: ...原创 2018-04-17 15:18:32 · 147 阅读 · 0 评论 -
XAMPP设置MySql服务器用户名密码及远程访问权限
设置MySql服务器用户名密码路径：XAMPP/xamppfiles/phpmyadmin/config.inc.php，因为版本不同，也可能在目录：XAMPP/phpMyAdmin/config.inc.php$cfg['Servers'][$i]['auth_type'] = 'http';$cfg['Servers'][$i]['user'] = 'root';$cfg['Servers...原创 2017-12-11 23:24:30 · 8347 阅读 · 0 评论 -
MVC设计模式 (1)、html页面事件触发ajax()方法调用ajax.js发送请求至请求目标文件
XMLHttpRequest是AJAX的基础所有的现代浏览器都支持XMLHttpRequest对象（IE5、IE6使用ActiveXObject）XMLHttpRequest用于在后台与服务器交互数据，这意味着可以在不加载整个页面的情况下，对页面的某部分进行局部更新//在静态页面调用ajax方法： ajax({ type:'post',//ajax请求方式 url:'../原创 2017-12-11 23:21:16 · 1803 阅读 · 0 评论 -
解決CSS在不同浏览器下的默认样式不相同的兼容（CSS样式重置）
解決CSS在不同浏览器下的默认样式不相同的兼容CSS样式重置：点击打开链接转载 2017-12-30 22:57:30 · 484 阅读 · 0 评论 -
bootstrap IE9以下的浏览器兼容Html5新标签和Css3样式引入以下代码
原创 2018-01-03 21:41:20 · 410 阅读 · 0 评论 -
一行代码解决浏览器之间的兼容问题
强制浏览器采用最新的edge引擎解析，chrome采用最新版本<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">X-UA-Compatible 是在IE8添加的一个设置，对IE8以下的版本不适用。如果安装了GCF（google chrome Frame,谷歌浏览器内核），就用谷歌内核来渲染；如果未安装，就使用IE...原创 2018-01-06 17:41:52 · 7430 阅读 · 0 评论 -
微信公众号开发（1）连接服务器
以下是在MAC 环境下操作：连接阿里服务器：ssh -t root@59.110.***.*** -p 22上传图片scp -r /Applications/XAMPP/htdocs/weixin/ root@59.110.***.***:/opt/lampp/htdocs/cd /opt/cd lampp/./lampp restart原创 2017-12-18 08:50:11 · 555 阅读 · 0 评论 -
js Dom事件
Dom事件模型：就是指事件捕获和事件冒泡。事件流：就是当用户点击触发了事件是怎样传递到压面上的过程就是事件流，事件流分为捕获、目标阶段、冒泡三个阶段，当用户点击按钮就是捕获阶段，事件通过捕获到达目标元素的时候就是目标阶段，冒泡阶段就是从目标阶段上传到window对象。为什么没有Dom1级事件：因为Dom设计的时候没有设计到事件的部分，所以没有Dom1级事件。Ele.addEventListener...原创 2018-03-30 10:30:45 · 922 阅读 · 0 评论 -
HTTP协议
HTTP(HyperText Transfer Protocol)超文本传输协议，用于客户端和服务器端之间的通信。HTTP协议的特点：无状态：HTTP是一种不保存状态，即无状态(stateless)协议。HTTP协议自身不对请求和相应之间的状态进行保存。无连接：每进行一次HTTP通信就要断开一次TCP连接。简单快速：HTTP协议使用URI(Uniform Resource Identifier,统...原创 2018-04-15 15:27:20 · 174 阅读 · 0 评论 -
slice、substring、substr、concat这几个不会破坏原始字符串的操作方法
字符串操作方法中的concat、slice、substring、substr都不会破坏原数组，会自动返回操作后新的数组。concat用于连接两个或多个字符串字符串,支持链式操作，但一般情况下使用加号运算符更简便快捷。slice、substring、substr都支持一个或两个参数，第一个参数是截取子字符串开始位置的索引，如果只包含一个参数表示从此位置开始（包含此位置）截取至字符串结尾；slice、...原创 2018-03-28 22:08:50 · 6220 阅读 · 0 评论 -
DOM节点关系和DOM操作方法
DOM节点分为标签节点（元素节点）、注释节点、文本节点、属性节点及其他。节点之间的关系就是DOM节点树，可以想象成一个族谱。节点之间的关系：children和childNodes的作用都是返回元素的子节点，但是不同的是： childNodes:返会所有的子节点，包含文本节点和注释节点 children:只会返回元素节点parentNode：父节点firstChild:第一个子元素节点l...原创 2018-03-28 23:49:11 · 342 阅读 · 0 评论 -
DOCTYPE
什么是DOCTYPE: 要了解什么是DOCTYPE前首先要知道什么是DTD： DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或者（X）HTML的文档类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE的作用： DOCTYPE是用来声明文档类型和DTD规范的，一个...原创 2018-04-17 13:28:01 · 248 阅读 · 0 评论 -
使用IE浏览器条件注释判断IE浏览器版本
ie浏览器比较运算符lt 小于，gt 大于，lte 小于等于，gte 大于等于<!--[if lte IE 9]><body><div><p>您的浏览器版本太过老旧，请<a href="http://www.baidu.com">点击</a>升级浏览器版本</p></div></body&...原创 2019-06-29 08:40:16 · 295 阅读 · 0 评论