2015年9-10

Js

代码段1代码段2

原生的.style.属性获得的是内嵌样式 如果外联样式或者内部样式的话是通过document.styleSheets cssRules和Rules等等 需要兼容

5种css和js交互比较新的方法

其中第一点js获取伪元素

高效jquery编写技巧

// 糟糕
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
// 建议
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}  不存在才赋值

settimeout0的应用

发展简史jQuery时间轴特效

jQuery和CSS3超炫旋转环状菜单特效

zepto源码注释

js优化小技巧

滚动触发css3动画

js深层复制

function clone(obj)
{
var o,i,j,k;
if(typeof(obj)!="object" || obj===null)return obj;
if(obj instanceof(Array))
{
o=[];
i=0;j=obj.length;
for(;i<j;i++)
{
if(typeof(obj[i])=="object" && obj[i]!=null)
{
o[i]=arguments.callee(obj[i]);
}
else
{
o[i]=obj[i];
}
}
}
else
{
o={};
for(i in obj)
{
if(typeof(obj[i])=="object" && obj[i]!=null)
{
o[i]=arguments.callee(obj[i]);
}
else
{
o[i]=obj[i];
}
}
}

return o;
}

深入剖析 JavaScript 的深复制

其中提到Underscore 的 clone() 不能算作深复制，但它至少比直接赋值来得“深”一些，它创建了一个新的对象。

jQuery 中也有这么一个叫 &.clone() 的方法，可是它并不是用于一般的 JS 对象的深复制，而是用于 DOM 对象。&.extend() 方法来完成深复制。值得庆幸的是，我们在 jQuery 中可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, …)就可以实现深复制啦

var x = {
a: 1,
b: { f: { g: 1 } },
c: [ 1, 2, 3 ]
};
var y = $.extend({}, x),          //shallow copy
z = $.extend(true, {}, x);    //deep copy
y.b.f === x.b.f       // true
z.b.f === x.b.f       // false

不能用instanceof 和 constructor来判断array，原因参考：http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/ 不多iframe 没事

var arr = [];
arr instanceof Array; // true
arr.constructor == Array; // true
//jquery中的
isArray: function( arr ) {
return !!arr && arr.constructor == Array;
}

The problems arise when it comes to scripting in multi-frame DOM environments.

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Boom!
arr instanceof Array; // false

// Boom!
arr.constructor === Array; // false

解决Duck-typing

function isArray(object) {
return object != null && typeof object === "object" &&
'splice' in object && 'join' in object;
}

4000

新版ECMAScript有isArray了

Html&css

60个有用CSS代码片段

css3 background

实用教程！用CSS创建扁平化面包屑导航

Normalize.css 源码解读

css选择器

编写高效的 CSS 选择器

提到了关键选择器 和过度限制选择器 记住浏览器是从右开始找

BFC

line-height

所以在使用line-height时，除非你刻意否则尽量使用倍数设值

内容区行高与字体尺寸有关，padding不对行高造成影响。

css trigger 查看css属性变化的时候性能

高性能 CSS3 动画 其中有hack代码

10款css工具 其中前缀 渐变 按钮很好

float系列 inlinebox linebox

http://www.html5cn.org/article-7057-1.html

动画12则非常好

很多好的html5例子

loading css3

-moz-background-size:100% 100%;

background-size:100% 100%;背景自适应

background-size不要和background连写 兼容问题

http://www.imooc.com/article/1167 html5动画生成器

CSS z-index 属性的使用方法和层级树的概念

Understanding CSSjs z-index

从输入 URL 到页面加载完的过程中都发生了什么事情

切记：appendChild()、insertBefore()是移动element节点！

[css行高line-height的一些深入理解及应用]

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98lineheight%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

http://www.zhangxinxu.com/wordpress/2015/01/tips-blank-character-chinese-align/#comments

CSS页面布局的技巧

http://bbs.lanrentuku.com/thread-2648-1-1.html

有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性？

http://www.zhihu.com/question/20979831

那些年我们一起清过得浮动**（其中末尾精益求精部分after闭合浮动 before阻止重叠方法 重点）

BFC神奇背后的原理

bfc和haslayout

在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势

如何让height：100%起作用

web中计算宽度和高度是不一样的

div内部块级元素设置外间距（margin）对其的影响

内部块元素设置margin并没有撑开外面的div

解决overflow:hidden zoom:1 如果可以显示border直接设置个border就好了

一个完整的flexbox指南

http://www.w3cplus.com/css3/flexbox-basics.html

http://my.oschina.net/yinyongcom666/blog/151085

行内元素产生水平间距bug

font-size 0 不能解决所有浏览器问题

ie下a中的img自动添加border 所以img标签中最好加上border=“0”；

【前端外刊】想要站点文字默认为双倍行距。line-height 最佳实践 确保将line-height是没单位数值

如何让元素部分重叠 负值margin

伪元素和伪类

http://zhuanlan.zhihu.com/FrontendMagazine/20020090

跨浏览器开发必备知识库

https://css-tricks.com/perfect-full-page-background-image/

完美full-page背景

纯css实现气泡窗

移动端

无线建站指南入门

移动web资料

移动web滑屏框架

Spirit腾讯移动Web整体解决方案移动标准 UI js库

小师傅给的移动端资料

这个项目收集移动端开发所需要的一些资源与小技巧

想学响应式设计？来看史上最全的响应式设计资源库

http://www.uisdc.com/responsive-web-design （这里有响应式的例子)

40个栅格插件

Kraken

jpanelMenu

性能

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbj.58.com%2Fjob.shtml%3FPGTID%3D14391357614640.23508751671761274%26ClickID%3D1

http://tech.meituan.com/performance-framework-and-platform.html

http://segmentfault.com/a/1190000003646305