diaojilu3861-CSDN博客

转载能用HTML／CSS解决的问题，就不要用JS

原因：简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验。一，导航高亮效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>home</title...

2018-05-09 19:56:00 190

转载跨域

一，什么是跨域协议，域名，端口，其中一个不一样，就代表跨域不是一个源的文档无法操作另一个源的文档，受限如下：1，Cookie、LocalStorage和IndexDB无法读取2，DOM无法获得3，AJAX请求不能发送可以跨域加载资源的三个标签1，img-src（图片提供方也可以做下防止盗用链接的处理）应用场景：打点统计兼容性好2，link- href...

2018-05-01 16:32:00 160

转载从输入url到页面展示到底发生了什么

阅读目录1、输入地址2、浏览器查找域名的 IP 地址　　3、浏览器向 web 服务器发送一个 HTTP 请求4、服务器的永久重定向响应5、浏览器跟踪重定向地址6、服务器处理请求7、服务器返回一个 HTTP 响应　8、浏览器显示 HTML9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）1、输入地址...

2018-05-01 07:46:00 161

转载 hosts 文件

各系统平台hosts文件存放路径路径如下： Windows系统： C:\Windows\System32\drivers\etc\hosts Linux系统：/etc/hosts Android（安卓）系统： /system/etc/hosts Mac（苹果电脑）系统： /etc/hosts iP...

2018-05-01 06:52:00 113

转载了解Web及网络基础

一，HTTP的历史1，HTTP的概念HTTP（HyperText Transfer Protocol，超文本传输协议）是一种通信协议，它允许将超文本标记语言（HTML）文档从Web服务器传送到客户端（如浏览器）它是一个应用层的协议，承载于TCP之上由请求和响应构成，是一个标准的客户端服务器模型2，HTTP的发展历史作为Web文档传输协议的HTTP，它的版本更新...

2018-04-30 22:07:00 47

转载 hybrid

一，hybrid是什么，为何用hybrid？二，hybrid更新和上线流程三，hybrid和h5区别四，前端js和客户端如何通讯？一，hybrid是什么，为何用hybrid？1，文字解释hybrid即“混合”，即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节也可能涉及到server端2，存在价值，...

2018-04-27 17:51:00 83

转载组件化和 React

一，对组件化的理解1，组件的封装-视图-数据-变化逻辑（数据驱动视图变化）例：import React, { Component} from 'react';import List from './list/index.js';import Input from './input/index.js';class Todo exte...

2018-04-27 09:46:00 110

转载 MVVM 和 VUE

一，使用jquery和使用vue的区别二，对MVVM的理解三，vue中如何实现响应式四，vue如何解析模版五，vue整个实现流程一，使用jquery和使用vue的区别jquery实现todo-list<!DOCTYPE html><html lang="en"><head> <met...

2018-04-26 13:53:00 126

转载虚拟 DOM

虚拟DOM ：virtual dom（以下简称vdom，是vue和react的核心），使用比较简单。一，vdom是什么，为何会存在vdom1，什么是vdom：用js模拟DOM结构，DOM操作非常‘昂贵’，DOM变化的对比，放在JS层来做（图灵完备语言），提高重绘性能需求：根据给出的数据，将该数据展示成一个表格，随便修改一个信息，表格也跟着修改，下面使用jquery实现de...

2018-04-25 17:23:00 77

转载 ES6模块化与常用功能

目前开发环境已经普及使用，如vue，react等，但浏览器环境却支持不好，所以需要开发环境编译，下面介绍下开发环境的使用和常用语法：一，ES6模块化1，模块化的基本语法ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。模块功能主要由两个命令构成：export和import（注意有无default）。export命令用于规定模块的...

2018-04-24 10:07:00 115

转载 npm install、npm init、npm update、npm uninstall和package.json

npm install安装本地包npm install <package_name>:这个命令将在当前目录中创建node_modules目录（如果尚不存在），并将该软件包下载到该目录。该命令默认本地安装。安装了哪个版本的软件包？如果本地目录中没有package.json文件，则会安装最新版本的软件包。如果有package.json文件，则安装满足该pack...

