WinSolstice-CSDN博客

转载键盘事件keypress 和 keydown、keyup 的用法与区别

KeyDown：用户摁下摁键时发生KeyPress：用户摁下摁键，并且产生一个字符时发生KeyUp：用户释放某一个摁键时触发定义和用法完整的 keypress 过程分为两个部分：1. 按键被按下；2. 按键被松开。当按钮被按下时，发生 keydown 事件。 keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。 <htm

2017-12-19 15:02:39 32362 4

转载 transition

transition 允许元素的 css 属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。语法 transition ： transition-property transition-duration trasition-timing-function transition-delaytransiti

2017-12-14 11:08:34 418

原创伪类/伪元素 :before :after的使用

:before 和 :after 伪元素指定生成的内容的样式和位置。如其名所示，:before和:after伪元素指定了一个元素文档树内容之前和之后的内容。 content 属性，与这些伪元素联用，指定了插入的内容。「一个元素文档树内容之前和之后的内容」就是指这个元素是要可以插入内容的，作为DOM元素，伪元素都是在容器内进行渲染的。input无法容纳其他元素，因此它不支持伪元素。按钮也是在其他

2017-12-04 15:12:56 1691

苹果手机在显示 input [type=’button’] 和 input [type=’submit’] 的时候iPhone上的safari解析按钮时会以苹果浏览器的默认UI渲染，就会出现button自带圆角值，要解决这个问题，就需要在样式中明确的指名：-webkit-appearance: none; appearance 只有两个内核的浏览器可以使用，webkit 和 firfox ，在使用

2017-12-04 14:06:03 677

原创 Meta标签

1、什么是meta标签？meta，即meta-information，可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。meta 永远位于head元素内部，不包含任何内容，并且元数据总是以名称/值的形式被成对传递的。2、meta标签的组成。meta标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数

2017-12-04 12:24:52 1670

转载 13-javascript map/reduce

如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clusters”，你就能大概明白map/reduce的概念。map举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：由于map()方法定义在JavaSc

2017-09-18 17:44:24 558

转载 12-高阶函数

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。一个最简单的高阶函数：function add(x, y, f) { return f(x) + f(y);}当我们调用 add(-5, 6, Math.abs)时，参数 x，y和f 分别接收-5，6和函数Math.abs，根据函数

2017-09-18 17:31:32 458

转载 11-javascript 方法

