ruirui_1996-CSDN博客

转载前端面试题（不定期更新）

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的前端还是一个年轻的行业，新的行业标准，框架，库都不断在更新和新增，正如赫门在2015JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的

2017-10-28 20:23:13 6713

原创【项目】jQuery的清单应用

目录1.知识点 2.前期布局 3.整体布局 4.细节完善1. 知识点实用技术点：定时提醒功能的实现最大限度的重用数据实现更加强大的自定义alert()position属性的特殊用法开发思路：清单应用的整体布局清单应用的细节完善清单应用的需求及逻辑梳理清单应用的架构方式清单应用的数据存储方式清单应用的数据组织方式模板的实现及应用清单应用定时功能的实现清单应用响铃提醒的

2018-01-02 16:07:20 445

转载 JavaScript从入门到精通

目录第一课初探JavaScript魅力-01 第一课初探JavaScript魅力-02 函数传参第一课初探JavaScript魅力-01 JavaScript是什么如今我们打开一个大型的网站，都会有很多JS效果的功能和应用。对于学过CSS+HTML的同学，即使是像淘宝那样的网站，用一两天时间也可以将布局写出来。但对于一个网页来说，除去CSS，HTML这样描述静态布局的元素外，还有诸如

2017-12-16 10:55:38 1468

原创前端基础知识总结1——基础知识

目录1.基础知识 1.1 变量类型 1.2 typeof运算符 1.3 变量计算——强制类型转换 1.4 面试题 2.原型、原型链 3.作用域、闭包 4.异步、单线程1.基础知识在客户端运行的js是不能操作用户电脑磁盘中的文件的，为了保护客户端的安全。 js中的本地存储：使用js1.1 变量类型1.2 typeof运算符1.3 变量计算——强制类型转换

2017-12-06 20:43:40 6361

原创本地存储

目录1.本地存储 2.ejs模板引擎 3.iscroll 4.webapp之使用less构建响应式布局 5.webapp之数据绑定和本地存储 6.webapp之实现比赛集锦区1.本地存储在客户端运行的js是不能操作用户电脑磁盘中的文件的，为了保护客户端的安排。 js中的本地存储：使用js向浏览器的某一个

2017-12-05 17:15:02 339

原创移动端事件及事件应用

目录1.移动端事件基础 2.移动端常用的事件库 3.移动端轮播图css样式和响应 4.移动端轮播图图片延迟加载1.移动端事件基础PC端常用事件事件名作用 click 当鼠标点击时触发 mouseover 当鼠标指针移动到元素上时触发 mouseout 当鼠标指针移出元素时触发 mouseenter 当鼠标指针移动到元素上时触发（不支持冒泡） mou

2017-11-30 11:15:39 3077

原创移动端基础及响应式布局

目录1.移动端概述和hybird模式 2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端：运行在移动设备上的产品产品大部分都只需要适配ios和安卓系统即可响应式布局：在不同的设备上都能给予客户最好的操作体验移动

2017-11-24 19:02:23 4647

原创常用的六种继承

