大狗派克-CSDN博客

原创 JS面试题—原型和原型链

一、题目如何准确判断一个变量是数组类型写一个原型链继承的例子描述new一个对象的过程二、知识点1.构造函数 function Foo(name, age){ this.name = name this.age = age this.class = 'class-1' // return this //默认有这一行

2017-08-08 17:19:35 8528

原创 JS面试题—变量类型和计算

JS面试题，是针对前端工程师面试时的一些知识点梳理，整篇会围绕题目、知识点、解答三个过程进行学习。本人也属于此次总结的学生，希望借此机会重新温习巩固基础知识。积硅步至千里，学习和应用就像搭积木一般，只有基础建好才能将积木搭得越高。变量类型和计算一、题目JS中使用typeof能得到那些类型何时使用=== 何时使用==JS中有哪些内置函数JS变量按存储区分为哪些类型，并描述其特点如何理解

2017-08-07 15:55:36 1966

原创 MongoDB 启动文件设置

安装MongoDB按照步骤安装，选择自定义安装即可（步骤简单，不清楚可以直接百度）启动前准备启动mongodb服务打开cmd命令行工具，进入mongodb的bin目录输入 mongod –dbpath=D:\MongoDB\data –logpath=D:\MongoDB\logs –logappend 启动mongodb客户端新开一个cmd，进入mongodb的bin目录

2016-08-02 12:51:32 902

转载以rem为单位移动端页面开发

头部需要添加meta标签<meta name="viewport" content="width=device-width, initial-scale= 1, maximum-scale=1">JS设置HTML的font-size(function(doc, win) { var docEl = doc.documentElement, resize

2016-06-23 15:46:36 925

转载 java和JS代码相互调用

挺帅的移动开发专栏 http://blog.csdn.net/wangtingshuai/article/details/8631835 在android的开发过程中，有很多时候需要用到本地java代码和javascript进行交互。android对交互进行了很好的封装，在开发中我们可以很简单的用java代码调用webview中的js，也可以用webview中的js

2016-04-25 20:43:01 9211

原创 CSS3特效之转化（transform）和过渡（transition）

在对动画深入之前，我们需要先了解它的一些特性，CSS3的转化（transform）和过渡（transition）。有人可能会有疑问，CSS3动画不是只有animation一个属性吗？怎么又和转化（transform）和过渡（transition）扯上关系了，其实并非如此，转化（transform）属性让动画的变换多元化，而过渡（transition）属性是动画中的一种表现形式，也可以说成是动画一个版

2016-04-17 20:31:53 16117

原创浏览器对HTML5特性检测工具Modernizr

最近在做公司移动端运营的项目，需求中多处地方都会涉及动画。相信很多前端开发都会有这种感触，对CSS3中的动画属性很熟悉，但是由于对动画运动过程的理解不深入，经常只能望而止步。CSS3中动画这在Web页面中具有点睛之笔，让人眼前一亮，这段时间我会抽空来整理关于动画这块的知识点，希望能在总结的同时分享给有需要的朋友们，如果有什么好的建议和想法欢迎相互交流学习。无论是动画还是别的CSS3的新特性在移动端都

2016-04-14 21:32:19 7953

原创 HTML与CSS布局技巧总结

很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。单列布局<div class="parent"> <div class="child"></div></div>水平

2016-04-11 00:29:02 31324 3

原创 background-position和雪碧图(CSS Sprites)用法

background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，这次就总结下它的用法。还是那句话，工欲善其事必先利其器，只

2016-04-04 22:39:03 51934 5

原创浮动布局的方法（总结）

HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例）微博排版先上图片：盒子中包含左右两个子盒子（用黑边框将其分开），就以这种左右两栏为布局的模型，来总结浮动布局的方法。浮动布局HTML排版 <div class="container">

2016-04-01 11:48:03 12619 3

原创浮动float和清楚浮动clearfix

浮动，在HTML排版常常被使用的一个CSS属性，很多网页设计都会用到浮动，但并不是说浮动是网页排版的必需品。由于浮动具有破坏性，很多时候采用浮动反而会造成适得其反的效果。在张大神的CSS三无准则中就有一条准则是“无浮动”，提倡整个网页排版最好不需要用到浮动元素。每个人并非张大神，对于网页的排版设计有自己的想法和方式，需不需要用到浮动都取决自己，不需要太过刻意去追求完全无浮动的布局。 float的

2016-03-31 23:38:41 2641 1

原创相邻兄弟选择器（+）

今天在做导航栏的时候，需求里面需要实现一个小的动画效果，需求：导航栏中，鼠标移入每个链接，链接字体颜色发生改变，同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故，动画使用JQuery的animation函数来实现的。当完成导航栏的制作后，我突发奇想如果不需要用到任何JS是否可以实现该动画。先看下测试中导航栏的代码 HTML<div class="nav"> <u

2016-03-31 17:12:26 7727

原创前端工作总结

今天我的导师突然要求我写下这进一年来的工作总结，作为一名毕业不到一年的前端，写总结让我觉得有些头疼，文采这东西不是与生俱来的，而是需要不断的磨练，想想自己毕业后还真的从来没有写过总结，面对这项巨大的任务，也只能硬着头皮往上顶。写完后我的导师评价说文采写的还是可以的，内心一阵窃喜。既然写了那就把把它记录起来，说不定哪天回头看这份总结时会有另一番滋味。以下就是总结的内容工作总结从

2016-03-30 18:23:40 18196

原创 CSS垂直居中的几种方法

单行内容居中单行文字居中，只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是一行测试文字</p> </div> div.box{width: 200px;height: 100px;background-color: #999;margin: 20px;} .box p{line-height:

2016-03-30 17:59:38 798

原创五种js实现数组去重的方法

第一种删除后面重复元素 function removeRepeat1(arr){ var a1=((new Date).getTime()) for(var i=0;i<arr.length;i++) for(var j=i+1;j<arr.length;j++) if(arr[i]===arr[j])

2016-03-26 16:34:40 12884 2

原创 js删除数组里的某个元素

删除数组中的某个元素，首先需要确定需要删除元素的索引值。 var arr=[1,5,6,12,453,324]; function indexOf(val){ for(var i = 0; i < arr.length; i++){ if(arr[i] == val){return i;} } return -1;

2016-03-26 14:41:40 18741

原创针对IE的条件注释

<p class="accent">   <!--[if IE 7]> 根据注释条件，版本是 IE 7<br /> <!

2016-03-25 17:51:38 723

原创前置递增和后置递增的区别

递增和递减操作符前置递增操作符给一个数值加1 时，要把两个加号（++）放在这个数值变量前面 var age = 29; ++age;后置型递增和递减操作符的语法不变（仍然分别是++和–），只不过要放在变量的后面而不是前面。 var age = 29; age++;执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。（在计算机科学领域，这种情况通常被称作副效

2016-03-24 10:18:36 10665 2

原创 JavaScript数据类型

JavaScript中有5中简单数据类型（也称基本数据类型）：Undefined、Null、Boolean、Number和String，一种复杂数据类型：Object，JavaScript中所有值最终都属于上述6中数据类型之一。 typeof操作符：检测给定变量的数据类型

2016-03-23 21:58:38 532

转载如何设计自适应网页

现在的网站不仅需要兼容各种浏览器还需要能自适应不同终端，今天总结下常用来设计自适应网页设计的步骤。网页自适应设备<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（

2016-03-20 22:49:48 791

原创 JSON数据格式

前言作为一个前端需要掌握一种数据格式：json数据格式。在和服务器交互时，服务器会返回一组json数据，前端需要处理这组数据，并选择性地将所需数据呈现在客户端。在json还没诞生前，互联网上传输结构化数据的方式是交给XML来完成的，那时候不少人认为XML过于繁琐、冗长，希望能有另一种数据格式可以替代XML。什么是JSON一句话：JSON就是（JavaScript Object Notati

2016-03-20 19:18:19 9441

原创项目问题反思——CSS优先级

前言对于前端而言，了解css样式的优先级，对开发或处理bug有着事半功倍的效果，今天在做项目的时候，突然碰到一个优先级的小问题，刚开始不知道所因，后来才发现这个问题是由优先级造成的。先描述下问题，鼠标悬停在父容器时，子容器显示，移开消失。看到这个问题，可能有些人要喷了，这和优先级有毛线关系，看起来的确没关系，其实还是存在一定关系的。假如你在书写子容器样式时，采用的是内联式写法，那么这个悬停是否还有

2016-03-15 01:11:46 611

原创如何在移动端使用WebP图片格式

前言在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以MB为单位，为了加快网页呈现的速度，我们必须使用最适合图片质量，这里所说的合适指图片的清晰度和大小达到合格的要求。前端常常会碰到这种情况，一个网页都是图片，需要你压缩图片适合的分辨率，分辨率低了容易失真用户体验不好，高了图片质量太大导致加载慢，所以经常会找一个合适的临界点来选择图片的分辨率。我们选择了这个分辨率来作为合适临界

2016-03-12 01:50:09 15853

原创 CSS3实现手机1px边框，细如发丝

前言我们使用手机App的WebView和浏览器查看网页时，经常能看见那细如发丝的“0.5px”的边框、线条，让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢，web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准，如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法，如果小弟理解的有什么错误，欢迎各位大

2016-03-10 22:22:19 9937 1

转载雅虎十四条：网站前端网页优化的14条原则

内容再丰富的网站，如果慢到无法访问也是毫无意义的；SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭；UE设计的再人性化的网站，如果用户连看都看不到也是空谈。所以，网页的效率优化绝对是最值得关注的方面，那么，我们该如何才能提高一个网页的效率呢？对此，我今天就在马海祥博客上为大家分享一下雅虎网页优化的14条原则，也被称为：雅虎十四条，而这些原则也是我们作为一名SEO人员所必须了解的。 1、减少HTTP

2016-03-09 14:37:28 961

原创检测手机类型、密度比和物理宽高

前言随着智能手机的兴起，各大厂商手机产品层出不穷，产品可谓是五花八门，手机的尺寸和密度没有一个固定标准，作为一个前端面对各式各样不同尺寸的手机常常让人觉得痛疼。近几年前端被吹捧的热火朝天，在产品眼里前端无所不能，只有想不到没有做不到。前端需要适配各种终端机承受巨大压力，这次小弟自我总结来说说移动端机型的检测，小弟初生牛犊，如有说的不对的地方欢迎各位大咖指正。获取浏览器可视宽高var dWi

2016-03-08 16:06:19 1522

原创 javaScript引入方式

前言：毕业到现在从事前端开发已经半年左右，做过移动端和PC端大小不同项目，发现自己所学习的技能都只是为了更好的完成项目，从来没有花时间好好整理下所掌握的知识。农历三月百花盛开，群芳争艳；新历三月是个跳槽季，各路神仙汇集一堂，大展神通。原本只打算安安稳稳、踏踏实实工作的我，却受朋友的蛊惑，邀请我去他们公司试试，听朋友介绍他们公司福利好，妹子靓，氛围棒，环境优……我那颗老僧入定，坚若磐石的心动摇了。

2016-03-03 00:29:43 6304

转载 JS创建函数：函数声明和函数表达式

JavaScript 中需要创建函数的话，有两种方法：函数声明、函数表达式，各自写法如下：// 方法一：函数声明 function foo() {}// 方法二：函数表达式 var foo = function () {};另外还有一种自执行函数表达式，主要用于创建一个新的作用域，在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆，大多是以匿名函数方式存在，且立即

2016-01-26 10:13:54 840

原创 JS实现图片延迟加载（lazyload改编）

为什么改写JS版：移动端做运营活动到时候经常需要用到大量的图片，图片过多导致加载过慢，用户体验差，插件lazyload.js需要依赖JQuery,单页面如果需要采用这个插件需要加载JQuery，JQuery.min也有80多kb，为了一个功能需要引入一个80多kb的文件，得不偿失。场景：网页使用大量图片的时候，由于图片资源过大会导致加载时间大幅度延长

2016-01-12 15:18:28 3632

原创 JS添加事件和解绑事件：addEventListener()与removeEventListener()

作用： addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。它们都接受3个参数：事件名、事件处理的函数和布尔值。布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：环境：移动端，界面禁止触摸事件要在bo

2015-12-03 14:24:10 38611

转载优化HTML代码

CSS优化尽量避免写在HTML标签中写Style属性。· 避免CSS表达式CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式· 移除空的CSS规则空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则· 正确使用Display的属性Display属性会影响页面的渲染，因此请合理使用a) display:inline后不应

2015-11-03 17:51:16 1370 1

原创移动端overflow:hidden出现不兼容

禁止页面滚动：body{style="overflow：hidden;"} 可以实现大部分超出页面禁止滚动，可并非兼容所有移动手机。document.body.addEventListener('touchmove',function(event){ event.preventDefault();},false);PC端禁止键盘上下键var move=fu

2015-11-03 11:33:29 5901

转载移动端适配不同设备(缩放效果)

// 非360基线显示适配if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { var phoneScale = parseInt(window.screen.width) / 360;

2015-11-03 11:14:32 1624

原创 JavaScript常用事件

window.onload = function () { var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; form.onreset= function(){ alert('lee')

2015-07-29 16:30:27 480

转载学习使用：before和：after伪元素

特别声明：此篇文章由胡均根据Louis Lazaris英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2011/07/1

2015-07-27 23:05:26 2224

原创常见的块状元素与内联元素

块状元素内联元素address – 地址blockquote – 块引用center – 举中对齐块dir – 目录列表div – 常用块级容易，也是CSS layout的主要标签dl – 定义列表fieldset – form控制组form – 交互表单h1 – 大标题h2 – 副标题h3 – 3级标题h4 –

2015-07-26 23:31:01 834

原创 html5 列表居中

style> .header{ width: 800px; background: pink; border: 1px solid black; margin: auto; } .header ul{ display: table;

2015-07-26 21:32:48 6667

bingkingboy的博客