摘要：
outline属性有什么作用 原文链接 a{outline:none} do not do it 当用户使用tab键进行链接切换时，该属性会在当前选中的链接（获得焦点）使用该属性，一般来说是虚线框的长方形。这对于没有使用鼠标输入的用户而言尤其有用，它可以作为视觉反馈来告知用户当前的输入。所以说如... 阅读全文
摘要：
介绍 闲来无事，去了CSS3Plus网站逛了逛，发现了一个很有意思的实现--css3实现进度条。粗略看了下代码，发现原理其实很简单，不难理解。现在在此讲述下原理并实现一个1s更新的进度条。 技术细节是这样的：进度条由两个半圆环组成，首先我们的任务是实现左右两个半圆环。圆环可以用border-ra... 阅读全文
摘要：
CSS3的3d变换 CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。 但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在... 阅读全文
摘要：
无奈的开头 关于DOM节点操作，如果仅仅是根据标准API来操作，那是最简单不过的了。但是现实中却哪有这么容易的问题让我们解决，其实不仅仅是节点的克隆与删除，节点的添加也是如此，而且添加节点需要考虑的情况更多，这里不详细讲解，只说明大概过程。 问题那么多，主要出现在浏览器自身实现上，其中尤属legac... 阅读全文
摘要：
简介 异步回调的书写往往打乱了正常流的书写方式，在ECMAScript 6中实现了标准的Promise API，旨在解决控制回调流程的问题。 简单的实现了Promise API： 1 (function(w){ 2 function Promise(f... 阅读全文
摘要：
简介 在HTML中，我们可以将js嵌入到script标签中，可以嵌入到行内代码中，也可以嵌入到src（href）中。后者称作javascript URL。该方式的URL格式固定：javascript：expression。 其中，expression字符串必须能够被解释器所解析执行，执行结果若为... 阅读全文
摘要：
简介 当前主流的视频网站目前有不少新鲜好玩的功能，最明显的莫过于小视频的显示--当视频不在当前视口范围时，会在右下角用一个小窗口来显示当前的视频，而且可以拖拽。 今晚心血来潮，起了动手试试的念头。我的想法很简单，用canvas来获取视频每一帧的数据，并用动画函数requestAnimationF... 阅读全文
摘要：
简介 IE6实现了鼠标滚轮事件mousewheel，这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120，向下为-120.随后Chrome，Opera，Safari等也都实现了该事件。Opera10之前的版本... 阅读全文
摘要：
简介 Blob在js中意味着二进制大数据。实现该接口的对象有3个属性，分别是type（MIME），size（byte）和一个切割方法：slice（在大文件分片上传可能用到）。另外，File实现了Blob接口，并且还有额外的属性--name和lastModify。 早起的一些浏览器实现了草案（已废... 阅读全文
摘要：
简介 js中很容易出现全局变量污染的情况，全局变量需要依赖全局环境的命名空间，如果为了避免这种情况，大多数采用多重命名空间的方式来定义变量，但是此种方式名称长度长，解析效率低。因此，可以采用一种沙箱模式来管理我们的代码。 该模式创建了一个新的环境变量，所有的变量在该环境内可访问，环境外不可访问（... 阅读全文
摘要：
简述 在《JavaScript高级程序设计（第三版）》中，提到WebWorker的importScripts方法是异步执行的，然而在另一本书《Javascript权威指南》中，却说importScripts是一个同步方法，两者矛盾，故私底下测试一番，发现该方法确实是同步执行，待所有js问价解析执行... 阅读全文
摘要：
简述html5新添加的canvas API可以让我们对画布进行开发应用，典型的是可以使用canvas截图或者手工绘制“迷你图”（即嵌入在文本中的高清小图片）。实现截图的方法很简单，就是创建一个canvas并用drawImage来获取该时刻视频帧，并使用canvas的toDataURL转换成data ... 阅读全文
摘要：
17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2) 译自:JavaScript: The Definitive Guide, 5th Edition ----By David Flanagan 迄今为止,在本章中出现的事... 阅读全文
摘要：
本篇文章是QUnit的简介，可以作为很好的入门教程。文章原址介绍自动化测试时软件开发过程中必不可少的一部分，而单元测试则是自动化测试的最为基本的一块，软件的每一个组件，每一个功能单元都需要经过不停地测试以保证在上线时可以正常的工作。当然，测试也不仅仅只有这些作用，最为人所知的就是测试驱动设计（tes... 阅读全文
摘要：
概述 对于uri的编解码，在js中有3对函数，分别是escape/unescape,encodeURI/decodeURI,encodeURIComponent/decodeURIComponent。 它们的适用范围不同，而且遵循的编码规范也不同。 对于上述函数而言，所有的ASCII的字符编码相同， 阅读全文
摘要：
实现截断长文本显示处理，以前是通过后台的截取，但这种方法容易丢失数据，不利于SEO。而通过前端css的截断，则灵活多变，可统一运用与整个网站。这项技术主要运用了text-overflow属性，这个虽是css3的属性，但是在各大浏览器却兼容非常好，ie6系列全部兼容。 .e{ ... 阅读全文
摘要：
js内置对象是ECMAScript规范中要求实现的一些函数和对象，具体包括Object,Function,Number,Boolean,Array,String,RegExp,Error,Date,Global,Math。其中，Math比较特殊，是一个静态类，而不是构造函数。这些对象（函数）在js引... 阅读全文
摘要：
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta标签用于网页的与中，meta标签的用处很多。meta的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人... 阅读全文
摘要：
前几天做一个用iframe显示曲线图的demo，发现对iframe的contentDocument绑定onclick事件都无效，而在页面中对iframe.contentDocument的onclick属性为undefined；而当iframe去掉src属性后，在对其绑定onclick事件，该事件生效... 阅读全文
摘要：
目前大多数搜索框都已实现自动补全功能，自己也私底下实现了一个简易版本，在此总结过程中的一些要点： 1，侦听文本框的value值改变，注意在Ie8及其之前版本的onpropertychange和Ie9的oninput事件与 W3C下的oninput事件的异同； 2，ajax请求数据； 3，自动... 阅读全文
摘要：
new操作符易用，但是往往容易忽略对其的理解。var foo= new Foo();这个简单的语句，涉及到了一系列的步骤： 1），给对象开辟内存，即 var foo= {}; 2），修改新对象的隐式原型对象，即 foo.__proto__ = Foo.prototype; 3），在foo上下文... 阅读全文
摘要：
本文转自这里 规范中 instanceof 运算符定义 11.8.6 The instanceof operator The production RelationalExpression: RelationalExpression instanceof ShiftExpression ... 阅读全文
摘要：
拖拽的元素必须绝对定位。在实际操作中，犯了一个简单的错误： 对于iframe元素的事件绑定，需要在src完全加载后进行绑定。 iframe.onload = function(){ iframe.contentDocument.onclick = function(){} ... }另... 阅读全文
摘要：
IE系列直到IE9才支持DOMContentLoaded事件，对于IE8及其之前版本，如果html内没有框架，则可以采用document.documentELement.doScroll来判断是否构建好DOM树；如果html内有框架，则利用document的onreadystatechange事件判... 阅读全文
摘要：
PNG32的alpha透明效果在IE6下会出现bug，出现灰色背景。而目前的解决方案就是IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改，而是对相应的html元素进行修改。所以在一个html中的多处使用alpha滤镜，那么性能的损耗将会累加。现总结使用滤镜的缺点： 1，IE6下使用滤镜，那么... 阅读全文
摘要：
重新温习了下这段内容，发现各个浏览器的兼容性真的是搞大了头，处理起来很是麻烦。现在现总结下并行加载多个js的方法： 1，对于动态createElement('script')的方式，对所有浏览器都是异步并行加载的。这里所说的并行不仅仅指的是 js并行加载，也包括js和其他资源比如图片，ifr... 阅读全文
摘要：
元素被绝对定位，那么元素将会脱离正常流（normal flow），并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中，我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式： BoxWidth = MarginLeft + BorderLeftWidth + Pa 阅读全文
摘要：
包含块简介在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。 ... 阅读全文
摘要：
一个元素如果被设置为display：inline-block，那么这个元素将表现为行内块的性质。被设为行内块的元素对内（子元素）表现为块级框，具体为可以设置高度宽度，可以设置垂直margin和padding等；对兄弟元素则表现为行内框，具体表现为相邻行内块可在同一行显示，而且有着行内元素的特点，就是... 阅读全文
摘要：
利用table-cell可以实现宽度自适应布局。table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效，而且一旦元素设置了float或者absolute，则table-cell也会失效。table-... 阅读全文
摘要：
在IE6下PNG透明图片做背景，无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。另外，由于IE6下的 ：hover 只对支持，对其他元素都不起作用，所以需要对IE6单独打补丁。可以使用微软提供的csshover.htc文件进行修复。 ... 阅读全文
摘要：
页面布局上隐藏，但是对屏幕阅读器可见的几种方式: 1, .h{position:relative; left:-900em;top:-900em;} 2, .h{position:absolute; clip:rect(1px 1px 1px 1px)} //采用clip必须对该元素进行绝对定位... 阅读全文
摘要：
平淡的描述 在js中，能使用特征监测就尽量不要使用浏览器嗅探。嗅探浏览器目的是判断可否使用这个对象或者API，但是抛开浏览器的各个版本的userAgent不说，还有些浏览器打补丁的情况，造成判断异常复杂，兜了个大的圈子，而特征检测则是直接了当，不存在维护困难的问题。 其次，当不确定某个版本的浏览... 阅读全文
摘要：
边框有一些特殊的属性，可以采用边框来实现对话框的效果，而且兼容性杠杠的，不过在ie6下面可能会遇到兼容性问题，在后面分析它。首先，我们看看边框的组成结构： 效果图： 可以看到边框的效果，4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。可以想象得到，如果div的高度和宽度都为... 阅读全文
摘要：
对于早期的w3c浏览器，并没有实现ie的私有方法insertAdjacentHTML（目前已是HTML5标准），可以用appendChild模拟该方法的实现： if(typeof HTMLElement !=='undefined' && !HTMLElement.prototype.insert... 阅读全文
摘要：
在IE的全系列中都实现了mouseenter和mouseleave事件，但是在早期的w3c浏览器中却没有实现这两个事件。有时候，我们需要使用mouseenter事件来防止子元素的冒泡，这就涉及到事件兼容性的问题了。先比较mouseenter和mouseover的异同点，当从元素外围进入元素内部时同时... 阅读全文
摘要：
---恢复内容开始---浮动元素处在正常文档流上的浮动流上，浮动元素的渲染方式很特殊，首先按照正常文档流进行布局，然后将该元素从文档流中取出并对该元素尽量向左或者向右移动，周围的内容将会环绕该元素。所以，浮动会对兄弟元素的布局造成影响，而且其效率较低，代价较高。绝对定位则是完全脱离文档流，直接相对于... 阅读全文
摘要：
之前很简单的认为对input的value监测就用2个事件可以搞定兼容性，知道我看了司徒正美的这篇博客，还是感慨自己不够深入，接触的太少。 对于IE全系列，可以采用onpropertychange属性监测 对于 gteIE9 和W3c浏览器，则通过input事件进行监测。 但是IE9的兼容性可能... 阅读全文
摘要：
对于“==”，我们肯定不陌生，但是背后的判定机制我们可能不是很熟悉，我现在先举一些例子，最后再总结一下大概的方法： null == undefined // true 1 == true // NaN == NaN //false '123' == 123 //true Number... 阅读全文
摘要：
重新复习了富文本编辑器的基本实现，现总结下要点： 1，iframe的创建，之所以使用iframe框架，是为了防止编辑的内容影响当前文档。 2，隐藏的textarea保存iframe的源码 3，ie下的兼容性，为了保存ie的选中范围，需要借助于textRange.getBookmark(),以及... 阅读全文
