日期:2014-05-17 浏览次数:20636 次
一、页面的生命周期: request------->加载------->展现------->销毁 JQuery应用each: $.each 遍历数组 $.each(array , function(index , item) {} ) 遍历对象 $.each(json , function(key , value) {} ) 遍历元素 $.each($(“.class”) , function(index , item) { this.val(); } ) 跳出循环 return false; ≈ break return 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.避免嵌入页面的JS JS下载过程中会阻塞其后JS的下载和渲染 嵌入JS执行过程会阻塞页面所有内容渲染,而引用JS只阻塞之后的页面渲染 浏览器会等所有样式下载完成再执行JS 2.避免频繁的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清空文字时内存不能写造成卡死