2018-04-24 06:43:00 121

转载 JavaScript面向对象

一，类与实例1，类的声明 /** *类的声明 */ function Animal(name) { this.name = name; } /** *ES6中class的声明 */ class Animal2 {//类的声明 construct...

2018-04-23 19:21:00 45

转载 JavaScript原型与原型链，原型的实际应用

原型链是js面向对象的基础，非常重要。一，创建对象的几种方法：1，字面量var o1 = { name:'o1'};2，构造函数var M = function(name){ this.name = name;};var o2 = new M('o2');var a = {} 其实是 var ...

2018-04-23 17:16:00 462

转载浏览器缓存：强缓存和协商缓存

缓存是指代理服务器或客户端磁盘内保存的资源副本。利用缓存可减少对服务器的访问，因此也就节省了通信流量和通信时间。浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器缓存的优点有：减少了冗余的数据传输，节省了网费减少了服务器的负担，大大提升了网站的性能加...

2018-04-22 09:34:00 91

转载 html5的web存储与cookie的区别

以下从3个方面进行比较：1，容量：cookie只有4KB，localStorage和sessionStorage最大容量5M2，是否会携带到ajax中：cookie由每个对服务器的请求来传递，会影响获取资源的效率，localStorage和sessionStorage只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。3，API易用性：cookie需要封装...

2018-04-22 05:48:00 211

转载 JavaScript作用域和闭包

以下内容针对ES5一，先说下变量提升：1，全局执行上下文中（一段script）：变量定义，函数声明（执行之前）console.log(a) //undefinedvar a = 20;以上代码等同于：var a; //变量提升到全局执行上下文顶部，默认值为undefinedconsole.log(a); //undefineda = 20;...

2018-04-21 22:28:00 45

转载 JavaScript异步和单线程

一，同步和异步的区别：同步会阻塞代码执行，而异步不会。（比如alert是同步，setTimeout是异步）二，前端使用异步的场景：1，定时任务：setTimeout，setInterval2，网络请求：ajax请求，动态<img>加载3，事件绑定三，什么是单线程，和异步有什么关系1，什么是单线程：只有一个线程，同一时...

2018-04-21 21:43:00 79

转载 JavaScript中何时使用===，何时使用==

建议尽量都使用===，原因如下：一致性：使用==对一致性没有任何好处，那么为什么不避免使用呢。简单和性能：一般来说，===是最简单的操作符，因为它不用进行类型转换。JavaScript引擎的性能参差不齐，但是在大部分浏览器中===比==速度更快。即使会自动转换，但并不总是按你需要的方式转换：比如7+“3”;//"73"。如果非要使用==，可参考如下两种情况：1...

2018-04-21 21:31:00 185

转载 input框中自动展示当前日期 yyyy/mm/dd

直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input框中自动展示当前日期</title></head><body> <i...

2017-07-05 21:33:00 553

转载 Textarea输入字数限制（兼容iOS&安卓）

最近在做一个微信公众号的页面，其中有对textarea做输入字数限制，而且需要兼容iOS和安卓手机，下面直接贴代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>textarea输入字数限制（兼容io...

2017-07-05 20:46:00 239

转载 @meda媒体查询

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。浏览器支持表格中的数字表示支持 @media 规则的第一个浏览器的版本号。RuleChr...

2017-04-12 22:06:00 164

转载为样式找到应用目标-CSS选择器

1，常用选择器：元素（标签／简单）选择器、ID选择器、类选择器、后代选择器（可以将类或者ID应用于它们的祖先，然后使用后代选择器来定位）2，伪类：有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态，可以使用伪类选择器来完成：/*makes all unvisited links blue*/a:link { color: blue; }...

2017-04-11 22:05:00 137

转载 JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程，练习了一遍，不足之处，欢迎指正（照片在本地，大家可以着重看代码哈）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>爱淘气购物网－JQuery网页定位导航特效</title&g...

2017-04-02 14:42:00 111

转载 CSS代码缩写

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/通常有下面三种缩写...

2017-04-01 18:34:00 75

转载认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”CSS代码语法css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分...

2017-04-01 17:41:00 61

转载文档类型、DOCTYPE切换和浏览器模式

DTD（文档类型定义）是一种机器可读的规则，它们定义XML或HTML的特定版本中允许有什么、不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML哪个版本。选择什么样的DOCTYPXHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitio...

2017-04-01 17:28:00 111

转载 MIME 参考手册

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。它是一个互联网标准，扩展了电子邮件标准，使其能够支持：MIME 类型MIME (Mul...

2017-04-01 11:12:00 122

转载微格式(microformat)

由于HTML中缺少相应的元素，很难突出显示人、地点或日期等类型的信息。为了解决这个问题，有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式，现在称为微格式（microformat)。请看下面的例子：什么是微格式微格式：建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microform...

2017-04-01 10:36:00 251

转载 css盒模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距)- 清除边框外的区域，外边距...

