前端项目积累和总结——零碎知识（js）

继前篇《前端项目积累和总结——jQuery的extend()方法》，今篇只是简单地记录一下零碎的知识点。

积累：（四）零碎知识（js）

1. 根据屏幕分辨率设置主界面的宽和高

//根据屏幕分辨率设置主界面的宽和高var topH = window.outerHeight-window.innerHeight;//浏览器任务栏高度function loadData(){var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var h, w; //主界面的宽和高var htop = topH; //浏览器任务栏高度//判断是否IE浏览器var isOpera = userAgent.indexOf("Opera") > -1;if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {htop = topH -16;}//判断是否IE11浏览器else if(userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1){htop = topH -16;}h = window.screen.availHeight-5-htop;w = window.screen.availWidth-5;    var oMain = document.getElementsByClassName("kiob-wrap");oMain[0].style.height = h+"px";oMain[0].style.width = w+"px";}setInterval("loadData()", 100);// 每隔0.1秒调用一次（解决浏览器页面突然拖到另外一个显示屏时及时刷新）

2. window.onload()函数

由于各个管理模块有不同的window.onload()函数，如果不处理，将只会指向最后一个，前面不执行。

解决：各个管理模块中的加载函数分别起个函数名，最后统一到一个window.onload()函数中。

注意：该window.onload()函数所在js文件应该置于最后（所调用函数的js文件之后）

window.onload = function(){loadData();initSocket();log_load();  ...}

3. ajax的回调函数使用function()，使用() =>虽然在Chrome浏览器下识别，但在ie浏览器上不识别。

loadXMLDoc('/user/enum', null, function() {          ...}

4. 阻止事件冒泡

项目中有多张表格talbe，要对选中行进行操作，同时在点击页面空白处时取消选中行。此时，用到了阻止事件冒泡。

（1）点击任一行，该点击事件只执行选中行功能，不执行上层元素的click事件（取消选中行）。

// 选中行变色  $("tr", $(self)).click(function (e){e.stopPropagation();//阻止事件冒泡，不会触发上层click事件var trThis = this; $(self).find(".trfocus").removeClass('trfocus');  $(trThis).addClass('trfocus');  });  

（2）点击空白处，该点击事件只执行一次取消选中行功能，不执行上层元素的click事件（取消选中行）。

$(obj).click(function(e){e.stopPropagation();//阻止事件冒泡，不会触发上层click事件var a=$("tbody").children();for(var i=0;i<a.length;i++){if($(a[i]).hasClass("trfocus")){$(a[i]).removeClass('trfocus');}}});

5. jQuery移除属性removeAttr()，在ie浏览器下失效；可以用attr()来设置或移除属性（有时失效），但最好使用prop()。

$("#aco-check-all").prop("checked", true);//不能用attr()$("#useradd-icon").prop("onclick", "");//移除click

后记：

感觉越来越好，每一次总结都有不一样的收获，这件事很值得，继续加油！！！