前端项目积累和总结——零碎知识（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

后记：

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