JS CSS兼容性处理

一、页面的生命周期：request------->加载------->展现------->销毁JQuery应用each:$.each遍历数组$.each(array , function(index , item) {} )遍历对象$.each(json , function(key , value) {} )遍历元素$.each($(“.class”) , function(index , item) {this.val();} )跳出循环return false;  ≈  breakreturn true;  ≈ continue$.live   事件委派适用于对还不存在的页面元素添加监听   $(“.btn”).live(“click” , function(){ … } );   $(“<button class=“btn”>确认</button>”).appendTo(“#div”);$.data  用于储存页面需要用的数据，类似于java中的Map  $(“#tmpData”).data(“state” , “addnew”);  …  if($(“#tmpData”).data(“state”) == “addnew”){ … }二、JS性能：1.避免嵌入页面的JSJS下载过程中会阻塞其后JS的下载和渲染嵌入JS执行过程会阻塞页面所有内容渲染，而引用JS只阻塞之后的页面渲染浏览器会等所有样式下载完成再执行JS2.避免频繁的DOM更新或遍历DOM结构更新浏览器会重新渲染更新处理时间 document.write > createElement() > cloneNode()使用更精确的选择器三、布局：1. 文档流将窗体自上而下分成很多行，并在每行从左到右排列元素元素类型(display)none : 隐藏并从文档流中删除（visibility: hidden 只隐藏）inline : 内联元素，只能容纳文本和其他内联元素，不换行（比如a）block : 块级元素，前后换行的容器（比如div，table）inline-block : 不换行的容器可以通过css改变元素的类型内联元素通过 vertical-align 属性设置与父元素对齐方式2.浮动(float)浮动最先为了段首下沉和文字环绕设计浮动元素仍然占用文档流（与绝对定位区别）块级元素本来独占一行，在水平方向延伸到边界，浮动以后宽度缩减到最小内容宽度一行容不下以后，右侧元素换行（寻找最靠上的可容纳空间，与内联元素之间换行不同）父元素如果只包含浮动元素，高度会塌缩为0利用clear清除浮动（left , right , both）四、兼容性： 1. IE下load子页面样式加载延迟在父页面预先引入样式文件在加载时将样式文件添加到head中2. IE6下浮动引起的bug浮动容器内元素（如图片）超过宽度时推开右侧浮动元素，设置overflow:hidden即可对浮动元素设置与浮动方向相同的magin属性时，会有双倍边距，设置display:inline即可3.IE卡死问题IE6使用AlphaImageLoader滤镜加载png图片，如果图片加载失败，页面可能卡死样式中使用死循环表达式造成卡死 _height:expression((this.clientHeight < 450)?"450px":"auto")服务器启用gzip压缩时，IE6不能正确解压造成卡死IE8下，选中TD中文字，JS清空文字时内存不能写造成卡死