原型继承原型继承是JS中最常用的一种继承方式，子类B想要继承父类A中的所有的属性和方法（私有+共有），只需要让B.prototype=new A;即可特点：把父类中私有的+共有的都继承到了子类的原型上（子类共有的）例如：function A() { this.x = 100;}A.prototype.getX = function () { console.log(t

2017-11-21 19:24:05 399

原创 Ajax基础知识

目录1.Ajax基础知识 2.Ajax兼容处理及惰性思想 3.Ajax中的http请求方式 4.Ajax中的同步编程和异步编程 5.编写简易的Ajax方法库1.Ajax基础知识Ajax：async JavaScript and xml 异步的js和xml 客户端js中的方法，用来向服务器端发送请求，还可以传递给服务器端数据，然后把服务器端的内容获取到 Ajax一般是运行在客户端浏览器上的

2017-11-16 21:04:42 321

原创 DOS、前后端交互、http、node基础

目录1.常用的dos命令 2.客户端和服务器端的交互模式 3.url和http基础知识 4.初步了解node 5.在node环境中执行js代码 6.node中模块的基础知识 7.node内置模块中常用的方法 8.静态资源文件请求的处理1.常用的dos命令2.客户端和服务器端的交互模式建立网站步骤： 1.买一台服务器（云服务器），服务器连接上网络后，会存在一个外网IP

2017-11-12 19:27:36 512

原创 DOM2事件兼容处理

目录1.DOM2级事件基础知识 2.DOM2兼容处理-this问题 3.DOM2兼容处理-重复问题 4.DOM2兼容处理-顺序问题1.DOM2级事件基础知识使用DOM2级事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的 DOM0级事件绑定只能给一个元素的某一个行为绑定一次方法，第二次会把前面的覆盖掉box.oncli

2017-11-08 19:30:21 528

原创事件基础

目录1.什么是事件 2.事件对象及兼容处理 3.事件的传播机制 4.案例-鼠标跟随jQuery 5.案例-鼠标跟随JS版 6.鼠标跟随、深入理解事件的传播机制 7.事件委托/事件代理 8.案例-京东商城放大镜 9.案例-百度搜索框 10.案例-多级菜单JS版 11.案例-多级菜单jQuery版 12.拖拽demo实现基本的效果 13.拖拽demo解决鼠标丢失1.什么是事件事件

2017-10-29 10:45:02 518

转载前端入门讲座

目录1.前端是什么？ 2.前端需要用到哪些技术？ 3.前端的开发方式是怎样的？1.前端是什么？在回答这个问题之前，先来看一道面试题：当我们输入网址之后……我们先来看一下“网页呈现”的整个过程：比如有一个用户，要访问abc.com这个网址。一般来说，当用户输入一个域名时，是在请求一个HTML资源，当它完成域名解析之后，它的浏览器会向abc.com这个域名所指向的Web服务器发出请求。有

2017-10-26 17:30:50 629

原创 jQuery基础

jQuery是一个使用原生js来封装常用方法的类库，解决了浏览器兼容问题 jQuery中提供的常用方法：核心、选择器、属性、筛选、CSS、文档处理、事件、效果（动画）、Ajax、工具目录1.常用的选择器 2.常用方法属性操作 2.1 回调函数 2.2 常用属性（attr、prop、class、内容） 2.3 内置遍历机制和手动循环方法 3.CSS常用方法链式写法文档

2017-10-19 15:17:54 321

原创【HTML5】——SVG基础

目录1.什么是SVG 2.绘制图形——矩形元素 3.绘制图形——圆形元素 4.绘制图形——椭圆元素 5.绘制图形——线条元素 6.绘制图形——折线元素 7.绘制图形——多边形元素 8.特效元素——渐变元素 9.特效元素——滤镜元素 10.绘制图片 11.画布方法 12.two.js1.什么是SVGSVG（Scalable Vector Graphics）是一种使用XML技术描述

2017-10-11 16:25:02 543

原创【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中绘制图标目前主流的游戏引擎：白鹭引擎、Cocos注意：Canvas作为HTML页面的元素出现，在Canvas绘制的图形与HTML页面是无关的，即不能使用DOM和事件绑定目录1.Canvas元素 2.绘制矩形 3.填充、描

2017-10-09 20:15:45 430

原创【HTML5】——音视频处理

目录重点：说明1.JS中判断的应用【开关灯】

2017-10-09 14:44:15 497

原创【HTML5】——表单

HTML5的作用：提供了更加强大的功能，方便开发在移动端使用对应的input类型，当用户输入的时候，可以调取出对应的虚拟键盘，方便用户快速输入相对于传统的表单类型提供了新的验证方式目录1.传统input表单类型 2.input新类型 3.表单新元素 4.表单新属性 5.表单新验证1.传统input表单类型text、password、submit、reset、button、radio、

2017-10-08 14:10:30 683

原创 DOM动态创建标记实例

本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章知识点可参考上一篇博客《DOM动态创建标记》，地址：http://blog.csdn.net/ruirui_1996/article/details/78158925目录1.实例描述 2.创建“缩略语列表”函数 3.创建“文献来源链接”函数 4.创建“快捷键清单”函数1.实例描述有这样一个网页，HTML代码如下：<h

2017-10-06 12:23:32 422

原创 DOM动态创建标记

所谓动态创建标记，就是说向页面中添加本来没有的内容。比如下面这段简单的代码：<!doctype html><html lang="lang"><head> <meta charset="UTF-8"> <title>动态创建标记</title></head><body><script type="text/javascript"></script></body></h

2017-10-04 18:39:26 522

转载 CSS之未知高度img垂直居中

效果如下：测试代码如下：（能够水平居中，通过text-align:center实现）<style>.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}</style></head><body><div class="box"> <img src="bigptr.jpg" /></div

2017-10-04 13:34:02 269

原创 js匀速动画及动画库

准备知识1.定时器使用定时器分为两步：设置定时器、设置等待时间window.setInterval([function],[interval]); //设置一个定时器，到达指定的时间，每隔这么长时间都重复执行[function]window.setTimeOut([function],[interval]); //只执行一次定时器返回的是一个数字，代表当前是第几个定时器清除定时器：window

2017-10-01 20:30:04 389

原创 JS中的正则表达式

目录1.正则的作用 2.正则的元字符及应用 3.正则的创建方式 4.正则的创建方式 5.懒惰性和贪婪性 6.分组捕获 7.replace 8.正则的简单应用1.正则的作用首先什么是正则表达式呢？正则表达式是是对字符串和特殊字符操作的一种逻辑公式。通俗点说就是一个规则，而且是用来处理字符串的一个规则。正则在2.正则的元字符及应用3.正则的创建方式

2017-09-29 20:25:45 367

原创 js中简易选项卡的实现（3种方法实现样式的封装）

清除浮动的三种方式1.overflow: hidden; 清除子元素的浮动对父元素的影响 2.clear: both; 清除哥哥元素的浮动对弟弟元素的影响 3.:after{ display: block; content: “”; clear: both; }基本样式代码<!doctype html><html lang="en"><head> <meta charset="UT

2017-09-29 10:43:21 4659

原创 DOM方法总结及DOM库扩展

常用DOM方法常用DOM方法：方法作用 document.getElementById(“id”); 通过元素的ID来获取元素对象 context.getElementsByTagName(“table”); 通过元素的标签名来获取元素对象,把容器中所有子子孙孙的元素都获取到 document.getElementsByName(“abc”

2017-09-27 20:25:22 1611

原创 JSON的方法及数据绑定

前后端交互模型json格式对象json不是一个单独的数据类型，它只是一种特殊的数据格式，是对象数据类型。普通格式对象：var obj = {name: "abc", age: 7}; JSON格式对象：var jsonObj = {"name": "abc", age: 7}; 相对于普通格式来说，只是把属性名用双引号包起来了json的方法在window浏览器对象中，提供了一个叫JSON的属

2017-09-27 14:17:16 3262

方法名举例作用返回值对原数组的改变pusharr.push(4);向数组的末尾增加新元素新数组的长度改变poparr.pop();移除数组中的最后一项被删除那一项的内容改变shiftarr.shift();移除数组中的第一项被删除那一项的内容改变unshiftarr.unshift(10);向数组开头增加一项新数组的长度改变splicearr.splice(n,m);删除元素，从索引n开始删除m个元

2017-09-25 21:05:38 463

转载 for循环里面的闭包问题的原因及解决办法

我们先看一个正常的for循环，普通函数里面有一个for循环，for循环结束后最终返回结果数组function box(){ var arr = []; for(var i=0;i<5;i++){ arr[i] = i; } return arr;}alert(box())

2017-09-24 16:40:36 448

原创【Bootstrap框架】——JS插件（JS plug-in）

共有12个插件函数，与jQueryUI提供的插件函数的地位是一致的，功能也有一定的重合；但是Bootstrap提供的这些插件为了精准的控制样式，代码写起来有些繁琐进而限制了这些插件的广泛使用性。调用插件的方式1.编写JS方式调用：$(‘xxx’).插件函数(); 如：$('.btn.danger').button('toggle').addClass('fat') 2.声明data-*扩展属性来

2017-09-23 20:00:35 723

原创【Bootstrap框架】——组件（Component）

1.图标字体图标字体本身也是字体，与普通字体不同，内容是图标。 Bootstrap提供了一套专用于Web/移动开发图标字体，Glyphicons Halflings字体图标。@font-face { /*声明一种服务器端字体*/ font-family: 'Glyphicons Halflings'; src: url(../fonts/glyphicons-halflings-r

2017-09-22 21:27:16 7481

原创【Bootstrap框架】——全局CSS样式（Global CSS Style）

目录1.CSSReset（样式重置） 2.按钮 3.图片 4.文本 5.排版&代码&列表 6.表格 7.栅格布局系统 8.响应式表单1.CSSReset（样式重置）box-sizing允许以特定的方式定义匹配某个区域的特定元素，有三个参数：content-box：默认值，盒子总宽度=margn+border+padding+widthborder-box：推荐值，盒子总宽度=mar

2017-09-21 21:34:03 2974

原创【Bootstrap框架】——起步（Startup）

Bootstrap来自 Twitter，是目前很受欢迎的前端框架。是一个HTML/CSS/JS框架。极大的简化了响应式网页的开发。学习特点：概念简单，易上手；但涉及到很多的英文单词。分为5个部分：起步、全局CSS样式、组件、插件、定制HTML：为H5已有的标签扩展了若干个自定义属性，以data开头CSS：CSS Reset（重置CSS的默认样式）、近千个classJS：基于jQuery添加了

2017-09-21 19:47:50 834

原创 webstorm常用快捷键

eclipse模式下（更改方式：File-Setting-Keymap）： 1、复制一行代码： ctrl+alt+↓显卡冲突参考（更改快捷键不能禁止）： http://jingyan.baidu.com/article/ca00d56c532e9fe99eebcfa5.html 2、删除当前行： ctrl+d3、移动当前行 alt+↓4、格式化代码 ctrl+alt+L

2017-09-21 16:59:59 228

原创【CSS揭秘】案例3、灵活的背景定位

background-position定义和用法background-position 属性设置背景图像的起始位置。如：background-position: right 20px bottom 10px;详细参考http://www.w3school.com.cn/cssref/pr_background-position.aspbackground-origin定义和用法backgrou

2017-09-20 18:52:48 204

原创【DOM 编程艺术】4 案例探究：JavaScript图片库

步骤一、创建一个链接清单html代码：<h1>Snapshots</h1><ul> <li> <a href="images/1.jpg" title="road">road</a> </li> <li> <a href="images/2.png" title="book">book</a> </li> <li>

2017-09-20 16:39:04 194

原创【DOM 编程艺术】3.5 获取和设置属性

getAttribute用于获取各个属性，setAttribute方法可以更改属性节点的值。1.getAttributegetAttribute不能通过document来调用，只能通过元素节点对象调用，比如可以与getElementsByTagName方法合用。<script type="text/javascript"> //想获取p标签的title属性： var title =

2017-09-20 14:31:44 198

原创【DOM 编程艺术】3.4 节点

节点分为：元素节点、文本节点和属性节点等。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>3.4 节点</title></head><body><h1>what to buy</h1><p title="a genele reminder">don't forgrt to buy t

2017-09-20 14:05:12 183

原创【CSS揭秘】案例2、多重边框

box-shadow定义和用法box-shadow 属性向框添加一个或多个阴影语法box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow必需。水平阴影的位置。如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。v-shadow必需。垂直阴影的位置。如果为正值，阴影在对象的底部，反之其值为负值时

2017-09-19 16:42:05 379

原创【CSS揭秘】案例1、半透明边框

先附上代码： HTML代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>1、半透明边框</title> <link rel="stylesheet" href="1.css"/></head><body><div id="div1">111</div></body></

2017-09-19 16:00:45 613

原创基础课专题——页面中常用的几种输出方式

页面中常用的几种输出方式在控制台输出：console.log(“内容”)；Elements：页面中的元素都在其中，经常用这个元素来调试样式Network：包含所有的资源文件（css外链文件、js外链文件、html页面、所有图片、向后台请求的数据接口），并告诉我们每一个文件加载完成的时间。（对于时间过长的需要进行优化）Sources：包含项目中的html、css、js所有的源码。（扒一个网站可以

2017-09-09 14:43:58 403

空空如也

【JavaScript】一个简单的隔行变色，鼠标移入移出的问题