前端学习笔记
关注
分享
扫一扫
林夕梦木子李
学习整理地址：https://my729.github.io/blog/accumulate/
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML5废弃的iframe有哪些缺点？
1：iframe会阻塞主页面的onload事件 2：iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。如下案例： <!DOCTYPE html><html><head>转载 2017-05-17 21:16:47 · 3460 阅读 · 0 评论 -
JavaScript写一个能遍历对象和数组的通用forEach函数
//遍历对象可以用for...in...，遍历数组可以用forEachfunction forEach(obj){ var key; if(obj instanceof Array){ obj.forEach(function(item){ console.log(item) }) }else{ fo原创 2017-08-07 20:37:39 · 7011 阅读 · 0 评论 -
DOM操作和BOM操作
DOM操作（文档对象模型）知识点：1、DOM本质什么？ 浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可操作的一个模型而已 2、DOM节点操作//获取DOM节点： var div=document.getElementById('div1')//元素 var divList=document.getElementsByTagName('div')//元素集合转载 2017-08-07 17:21:26 · 1404 阅读 · 0 评论 -
XML和json的区别？
1、数据体积方面json相对于XML来讲，数据的体积小，传递的速度更快些。2、数据交互方面json与JavaScript的交互更加方便，更容易解析处理，更好的数据交互3、数据描述方面json对数据的描述性比XML比较差4、传输速度方面json的速度要远远快于XML翻译 2017-08-07 20:52:33 · 499 阅读 · 0 评论 -
为一个DOM元素添加事件有几种方式，分别是什么？
第一种，直接在html代码上设置标签的事件处理，代码示例：<!DOCTYPE html> <html> <head> </head> <body> <p id="p">点击按钮就执行displayDate()函数</p> <button id="id" onclick="displayDate()">点击</button>//在此处onclic转载 2017-07-31 22:30:45 · 5597 阅读 · 0 评论 -
ajax创建过程
1.创建XMLHttpRequest对象,也就是创建一个异步调用对象. 2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 3.设置响应HTTP请求状态变化的函数. 4.发送HTTP请求. 5.获取异步调用返回的数据. 6.使用JavaScript和DOM实现局部刷新.<!DOCTYPE html><html><head><meta ch转载 2017-08-10 16:38:00 · 1080 阅读 · 0 评论 -
HTML+CSS多种布局技巧
一、水平居中水平居中多用于标题以及内容区域的组织形式，以下是五种实现水平居中的方法：方法一： 使用inline-block和text-align实现<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（1）</title> <style> .parent{ text-align原创 2017-08-17 21:33:21 · 891 阅读 · 0 评论 -
页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而link是XHTML标签，无兼容问题转载 2017-08-07 09:06:29 · 511 阅读 · 0 评论 -
前端面试题目整理-2017年7月9日
HTML5为什么只需要写？ 在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD转载 2017-07-09 09:21:12 · 295 阅读 · 0 评论 -
queyHTML和HTML5的区别？
一、文档声明上HTML5更简单，容易记忆 二、结构语义上，HTML5 三、新增元素 绘图功能：canvas和svg 1.Canvas标签 Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景转载 2017-09-25 20:18:01 · 271 阅读 · 0 评论 -
原生的js选择器
document.getElementById document.getElementsByName document.getElementsByTagNamedocument.getElementsByClassName //html5的类选择器，不兼容IE8 document.querySelector //兼容IE8原创 2017-09-25 20:23:30 · 2343 阅读 · 0 评论 -
js数组去重
方法一：对数组进行先排序，排完序之后在让元素与前一个元素做对比，相同的就去掉，该方法用到的是sort()方法和slice()var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j'];//对数组先进行排序arr.sort(); fo转载 2017-09-20 23:37:09 · 318 阅读 · 0 评论 -
HTML5的特性与优缺点
一：HTML5有以下一些优点：01、提高可用性和改进用户的友好体验；02、有几个新标签，有助于开发人员定义重要内容；03、可给站点带来更多多媒体元素(视频和音频)；04、可很好的替代FLASH和Silverlight；05、当涉及网站抓取和索引时，SEO很友好；06、可大量应用于移动应用程序和游戏；07、可移植性好。二：缺点： 该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一转载 2017-09-01 20:47:12 · 7395 阅读 · 0 评论 -
cookie、session、sessionStorage和localStorage的区别
请描述一下cookie、sessionStorage和localStorage的区别 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右转载 2017-09-01 22:02:01 · 403 阅读 · 0 评论 -
58面试整理
一、左固定右自适应布局常见布局技巧二、清除浮动的方式清除浮动的几种方式三、js继承1、简单原型链——拿父类的实例充当子类的原型对象具体实现：function Super(){ this.val = 1; this.arr = [1];}function Sub(){ // ...}Sub.prototype = new Super(); // 核心var sub原创 2017-09-20 23:15:33 · 865 阅读 · 0 评论 -
JavaScript常用的数组API和对象API
面试常用的数组API:1、forEach 遍历所有元素var arr=[1,3,4,5,7,8,9];arr.forEach(function(item,index){ //遍历所有数组元素 console.log(index,item)})运行结果：2、every 判断所有元素是否都符合条件var arr=[1,2,3];var result=arr.every(functi转载 2017-08-07 20:33:44 · 495 阅读 · 0 评论 -
JavaScript获取随机数，要求是长度已知的字符串格式
//整数var random=Math.random( );random=Math.floor(random*10) //获取一位整数的随机数//random=Math.floor(random*100) //获取两位整数的随机数console.log(random); var random=Math.random( );random=random+'00000'random=rando原创 2017-08-07 18:14:23 · 865 阅读 · 0 评论 -
JS获取2017-06-10格式的日期
知识点：var dt=new Date() //会得到创建当前时间对象的时间console.log(dt)dt.getFullYear( )//年份dt.getMonth( ) //0-11,月份需加一dt.getDate( ) //日dt.getHours( ) //时dt.getMinutes( ) //分钟dt.getSeconds( ) //秒答案：function form原创 2017-08-07 18:01:55 · 668 阅读 · 0 评论 -
什么叫响应式设计网站？它的优缺点？
响应式设计使网站可以在任何设备和任何尺寸的屏幕上都可以轻松浏览，重新排列，完美适应各种屏幕尺寸。 响应式网站是一个设计理念，它是多项技术的综合体。优点：1:减少工作量因为网站，设计，代码只需要一份；多出来的工作量只是js和css样式做一些改动2：节省时间3：每个设备都能很好的显示，得到正确的设计4：搜索优化缺点：1：会加载更多的样式和脚本资源2：设计比较难精确定位和控制3：老版本浏览器兼容不转载 2017-05-17 20:58:45 · 488 阅读 · 1 评论 -
dispaly的值及它们的作用
常用的几个值：inherit 规定从父级元素继承dispaly属性inherit的案例：<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>body {display:inline}p {display:inherit}</style></head><bo转载 2017-05-08 16:08:30 · 1551 阅读 · 0 评论 -
CSS清除浮动的方法
我们先看看浮动导致什么样的效果。正常没有浮动的案例如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>清除浮动的方法</title> <style type="text/css"> .container{ bac原创 2017-05-18 17:39:55 · 809 阅读 · 0 评论 -
css盒子模型
盒子模型分两种：标准W3C盒子模型IE盒子模型它们有一定的区别，先看两个盒子模型的示例图：从上面两个示例图可以看出两者之间：相同点：两种盒子模型的范围都包括 margin（边界）、border（边框）、padding（填充）、content（内容）； 不同点： 标准W3C盒子模型的内容宽度只有content，而IE盒子模型的内容宽度包括content、padding、border三部分。原创 2017-05-22 20:33:23 · 259 阅读 · 0 评论 -
web页面布局的方法
1、frameset（框架）布局 2、table了布局 3、div布局优缺点： 1：frameset布局：一般用于后台管理系统布局，适用于固定结构类布局，h5不推荐frameset布局； 2：table布局：旧的布局方式，table更适合做数据演示，它有三个缺点 （1）只有把table里面的所有内容都加载完了，才能显示出效果，加载缓慢 （2）它属于表格形式，不利于SEO（原创 2017-07-01 15:07:23 · 2047 阅读 · 0 评论 -
rgba()和opacity的透明效果有什么不同？
1.两者都能实现透明效果2.opacity作用于元素，以及元素内的所有内容元素3.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果原创 2017-07-01 15:09:36 · 804 阅读 · 0 评论 -
HTML标签嵌套规则
HTML标签有两类1.块级元素 div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul …特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度 功能：主要用来搭建网站架构、转载 2017-07-01 15:59:37 · 393 阅读 · 0 评论 -
CSS实现垂直居中的常用方法
居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的，下面是几种比较常见的垂直居中方法：第一种方法： 设置position：relation和top : 50%,然后使用margin-top把div往上偏移。<!DOCTYPE html><html lang="en"><head> <meta转载 2017-07-02 20:54:32 · 286 阅读 · 0 评论 -
前端面试知识整理-2017年7月10日
一、你做过的网页在哪些浏览器测试过，这些浏览器的内核是什么？浏览器的内核分为两大部分，一是渲染引擎，另一个是js引擎 ，现在js引擎比较独立，内核更加倾向于渲染引擎。五大浏览器内核及其代表： 1、 Trident内核：其代表作品是IE，因为IE捆绑在Windows中，占有极高的份额，又称IE内核。此内核只能用于Windows平台，且不是开源的。 ——其代表作品还有腾讯、360浏览器等转载 2017-07-07 10:07:04 · 310 阅读 · 0 评论 -
构造函数、原型、原型链
一、如何准确判断一个变量是数组类型？知识点：构造函数 函数名称以大写字母开头所有的引用类型（对象、数组、函数）都有构造函数var a={ }其实是var a=new Object( )的语法糖var a=[ ]其实是var a=new Array( )的语法糖function Foo( ){ }其实是var Foo=new Function ( )使用instanceof判断一个转载 2017-07-11 17:41:37 · 322 阅读 · 0 评论 -
如何理解JavaScript中的作用域
知识点：js没有块级作用域，只有函数和全局作用域一个函数是它定义时的作用域而不是它执行时的作用域全局作用域：在全局内都可以访问 函数作用域：只有函数作用内部才能修改和访问 自由变量：当前作用域没有定义的变量，但有调用它举例：var a=100; //全局作用域function f1( ){ var b=200; //函数作用域 function f2( ){转载 2017-07-31 09:05:18 · 310 阅读 · 0 评论 -
JavaScript中闭包的应用
闭包是有权访问另一个函数作用域中的变量的函数作用域链： 作用域链就是函数在定义的时候创建的,用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止。内存回收机制： 如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量转载 2017-07-31 09:24:02 · 302 阅读 · 0 评论 -
js异步加载的三种方式
默认情况JavaScript是同步加载的，也就是优先加载js，只有当js文件下载完，dom和CSS才开始加载，当某些时候我们需要js异步加载，我们可以通过以下方式来设置异步加载： 一、defer，只支持IE 1、defer属性规定是否对脚本执行进行延迟，直到页面加载为止 2、内部JS也能用该属性 3、异步加载js不允许使用document.write，因为document.write会清除文转载 2017-07-31 15:51:34 · 880 阅读 · 0 评论 -
对string对象扩展一个方法，删除前后空格
需要注意的： 1、用prototype添加方法 2、substring()函数是返回截取之后的字符串，不会对原字符串进行修改。<script type="text/javascript"> String.prototype.deletSpace = function(){ var str = this; //提取需要操作的字符串 while(str转载 2017-07-31 16:18:27 · 8021 阅读 · 1 评论 -
document.write和innerHTML的区别
1. ducument.write使用举例html文档：<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <script type="text/javascript" src="js.js"></转载 2017-07-31 17:55:14 · 673 阅读 · 0 评论 -
easy-mock使用
原文地址（排版更好些）：https://my729.github.io/blog/article/EasyMock使用.htmlEasyMock使用我们知道mockJs可以模拟数据,让前端独立于后端开发，还有许多其他特点，详情可以戳 这里 了解EasyMock是一个构建模拟数据的平台，也可以说是一个在线mockJs平台EasyMock优势省去配置、安装mockJs步骤，解决多人协作M...原创 2018-12-20 19:55:37 · 7459 阅读 · 2 评论