前端开发必备知识点汇总与深入解析

Markdown语法说明&＃xff1a;http://www.appinn.com/markdown/

1、前端碎片知识总结篇

1.1 关于浏览器

IE的内核是Trident、Mozilla的内核是Gecko、Chrome的内核是Blink&＃xff08;Webkit的一个分支&＃xff0c;谷歌和Opera合作推出&＃xff09;、Opera的内核是Blink&＃xff08;原内核是Presto&＃xff0c;现已废弃。&＃xff09;

1.2 jQuery中this与$(this)的区别是什么&＃xff1f;

$(#textbo.hover(){function() {this.title &＃61; "Test";},fucntion() {this.title &＃61; "OK”;}
})

这里的this其实是一个Html 元素(textbox)&＃xff0c;textbox有text属性&＃xff0c;所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了&＃xff0c;Error–报了。this与$(this)的区别在此。

错误代码&＃xff1a;

//Error Code&＃xff1a;
$("#textbox").hover(function() {$(this).title &＃xff1d; "Test";},function() {$(this).title &＃61; "OK";}
);

这里的$(this)是一个JQuery对象&＃xff0c;而jQuery对象沒有title 属性&＃xff0c;因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性&＃xff0c;所以正确的写法应该是这样&＃xff1a;

$("#textbox").hover(function() {$(this).attr(’title’, ‘Test’);},function() {$(this).attr(’title’, ‘OK’);}
);

1.3 有关于闭包的理解。

请看下面一段代码&＃xff1a;

(function(x){return function(y){return function(z){alert(123);return x&＃43;y&＃43;z;//结果弹出123&＃xff0c;并返回6} }
}(1)(2)(3));

这就是一个典型的闭包

定义匿名函数后立刻执行&＃xff0c;并且不会引起window属性的变化&＃xff0c;例如&＃xff1a;

for (var i&＃61;0; i<10; i&＃43;&＃43;) {alert(window.i); // window.i&＃61;10
}

换成匿名函数调用&＃xff0c;如下代码&＃xff1a;

(function(){
for (var i&＃61;0; i<10; i&＃43;&＃43;) {}
alert(window.i); // window.i &＃61; undefined
})();

这样子就不会引起window属性的增加。

1.4 Jquery 中文Api 地址&＃xff1a;

http://jquery.org.cn/jqapi

1.5 查询字符串参数

/***************************************
***********查询字符串参数****************
***************************************/
function getQueryStringArgs(){//取得查询字符串并去掉开头的问号var gs &＃61; (location.search.length > 0 ?location.search.substring(1) : ""),//substring(start,stop) 查询字符串介于两个指定下标之间的字符//保存数据的对象args &＃61; {},//取得每一项items &＃61; gs.length ? gs.split("&") : [],//split("&") 将字符串分隔成字符串数组item &＃61; null,name &＃61; null,value &＃61; null,//for循环中使用i &＃61; 0,len &＃61; items.length;//逐个将每一项添加到args对象中去for (i&＃61;0; i}
var a &＃61; getQueryStringArgs();
console.log(a);

1.6 居中显示的一些方法

• 1.6.1 宽高固定的盒子居中

  结构:

样式&＃xff1a;

/*宽高固定 居中显示核心代码*/
.sl-hvalign{position:relative}
.sl-hvslign-inner {width: 530px;height: 320px;position: absolute;top: 50%;left: 50%;margin: -160px 0 0 -265px; /* 向上偏移高度1/2 向左偏移宽度1/2 */
}

也可以使用 transform 偏移&＃xff0c;样式:

.sl-hvslign-inner{transform: translate(-50%, -50%);
}

因为使用百分比值定位&＃xff0c;参考点在盒子的中心。
宽高未知的情况下&＃xff0c;由此方法可延伸&＃xff0c;使用Javascript动态获取。

• 1.6.2 模板化居中显示&＃xff1a;(以下方法可供模板化的CSS class)

结构&＃xff1a;

样式&＃xff1a;

.sl-hvalign{display:table;overflow:hidden;margin:0 auto;height:100%;*position:relative
}
.sl-hvalign-cnt{dispaly:table-cell;vertical-align:middle;*position:absolute;top:50%
}
.sl-hvalign-cnt-inner{*position:absolute;*top:-50%
}

来自&＃xff1a;饿了么前端工程师 sofish

1.7 《Javascript 高级程序设计》的一些代码

/***************************************
***********查询字符串参数****************
***************************************/
function getQueryStringArgs(){//取得查询字符串并去掉开头的问号var gs &＃61; (location.search.length > 0 ?location.search.substring(1) : ""),//substring(start,stop) 查询字符串介于两个指定下标之间的字符//保存数据的对象args &＃61; {},//取得每一项items &＃61; gs.length ? gs.split("&") : [],//split("&") 将字符串分隔成字符串数组item &＃61; null,name &＃61; null,value &＃61; null,//for循环中使用i &＃61; 0,len &＃61; items.length;//逐个将每一项添加到args对象中去for (i&＃61;0; i}
var a &＃61; getQueryStringArgs();
console.log(a);

2 关于移动Web开发&＃xff1a;

2.1 关于PPI

　PPI全称为Pixel Per Inch&＃xff0c;译为每英寸像素取值&＃xff0c;更确切的说法应该是像素密度&＃xff0c;也就是衡量单位物理面积内拥有像素值的情况。PPI中的pixel指的应该是物理像素。
显示器上的像素我们就称之为物理像素(physical pixel)或者设备像素(device pixel)。
CSS像素从来都只是一个相对值。在高PPI的设备上&＃xff0c;CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。

.hack {background-color:red\0; /* ie 8/9*/background-color: blue\9\0; /* ie 9*/background-color: blue\9; /* ie 6、7、8*/&＃43;background-color:#CDCDCD; /* ie 6、7*/*background-color:#dddd00; /* ie 7*/_background-color:#CDCDCD; /* ie 6*/
}

3.3 html中的hack代码

除IE外都可识别











4 开发工具

4.1 相关书籍

5 前端性能与优化