- 博客(28)
- 收藏
- 关注
RSS订阅原创 MongoDB安装与基础语法
进入官网：https://www.mongodb.com下载安装（傻瓜式安装）配置环境变量（bin）在终端输入 mogond如果看到 waiting for connections on port 27017 这句话，说明安装成功（一般在最后几行）常用命令： 终端输入：mongo 之后便可以执行相应的命令 定义变量 var a=5 输出变量 ...
2018-12-26 18:58:46
268
原创 瀑布流布局
瀑布流布局的特点：宽度固定，高度不固定如下：实现思路：每一行添加在高度最低的图片下面绝对定位left：图片宽度*索引top：最小高度创建一个数组，存放图片高度用当前窗口的大小除以每个区域的大小再取整，就可以计算出当前窗口大小下应该展示的图片张数（ cols = parseInt($(window).width()/boxWidth) boxWidth为每一个图片的...
2018-12-20 19:21:49
346
原创 css filter属性改变图片颜色
之前在做相益项目的时候，有一个点击改变图片颜色的功能，一开始我用两张图片来实现的，后来发现可以用css的过滤器来实现，这样还可以优化性能。具体实现如下把图片变为灰色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit
2018-12-15 11:44:55
2656
原创 BFC原理及应用
原理：BFC（Block Formatting Contexts）块级格式化上下文是一个独立的渲染区域，并且有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用内部元素的布局方式不会影响到外部元素的布局，反之，同理触发BFC的条件：根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、tab...
2018-12-15 10:57:39
306
转载 Web前端性能优化问题
Web前端性能优化的9大问题1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器...
2018-12-11 20:59:47
375
原创 call apply bind作用和区别
call和apply都可以用来改变函数里的this指向，区别是call(obj,1,2,3,)从第二个参数开始有多个参数，用来代表函数的实参apply(obj,[1,2,3])第二个参数是一个数组，数组中的每一个元素对应一个实参bind(obj,1,2,3,)();apply,call是直接执行函数调用，bind是绑定，执行需要再次调用．apply和call的区别是apply接受数组作为...
2018-12-02 12:34:55
543
2
转载 webpack原理及使用
前端打包工具有webpack、grunt、gulp等，这里主要介绍webpack.一、webpack的基本能力：处理依赖、模块化、打包 1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块 2、合并代码：把各个分散的模块集中打包成大...
2018-12-02 12:03:03
1509
转载 CDN原理
CDN的实现原理 在描述CDN的实现原理，让我们先看传统的未加缓存服务的访问过程，以便了解CDN缓存访问方式与未加缓存访问方式的差别：用户提交域名→浏览器对域名进行解释→得到目的主机的IP地址→根据IP地址访问发出请求→得到请求数据并回复由上可见，用户访问未使用CDN缓存网站的过程为:1)、用户向浏览器提供要访问的域名；2)、浏览器调用域名解析...
2018-12-01 14:55:39
337
转载 浏览器渲染原理及解剖浏览器内部工作原理
1、简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么工作的： 1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 3. 浏览器...
2018-11-27 13:44:22
417
原创 css3 新特性=>伪类与伪元素的主要区别
伪类E:link E:visited E:hoverE:active E:focus E:lang(fr) E:not(s) E:root E:first-childE:last-child E:only-child E:nth-child(n)E:nth-la...
2018-11-25 20:53:08
311
原创 前端行为层，表示层，结构层的分离
首先解释一下这三层分别代表什么行为层：即JavaScript表示层：即css结构层：即HTML结构行为层与表示层的的分离的意思是 不在用 js 来改变css 样式，但可以通过 js 给元素添加class类名 来改变样式；然后在css里给这个类写具体的样式...
2018-11-25 19:01:55
1884
原创 web站点安全问题
一、跨站脚本攻击（XSS）跨站脚本攻击的英文全称是Cross Site Script，为了和样式表区分，缩写为XSS。发生的原因是网站将用户输入的内容输出到页面上，在这个过程中可能有恶意代码被浏览器执行。跨站脚本攻击可以分为两种：1). 反射型XSS它是通过诱使用户打开一个恶意链接，服务端将链接中参数的恶意代码渲染到页面中，再传递给用户由浏览器执行，从而达到攻击的目的。如下面的链接：ht...
2018-11-25 14:48:58
288
1
原创 ajax与fetch
Ajax的本质是使用XMLHttpRequest对象来请求数据ajax的工作过程如下：fetch 是全局量 window 的一个方法，它的主要特点有：第一个参数是URL:第二个是可选参数，可以控制不同配置的 init 对象使用了 JavaScript Promises 来处理结果/回调:// 链式处理,将异步变为类似单线程的写法:高级用法. fetch('/some/url'...
2018-11-25 09:18:25
259
原创 浮动定位常见问题
给元素设置position：absolute后，使用margin：0 auto居中失效；因为margin:0 auto;是根据上一级元素来居中的；解决:left: 50%;transform：translate（-50%）；实现居中。z-index属性必须配合定位来使用，否则无效float:left;-float脱离文档流-其他元素占用被float元素的位置-其他元素的文本仍然...
2018-11-24 20:26:49
332
原创 vue基础
使用步骤引包 具备Vue对象启动Vue， 通过Vue对象 去new Vue(options)配置options的选项对象el:‘目的地’, template:‘模板’， data:function(){return {要使用的key：数据}}页面中存在该目的地，目的地字符串描述同jQuery一样什么是指令在Vue中提供了一些对于页面+数据的更为方便的输出，这些操作就是指...
2018-11-24 20:08:00
159
原创 vue下的定时器相关知识
问题：在mouted下的定时器无法与methods下的clear Interval（）方法绑定解决：用data绑定一个变量用this获取data里的变量，将定时器赋给这个变量，使用方法如下： this.timer = setInterval(function(){ let temp=oImgBox.offsetLeft; ...
2018-11-19 10:56:32
281
转载 Vue基础
Vue.js起手式+Vue小作品实战 本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用；在最后，我参考SegmentFault上的一篇技博，对Vue进行初入的...
2018-10-31 21:07:03
248
原创 cookie的设置/获取和修改
自己封装的设置cookie，获取cookie，修改cookie的方法function setCookie(key,value,day){ var str = key +"="+value+";" ; if(day){ var date = new Date(); date.setDate( date.getDate()+day); ...
2018-10-22 21:40:13
1845
原创 css3实现奥运五环
五环可以利用五个统计的div来实现，要实现五环的嵌套关系，需要分别给这五个div加伪元素。 这里主要用到了两个css3属性： 1. z-index调各环的层级关系 2. transparent设置透明度具体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
2018-07-25 20:13:48
2006
原创 jQuery模拟在线选座
看了很多关于在线选座的例子，很多都引入了选座插件，而我将要介绍的是不用插件实现的选座功能首先来看一下效果图 分析结构 可以把html部分分为四大部分 。后两部分采用固定定位的方式，将其固定在底部jQuery部分写了两个方法，记录用户的操作 function removeArr(key) { for(var i=0;i<htmArr.leng...
2018-07-24 20:34:55
1430
2
转载 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
原 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例 <div class="article-info-box"> <div class="article-bar-top d-flex"> <span class="c-gray"&g..
2018-07-24 18:24:57
247
原创 jQuery 无缝滚动轮播图
jQuery实现轮播图还是比较容易的，代码量相对较少 HTML代码： <div class="slider"> <div> <div class="slider-panner sp-1 active"> <div> <img
2018-07-22 17:19:27
463
转载 css3-弹性盒模型（flex）
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。.box{...
2018-07-16 09:03:11
232
转载 css-元素居中
CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题 元素的居中问题是每个初学者碰到的第一个大问题，在此我总结了下各种块级 行级 水平 垂直 的居中方法，并尽量给出代码实例。首先请先明白块级元素和行级元素的区别块级元素块级元素水平居中 1：margin: 0...
2018-07-14 09:45:31
249
转载 css中设置元素居中
CSS设置行内元素的水平居中（转载至http://www.exp99.com/htmlcss/htmlcss_100.html）div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中div{heig...
2018-07-03 18:34:11
775
原创 JavaScript中的this指向问题
谁在调用，this指向谁事件中 this指向当前对象定时器中 this指向window函数中 this指向window对象中 this指向当前对象<script> var a="hello"; function foo() { var a="world"; console.l...
2018-06-27 18:10:58
154
原创 轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0;
2018-06-26 15:51:27
157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人