在一个对象中绑定函数，称为这个对象的方法。在JavaScript中，对象的定义是这样的：var xiaoming = { name: '小明', birth: 1990};但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：var xiaoming = { name: '小明', birth: 19

2017-09-18 17:20:38 537

转载 11-变量作用域

在JavaScript中，用 var 申明的变量实际上是有作用域的。如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：'use strict';function foo() { var x = 1; x = x + 1;}x = x + 2; // ReferenceError! 无法在函数体外引用变量x如果两个不同的函数各自申明了同一个

2017-09-18 16:42:50 446

转载 09-javascript 函数定义和调用

我们知道圆的面积计算公式为： S = πr2 当我们知道半径r的值时，就可以根据公式计算出面积。假设我们需要计算3个不同大小的圆的面积：var r1 = 12.34;var r2 = 9.08;var r3 = 73.1;var s1 = 3.14 * r1 * r1;var s2 = 3.14 * r2 * r2;var s3 = 3.14 * r3 * r3;当代码出现有规律的重复

2017-09-18 16:30:36 528

转载 08-javascript itertable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for … of循环来遍历。 for … of循环是ES6引入的新的语法，请测试你的浏览器是否支持：'use strict';var a = [1, 2,

2017-09-18 12:51:43 449

转载 07-javascript map&set

JavaScript的默认对象表示方式 { } 可以视为其他语言中的 Map或Dictionary 的数据结构，即一组键值对。但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报 ReferenceErro

2017-09-18 12:35:00 464

转载 06-javascript 循环

要计算1+2+3，我们可以直接写表达式：1 + 2 + 3; // 6要计算1+2+3+…+10，勉强也能写出来。但是，要计算1+2+3+…+10000，直接写表达式就不可能了。为了让计算机能计算成千上万次的重复运算，我们就需要循环语句。JavaScript的循环有两种，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块：var x = 0;for (var=1; i<=100

2017-09-18 12:26:46 439

转载 05-javascript 条件判断

JavaScript使用if () { … } else { … }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如下：var age = 20;if (age >= 18) { // 如果age >= 18为true，则执行if语句块 alert('adult');} else { // 否则执行else语句块 alert('teenager');}其中els

2017-09-18 12:01:47 498

转载 04-javascript object

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他：var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70,

2017-09-18 11:56:03 386

转载 03-javascript 数组

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。要取得Array的长度，直接访问length属性：

2017-09-17 23:28:09 215

转载 02-jvascript 字符串

JavaScript的字符串就是用 ” 或 “” 括起来的字符表示。如果 ’ 本身也是一个字符，那就可以用 “” 括起来，比如 “I’m OK” 包含的字符是 I，’，m，空格，O，K 这6个字符。如果字符串内部既包含 ’ 又包含 ” 怎么办？可以用转义字符 \ 来标识，比如：'I\'m \"OK\"!';表示的字符串内容是：I’m “OK”! 转义字符\可以转义很多字符，比如\n表示换行

2017-09-17 23:27:31 248

转载 01-javaScript基本语法、数据类型、变量

语法JavaScript每个语句以 ; 结束，语句块用 {…}。但是，JavaScript并不强制要求在每个语句的结尾加 ;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上 ;。注意：让 JavaScript 引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。因此尽量按标准书写代码例如，下面的一行代码就是一个完整的赋值语句：var x = 1;下面

2017-09-17 23:08:27 264

原创 03-页面重绘和回流以及优化

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把 html 结合 css 等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。浏览器把获取到的 HTML 代码解析成1个 DOM树，HTML 中的每个 tag 都是 DOM树中的1个节点，根节点就是我们常用的 document 对象。DOM 树里包含了所有 HTM

2017-09-17 20:41:08 353

原创 05-浏览器加载、解析、渲染这个过程

了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明白渲染的过程，在设置元素属性，编写js文件时，可以减少”reflow“”repaint“的消耗。1.浏览器的主要功能　浏览器的主要功能是将用户选

2017-09-17 18:02:05 322

原创 07-定位 z-index

z-index属性目前只有在使用定位 position:relative、position:absolute 、position:fixed 参与的情况下才有作用，表示层级，类似 photoshop 中层级的概念。z-index层级越高，内容越应该在最上面显示。position属性中的“后来居上”这个显示规则是没有兼容性问题的，所以，要想一个元素上面显示，直接放后面就可以了，无需z-index。ab

2017-09-17 12:24:41 236

原创 06-定位position relative

relative 属性相对自身所在位置改变位置relative 移动位置后其自身所在位置仍被占据relative 移动后和 visibility:hidden很像，不过前者是移动后者是隐身如果 relative 和 absolute 同时作用于两个兄弟元素上，z-index 决定了谁的层级靠上，或者就是后来者居上一般给父元素设置 relative 给元素设置 absolut 相对定位的最小

2017-09-16 23:15:01 262

原创 05-定位 position absolute

1. position 和 float 相似 + 两者有两大共性：包裹性，破坏性包裹性示例：.div { padding:20px; margin-bottom:10px; background-color:yellowgreen; }.abs { position:absolute; }<div class="div"> <img sr

2017-09-16 00:04:35 540

原创 04-CSS float 浮动

float 的本意是什么 + 浮动出现的意义其实只是用来让文字环绕图片而已浮动的本质是什么 + 浮动的本质：包裹破坏1. 浮动的“包裹性” div style="border:4px solid blue;"> <img src="./timg (2).jpg" /> </div> <

2017-09-15 16:33:00 288

原创 04-BFC 和 Margin Collapse

1. BFCBFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比

2017-09-15 13:47:39 268

原创 02-http请求头部信息

HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个只是头域结束的空行和可选的消息体组成。 HTTP的头域包括四个部分: 通用头请求头响应头实体头每个头域由一个域名，冒号（:）和域值三部分组成。HTTP请求方式GET 向Web服务器请求一个文件POST 向Web服务器

2017-09-15 00:38:35 555

原创 01-TCP建立连接及状态码

1. 窗口和滑动窗口 1. TCP的流量控制 TCP使用窗口机制进行流量控制什么是窗口？连接建立时，各端分配一块缓冲区用来存储接收的数据，并将缓冲区的尺寸发送给另一端接收方发送的确认信息中包含了自己剩余的缓冲区尺寸剩余缓冲区空间的数量叫做窗口TCP的流控过程（滑动窗口） TCP(Transmission Control Protocol)　传输控制协议TCP是主机对主机层的传输控

2017-09-15 00:15:25 1731

原创 03-quirks mode 和 standars mode

quirks mode 和 strict mode 主要体现在浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持。当早期的浏览器对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为 quirks mode(怪异模式), 但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做 strict

2017-09-14 19:06:23 313

原创 01-HTML5的设计原理

伯斯塔尔法则（Postel’s Law）：发送时要保守；接收时要开放。意思:在发送文档的时候，我们会尽量保守一些，尽量采用最佳实践，尽量确保文档格式良好。但从浏览器的角度说，它们必须以开放的姿态去接收任何文档。设计原理1、避免不必要的复杂性这个很简单，举个例子来说<!DOCTYPE html >HTML5只要这样写doctype就可以了，之前的HTML4.01<!DOCTYPE html PUB

2017-09-14 18:01:59 391

原创 02-HTML5头部 meta link 及优化

查找总结了一些HTML5头部标签常用信息，有错误的，敬请留言指正，或可以留言补充，欢迎留言交流！meta 标签<meta charset="utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><!-- 作者 --

2017-09-14 17:23:58 721

原创 getComputedStyle

这个知识点的内容以后在添加

2017-09-14 16:37:12 246

原创 02-伪类和伪元素

伪类伪类用来给选择器指定一个或者与其相关的状态语法： selector:pseudo class { property: value; }CSS 类也可与伪类搭配使用selector.class : pseudo-class {property: value}伪类是 css 内植类；css 内部本身赋予它一些特性和功能，也就是你不用再 class=… 或 id=…就可以直接拿来使用，当然你

2017-09-14 15:48:27 273

原创 001-盒模型、行内元素、块元素

1. 盒模型是什么盒模型是CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的属性。2. 盒模型的种类目前有：标准盒子模型和IE盒子模型 2种盒模型标准盒模型: IE盒模型：根据上图可以看出他们的不同：标准盒模型：元

2017-09-14 15:37:34 267

原创 01-选择器及其特点

1. CSS选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。标签选择器标签选择器用于指定元素名称的所有元素targetName: { }类选择器 .class 选择器选取带有指定类 (class) 的元素。.className { }ID选择器 id 选择器用于指定元素名称的所有元素#idName: {}全局选择器 * 选择器选取所有元素或

2017-09-13 22:41:12 953

原创 html + css笔记

1. Cascading Style Sheets 层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。特点富的样式定义易于使用和修改行内式外联式内联式 CSS样

2017-09-13 21:41:12 446

原创 21-Vue单文件组件的使用方式介绍

通过之前我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue 可以通过 Webpack 等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多 es6 的语法、第三方工具实现前端模块化等很多知识，我们大概看一眼指导 Vue 的组件可以直接写一个文件中，其他地方就可以直接导入这个模块了。 “`

2017-07-28 15:19:02 1533

原创 20-入门之组件化开发

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue 的组件化也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用 Vue 的组件也是我们的最重要的目标。1. 全局扩展方法Vue.ex

2017-07-25 18:19:50 287

原创 20-Vue 组件

Vue的全局API提供大量的功能，我这里就给大家罗列几个常用的结果* Vue.nextTick*语法： Vue.nextTick( [callback, context] )参数： {Function} [callback]{Object} [context]用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。// 修改数据v

2017-07-24 20:52:24 644

原创 18-Vue实例的全局配置

1.Vue实例的全局配置可以在启动应用之前修改下列属性：silent 类型： boolean默认值： false用法：Vue.config.silent = true//取消 Vue 所有的日志与警告。optionMergeStrategies 类型： { [key: string]: Function }默认值： {}用法： Vue.config.optionMerge

2017-07-24 20:39:58 1815

原创 17-Vue实例与生命周期

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。前面我们已经用了很多次 new Vue({…})的代码，而且Vue初始化的选项都已经用了data、methods、el、computed 等,估计您看到这里时，应该已经都明白了他

2017-07-24 20:37:51 353

空空如也

空空如也