双倍边距问题

在IE6中，如果有两个并行的漂浮元素并且用了margin的话，会出现双倍margin值的问题

1. 给漂浮元素设置样式display:inline
2. 为IE6hack一下：margin-left:10px;_margin-left:5px;
3. 在DOM结构允许的情况下，左边的用float:left，右边的用float:right;

固定定位fix

position:fixed这个样式有时候作用很大，尤其是在有浮动栏的时候，但是IE6中并不支持固定定位

默认高度问题

在IE6中，如果我们设置一个空白的div，会发现这个div会有一个默认的高度，因为IE6中有一个默认的字体大小，大致在12-14px之间，IE6会认为这个层的高度不应该小于字体的行高，所以会出现这个问题。解决方法：font-size:0;

图片下方出现空白间隙

1. 设置图片为块级元素：img{display:block;}
2. 把父元素的字体大小设置为0：font-size:0
3. 设置图片的垂直对齐方式：vertical-align:top

阅读更多

Document 对象

每个载入浏览器的HTML文档都会成为Document对象
Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问
Document对象是Window对象的一部分，可通过window.document属性对其进行访问，也可以直接通过document对象访问

Document 对象集合

阅读更多

Math对象

Math对象并不像Date和String那样是对象的类，因此没有构造函数Math()，像Math.sin()这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把Math作为对象使用就可以调用其所有属性和方法

属性

阅读更多

基础知识

Canvas画布是html5新增标签元素，主要用于通过脚本(通常是javascript)来绘制图像，而canvas元素本身并没有绘制能力(它仅仅是图形的容器)，必须使用脚本来完成实际的绘图任务
getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
详细Canvas API请参考: //demo.luckyw.cn/src/canvas-api/
demo:

效果	链接地址
时钟一	https://demo.luckyw.cn/src/canvas-clock/
时钟二	https://demo.luckyw.cn/src/canvas-clock2/
时钟三	https://demo.luckyw.cn/src/clock/
酷炫粒子时钟	https://demo.luckyw.cn/src/cool-clock/
七彩酷炫粒子	https://demo.luckyw.cn/src/dots-animate/
图片模糊	https://demo.luckyw.cn/src/blur-img/
心形动画	https://demo.luckyw.cn/src/canvas-heart/
刮刮卡	https://demo.luckyw.cn/src/clip-card/
图片橡皮擦	https://demo.luckyw.cn/src/clip-img/
彩色球沿轨迹运动	https://demo.luckyw.cn/src/color-ball-canvas/
图像处理	https://demo.luckyw.cn/src/image-process/
手写字	https://demo.luckyw.cn/src/learn-to-write-a-word/

浏览器支持

IE9、Firefox、Opera、Chrome以及Safari均支持canvas及其属性和方法。
注释：IE8以及更早的版本不支持canvas元素

颜色、样式和阴影

阅读更多

CSS的样式分为三类：

内嵌样式：是写在标签里面的，内嵌样式只对所在的标签有效
内部样式：是写在HTML里面的，内部样式只对所在的网页有效
外部样式表：如果很多网页需要用到同样的样式，将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象，只读
currentStyle是IE浏览器的一个属性

基础知识

众所周知，用document.getElementById('element').style.xxx可以获取element的xxx样式信息，可是它获取的只能是DOM元素内嵌样式style属性里的样式规则，对于使用外部样式表或内部样式设置的元素，就获取不到样式信息了
DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是IE不支持此方法，IE中获取样式的方法是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

阅读更多

准确搜索

最简单、有效的准确搜索方式是在关键词上加上双引号，在这种情况下，搜索引擎只会反馈和关键词完全吻合的搜索结果。
比方说在搜索Joe Bloggs的时候，在没有给关键词加上双引号的情况，搜索引擎会显示所有分别和Joe以及Bloggs相关的信息，但这些显然并不是我们想要的结果。但在加上双引号后，搜索引擎则仅会在页面上反馈和Joe Bloggs相吻合的信息
准确搜索在排除常见但相近度偏低的信息时非常有用，可以为用户省去再度对结果进行筛选的麻烦

排除关键词

如果在进行准确搜索时没有找到自己想要的结果，用户可以对包含特定词汇的信息进行排除，仅需使用减号即可
例如在搜索Joe Bloggs-jeans时，你所得到的结果反馈是不包含jeans字眼的Joe Bloggs条目

用「Either OR」（或）逻辑进行搜索

在默认搜索下，搜索引擎会反馈所有和查询词汇相关的结果，但通过使用OR逻辑，你可以得到和两个关键词分别相关的结果，而不仅仅是和两个关键词都同时相关的结果。巧妙使用OR搜索可以让你在未能确定哪个关键词对于搜索结果起决定作用时依然可以确保搜索结果的准确性

阅读更多

url: String，发送请求的地址，默认为当前页地址
type: String，请求方式，默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持
timeout: Number，设置请求超时时间(毫秒)
async:Boolean，默认值为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行
cache:Boolean，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息
data:Object或String，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2
dataType: String，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递
可用的类型如下：

• xml:返回XML文档，可用JQuery处理。
• html:返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
• script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求
• json:返回JSON数据。
• jsonp:JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个?为正确的函数名，以执行回调函数
• text:返回纯文本字符串

阅读更多

安装Node以及Express

前往官网https://nodejs.org 下载安装NodeJs,跟常规的软件安装类似，安装成功测试代码:

1

$ node -v

成功如下图所示：

当前显示我的NodeJs版本是5.10.0，安装Node的同时，系统会自带NPM工具，我们可以利用NPM下载我们所需的强大的node开源框架——Express，安装命令如下:

1

npm install -g express

其中-g是表示全局安装，如果不写是本地安装
安装完最新版的express之后，需要再安装:express-generator

1

npm install -g express-generator

同上安装成功后我们可以通过如下命令查看是否安装成功

1

express -V

成功如图所示：

Tips:注意是大写的V

阅读更多

回到顶部按钮

利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画

1
2
3
4

$('.top').click(function (e) {
    e.preventDefault();
    $('html, body').animate({scrollTop: 0}, 800);
});

通过scrollTop的值来改变你想要滚动到的位置
其实你就是做了:在接下来的800毫秒中让页面滚动，直到它滚动到文档的顶部

图片预加载

如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的:

1
2
3
4
5
6

$.preloadImages = function () {
	for (var i = 0; i < arguments.length; i++) {
		$('<img>').attr('src', arguments[i]);
	}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码:

1
2
3

$('img').load(function () {
	console.log('image load successful');
});

你还可以检查一个特定的图片是否加载完并且被带有id或者class的<img>标签代替。

阅读更多

uBlock Origin

一款高效的网络请求过滤工具，占用极低的内存和CPU，用于过滤垃圾广告

Chrono下载管理器

比原生Chrome下载管理器有更多的功能，支持断点续传

User-Agent Switcher for Chrome

能将Chrome伪装成各种不同的浏览器

Prism Pretty

一个Chrome扩展用于格式化/突出/预览HTML、JS、CSS、Markdown代码，堪称神器

右键搜

通过它可以直接进行图片搜索及百度翻译等功能

谷歌翻译

翻译神器，在此不赘述

WEB前端助手 : FeHelper

前端开发必备插件，包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式化查看、二维码生成器、编码规范检测、栅格规范检测、网页性能检测等

PostMan

一款功能强大的网页调试与发送网页HTTP请求的Chrome插件

阅读更多