2017-04-01 09:39:00 71

转载 CSS类选择器和ID选择器

ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。ID也可以用来标识持久的结构性元素，例如主导航或内容区域。ID还可以用来标识一次性元素，例如某个链接或表单元素。一个ID只能应用于页面上的一个元素。同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面，其中包含多篇新闻，代码如下所示...

2017-03-31 19:21:00 90

转载 i++ 和 ++i

简单地说，都是i自加1。区别是，i++是执行完后面的语句才加1；而++i就先做i+1才执行后面的语句。请看下面2个例子： function Foo() { var i = 0; return function() { console.log(i++); } } var f1 ...

2017-03-30 21:57:00 92

转载常见浏览器兼容性问题与解决方案（面试题目）

1，浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：可以使用Normalize来清除默认样式，具体可参考文章：来，让我们谈一谈 Normalize.css也可以使用如下代码：body,h1,h2,h3,ul,li,i...

2017-03-30 21:24:00 2504

转载面试题目简单整理－完善中

面试题目整理：1，此处a是局部变量，b和c是全局变量。(function() { var a = b = c = 5; })(); console.log(b); //5 console.log(c); //5 console.log(a); //VM56095:6 Uncaught ReferenceError: a...

2017-03-29 21:40:00 57

转载什么是闭包？请举例说明（面试题目）

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码　　var n=999;　　function f1(){　　　　alert(n);　　}　　f1(); // 999另一方面...

2017-03-29 08:33:00 127

转载行内元素和块级元素的具体区别是什么？inline-block是什么？（面试题目）

一，行内元素与块级元素的区别：1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。2.块级元素可以包含行内元素和块级元素...

2017-03-28 21:40:00 488

转载 CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。区别总结如下：CSS伪类(Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态...

2017-03-28 21:08:00 80

转载用CSS的方法如何让一个元素不可见？（面试题目）

面试中看到这个问题，自己想的不全面，下面整理下，一起学习：一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。代码如下:{ display: none; /* 不占据空间，无法点击 */ } /******************************...

2017-03-27 11:32:00 116

转载 JavaScript中==和===的区别（面试题目）

==用于一般比较，===用于严格比较;==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。举例说明： "1" == true; //true类型不同，"=="将先做类型转换，把true转换为1，即为 "1" == 1；此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1；此时，"==" 左右两边的类型都为数值型，...

2017-03-27 11:07:00 49

转载你能描述一下渐进增强和优雅降级之间的不同吗?（面试题目）

第一眼看到这个题目，这两个名词都不熟悉，回头查了相关资料，看了下，实际自己之前用过，但是不知道原来有这么两个好听的名字。先看两个例子：.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; tran...

2017-03-27 10:50:00 119

转载如何消除一个数组里面的重复元素？(面试题目）

第一眼看到这个题目的时候，思路是，找出数组中的重复元素，然后删除掉即可。下面为具体代码实现：var data = ['blue', 'red', 'green', 'blue'];function UniqueData(data) { data = data.sort(); for (var i = 0; i < data.length; i++...

2017-03-27 09:37:00 112

空空如也

空空如也