CSS、javascript常用知识资料整理总结
1.正确使用DOCTYPE 声明
XHTML Strict DTD-要求严格的DTD，你不能使用任何表现层的标识和属性（交给css来表现），例如<br>；能够使html非常的干净。 HTML5 <!DOCTYPE html> /*html5的声明，简单*/ /*一下都是过渡*/
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML Transitional DTD-要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法) 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML Frameset DTD-当您希望使用框架时，请使用此 DTD！ 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> /*一般都是这种,标签内可以使用样式*/
2.完美兼容游览器清除浮动
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
3.透明效果
opacity: 0.5;/*兼容firefox,主流游览器*/ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*兼容IE，IE独有*/
参考文章：http://www.zhangxinxu.com/wordpress/?p=839
4.图片垂直居中
.ul li{float:left; width:自定义px; height:自定义px; text-align:center; line-height:自定义px; font-size:125px;}/*高度与行高一致*/
.ul li img{vertical-align:middle;}
5.文字垂直居中
①单行文字
height:3em; line-height:3em; /*使用em,高度和行高一致*/
②多行文字
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
内部span标签：
span{display:inline-block; font-size:0.1em; vertical-align:middle;}
有几点简要说明：
1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；
2.外部div不能使用浮动；
3.外部div高度和文字大小比例1.14为宜；
4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，高度比字体1.5左右的样子。
参考文章：http://www.zhangxinxu.com/wordpress/?p=61
6.IE Png图片透明
最佳方案，使用pngfix.js 插件来渲染png图片。
<!--[if IE 6]>
<script src="http://www.jsmix.com/blog/wp-content/themes/jsmix/js/pngfix.js"></script> //js地址，可以自己下载到本地引用，该js已经压缩
<script>DD_belatedPNG.fix('.J_png_fix');</script>
//记得为需要透明的png图片添加class为“J_png_fix” ，不然不会渲染png图片哦
<![endif]-->
//该方法完美解决IE6 png不透明。
一、ie6里png背景透明问题：解决办法用滤镜。这个一般高手们都知道。
注意：src 这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片的路径。这跟一般的图片加载有区别。
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片路径"); _background-image: none;
二、ie6里png背景做循环问题：用一个2px*2px的半透明图片做背景循环。解决办法加”sizingMethod=scale”。
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="图片路径"); _background-image: none;
三、ie6里不做循环的大png图片背景会出现区块被剪切，网站版面一片混乱，文字消失问题：解决办法加sizingMethod=crop。
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop,src="图片路径") _background-image: none;
四、ie6里png背景下的的连接失效：解决办法给a元素添加样式position:relative;
链接所在的层以及父级，全都不能有position，否则的话链接无效，即使relative也不行！
参考：http://www.note12.com/index.php/archives/203
7.IE系列游览器 hack 的格式
ie10
http://www.qianduan.net/ie10-css-hack.html
color:#FFF;/* FF,OP */ [;color:#0F0;]/* Sa,CH */ color:#FFF\9;/*IE6、7、8*/ *color:#FF0;/* IE7、6 */ _color:#F00;/* IE6 */
浏览器兼容代码：
|
浏览器
|
IE6 |
IE7 |
IE8 |
FF |
|
|
* |
√ |
√ |
× |
× |
|
|
!important |
× |
√ |
× |
√ |
|
|
_ |
√ |
× |
× |
× |
|
|
\9 |
× |
× |
√ |
× |
|
|
*html |
√ |
× |
× |
× |
|
|
*+html |
× |
√ |
× |
× |
版本2
select {
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/}
参考：http://www.css88.com/archives/3746
ie条件判断
<!--[if IE]> Only IE <![endif]--> 所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]--> 只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]--> 仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]--> IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]--> 仅IE7可识别
ie10不支持条件注释
//参数解析
- lte – 低于或等于
- lt – 低于
- gte – 高于或等于
- gt – 高于
- (IE6)|(IE7) – Internet Explorer 6或 Internet Explorer 7
- (IE6)&(IE7) – Internet Explorer 6 和 Internet Explorer 7
参考：http://dreamweaver.abang.com/od/divcss/a/ie-css-hack.htm
8.未知高度的图片垂直居中
该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。
HTML结构部分：
<div id="box">
<img src="images/demo.jpg" alt="" />
</div>
CSS样式部分：
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
/* 兼容标准浏览器 */
display: table-cell;
vertical-align:middle;
/* 兼容IE6/IE7 */
*display:block;
*font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
*font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */
}
#box img{
vertical-align:middle;
}
设置字体大小的方法感觉比较怪异，也没有看到一个合理的解释，只知道图片元素有一些不同于其他元素的特性，但是对于IE6/IE7来说，这个方法还是比较给力的。
9.a标签伪类的正确使用
/*demo*/
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
正确的顺序：a:link > a:visited > a:hover > a:active
参考文章：http://www.cnblogs.com/-clq/archive/2012/03/12/2391265.html
10.Webkit中textarea的设定
其一、页面输入框（input 标签）聚焦高亮。
屏蔽input聚焦高亮效果的样式：
input {outline: none;}
textarea {outline: none;}
其二、文本框（textarea 标签）缩放功能。
/*css2.0*/
textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400px;}
/*css3.0*/
texearea {resize: none;}
参考文章：http://blog.byszsz.com/archives/333.htm
11.javascript兼容浏览器的鼠标x,y获得函数
function getEventObject(W3CEvent) {//事件标准化函数
return W3CEvent || window.event;}
function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };}
//版本2
function getMousePos(e){
var e=window.event||e;
if(e.pageX||e.pageY){
return {x:e.pageX,y:e.pageY};
}
return{
x:e.clientX + document.body.scrollLeft-document.body.clientLeft,
y:e.clientY + document.body.scrollTop-document.body.clientTop
};
}
参考：http://www.wxwdesign.com/archives/javascript_drag_drop
12.javascript关于scrollLeft,scrollTop的浏览器兼容性
var ueScroll=(function(){
//获取scrollX
function scrollX(ele){
var element=ele || document.body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
}
//获取scrollY
function scrollY(ele){
var element=ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop);
}
return {
left:scrollX,
top:scrollY
}
})()
参考文章：http://www.rayteen.com/?p=634
13.javascript事件绑定
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//elem为元素，type为事件类型，fn为要执行的事件
14.javascript解除绑定事件
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}
15.iframe中进行DOM操作( 跨域操作)
function getIFrameDOM(id){ //兼容IE、Firefox的iframe DOM获取函数
return document.getElementById(id).contentDocument || document.frames[id].document;
}
DEOM http://js8.in/mywork/iframe_dom/
16.用document.domain+iframe实现Ajax跨子域
17.获取到来访者的城市地理信息
18.JavaScript 中的真假值
类型 真假值 Null 总是为假（false） Undefined 总是为假（false） Boolean 保持真假值不变 Number +0，-0 或是 NaN 的时候为假，其它值为真 String 空字符串的时候为假，其它值为真 Object 总是为真（true）
19.javascript高效简洁代码的编写及优化技巧
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5594342&reltid=1362&pre_pos=1&ext=
20.==与===的区别
=== 操作符的判断算法 在使用 === 来判断两个值是否相等的时候，如判断x===y，会首先比较两个值的类型是否相等，如果不相等的话，直接返回 false 。接着根据 x 的类型有不同的判断逻辑。 如果 x 的类型是 Undefined 或 Null，则返回 true 。 如果 x 的类型是 Number，只要 x 或 y 中有一个值为 NaN，就返回 false ；如果 x 和 y 的数字值相等，就返回 true ；如果 x 或 y 中有一个是 +0，另外一个是 -0，则返回 true 。 如果 x 的类型是 String，当 x 和 y 的字符序列完全相同时返回 true，否则返回 false 。 如果 x 的类型是 Boolean，当 x 和 y 同为 true 或 false 时返回 true，否则返回 false 。 当 x 和 y 引用相同的对象时返回 true，否则返回 false 。 == 操作符的判断算法 在使用 == 来判断两个值是否相等的时候，如判断x==y，当 x 和 y 的类型一样的时候，判断逻辑与 === 一样；如果 x 和 y 的类型不一样，== 不是简单的返回 false，而是会做一定的类型转换。 如果 x 和 y 中有一个是 null，另外一个是 undefined 的话，返回 true 。如null == undefined。 如果 x 和 y 中一个的类型是 String，另外一个的类型是 Number 的话，会将 String 类型的值转换成 Number 来比较。如3 == “3″。 如果 x 和 y 中一个的类型是 Boolean 的话，会将 Boolean 类型的值转换成 Number 来比较。如true == 1、true == “1″ 如果 x 和 y 中一个的类型是 String 或 Number，另外一个的类型是 Object 的话，会将 Object 类型的值转换成基本类型来比较。如[3,4] == “3,4″ 需要注意的是 == 操作符不一定是传递的，即从A == B, B == C并不能一定得出A == C。考虑下面的例子，var str1 = new String(”Hello”); var str2 = new String(”Hello”); str1 == “Hello”; str2 == “Hello”，但是str1 != str2。
21.匿名函数的写法
匿名函数写法一
(function(){
//do something
})();
//最常用的闭包方式
匿名函数写法二
!function(){
//do something
}();
上面!还可以写成+，!!等多种方式。
匿名函数写法三
(function(){
//do something
}());
匿名函数写法四
void function(){
//do something
}();
//也是经常用的
常用的写法为一、三。
22.使用 hasOwnProperty 过滤prototype原型上的属性
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i); // moo
}
}
23.javascript插入样式
一、页面中引入外部样式：
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.sodao.com/home/css/reset.css?v=20101227");
二、使用<style>标签插入页面样式：
这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；
function includeStyleElement(styles,styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//这里最好给ie设置下面的属性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else { //for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");
24.javascript一般建立类方式（工厂模式）
(function(){
function Circle(nRadius){
this.nR = nRadius;
}
Circle.prototype = {
PI : 3.14,
fnGetArea : function(){
return this.PI * this.nR * this.nR;
}
}
var c1 = new Circle(5);
alert(c1.fnGetArea()); //78.5
})();
25.继承（浅拷贝）
function LightCopy(p) {
var c = {};
for (var i in p) {
c = p;
}
//c.uber = p;
return c;
}
26.继承（深拷贝）
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p === 'object') {
c = (p.constructor === Array) ? [] : {};
deepCopy(p, c);
} else {
c = p;
}
}
return c;
}
事件支持
ie游览器的各个版本支持回车的事件 =======以下为电脑上的ie测试 ie6 keydown keypress ---------------------- ie7 keydown keypress ---------------------- ie8 keydown keypress ---------------------- ie9 keydown keypress ======以下为IE Tester 工具下测试的 ie6 keypress --------------------- ie7 都不支持 ---------------------- ie8 都不支持 ---------------------- ie9 keypress ====360游览器5.0（电脑下测试） keydown keypress =====谷歌游览器 keydown keypress =====火狐 keyup keypress keydown keypress 2次keypress，不知道神马情况。。。 ======opera keydown keypress ======Safari（苹果） keydown keypress
没整理完毕。。。待续
