js学习小结（一）2014.4.4-2014.1.8_qaxwidget 宽高-CSDN博客

本文链接：https://blog.csdn.net/danzhang1010/article/details/22956583

（我真的一点都不勤奋，说好了每天的总结每天都要当天完成，这篇文章却从节前拖到了节后。。）

1.CSS3 box-flex布局

2.DOM0级事件和DOM2级事件，跨浏览器绑定与删除事件

3.函数绑定

4.使用JS操作DOM

5.DOCUMENT对象

6.私有变量

7.模块模式

1.CSS3中新增了一个弹性盒子布局属性box-flex，其实没有浏览器支持box-flex属性，ff支持替代的-moz-box-flex，chrome、opera，safari支持替代的-webkit-box-flex。依旧是奇葩的ie，就连最新的ie11都不支持该属性，这么好用的属性就只能对ie望洋兴叹了。。。。

会接触到这个属性，还是因为阿里2013的一道笔试题，题目要求如下：

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用 css3 中的功能实现它们的布局。

使用box-flex可以轻松实现该布局。

代码如下：

<style type="text/css" >
		.parent{
			display:-moz-box;
			display:-webkit-box;
			display:box;
			width:100%;
			padding:10px;
			background-color:#FFF5E6;
		}
		.child1{
			width:200px;
			background-color:#007F5E;
		}
		.child2{
			background-color:#007F5E;
			-moz-box-flex:1;
			-webkit-box-flex:1;
			-box-flex:1;
			margin:0 10px;
		}
		.child3{
			-moz-box-flex:1;
			-webkit-box-flex:1;
			-box-flex:1;
			background-color:#007F5E;
		}
			</style>
			</head>
			<body>
				<div class="parent">
					<div class="child1">child1</div>
					<div class="child2">child2 </div>
					<div class="child3">child3</div>
				</div>
				
				
			</body>

其中蓝色的代码，就轻松实现了child2和child3的宽度相等，他们的值为1，说明他们将parent中除了child1剩下的空间按1:1进行平均分配。（有关boxflex的相关属性，参考这篇博文点击打开链接，该文章浅显易懂）

2.DOM0级事件和DOM2级事件

DOM0:将一个函数直接赋值给一个元素的事件处理程序属性（onclick，onmouseover等），这种方式的特点是简单，跨浏览器。使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这时候的事件处理程序是在元素的作用域中运行，也就是说，处理程序中的this指向该元素,删除一个DOM0级事件，只需要将aElement.οnclick=null就可以了：

var eventHandler=function(event){

alert(this.id);

};

var aElement=document.getElementById("test");

aElement.οnclick=eventHandler;

DOM2级事件：由于ie这个奇葩，所以画了下面这个表的：

DOM2级事件在IE和非IE中的比较
事件或属性	非IE	IE
事件触发的时间点	捕获或者冒泡	冒泡
事件处理程序的添加方法	addEventListener('click',handlerfunction,true/false)	attachEvent('onclick',handlerfunction)
删除事件的方法	removeEventListener('click',handlerfunction,true/false)	detachEvent（'onclick',handlerfunction）
事件处理程序中的事件对象获取	直接调用event	window.event或者直接调用event
取消冒泡的方法	event.stopPropagation()	event.cancelBubble=true;
取消元素的默认事件	event.preventDefault()	event.returnValue=false;

3.函数绑定

函数绑定就是要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。常见的方式是使用函数本来的apply和call方法实现在特定的上下文中执行该方法。该技巧常用于回调函数和事件处理程序。

将第2点的例子改成这样：

var eventHandlerObj={

message:"itis a EventInvoked",

eventHandler:function(event){

alert(this.message); //undefined

alert(event.target?event.target.id:event.srcElement.id);

}

};

aElement.οnclick=eventHandlerObj.eventHandler;

那么就要慎重考虑eventHandler中的this的指向，在这种情况下，我们明显是要this指向eventHandlerObj，而不是指向aElement,可以改成这样：

aElement.οnclick=function(){

return function(){

eventHandlerObj.eventHandler.apply(eventHandlerObj,arguments);

//将eventHandler放在eventHandlerObj的上下文中执行，同时，注意此处的arguments是内部匿名函数的arguments

};

}();

可以写一个通用的bind方法，用于绑定一个函数在特定的上下文环境中执行，在ECMAScript5中已经存在这样的方法，但是低版本的ie不支持，所以我自己写了一个bind函数。

Function.prototype.bind=function(context){

var that=this;

return function(){

that.apply(context,arguments);

};

}();

如果在支持bind属性的浏览器中，不写以上代码也可以运行。

那么注册事件的代码变成：

aElement.οnclick=eventHandlerObj.eventHandler.bind(eventHandlerObj);

4.使用Js操作DOM

会看一点Js操作DOM，也是因为阿里的一道笔试题，如下：

其实就是用js操作dom，该题主要运用到的知识点包括：

（1）element类型的节点，nodeType获取节点的类型为1，nodeName获取节点的tag标签，nodeValue获取节点的值，对于element类型的节点来说，nodeValue为null；

（2）操作节点的方法。appendChild，removeChild。此处要注意的一点就是，如果appendChild（node），如果此处的node是文档中已经存在的节点，那么将它append到别的节点之后中去之后，原来的父节点中的childNodes的节点自动就发生了改变，如果这时再removeChild（原来的node），那么就会报错。所以也就是为什么没有做remove，只做了append。

自己做了一个答案，简单记录一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script src="../js/JSEvent.js"></script>
		<style>
		ul{
			font-size:10px;
			list-style:none;
			display: table;
		}
		img{
			width:50px;
			height: 40px;
		}
		ul li{
			float:left;
			margin-left:3px;
			width:50px;
			height:60px;
			line-height:50px;
			display: table-cell;
			position:relative;
			text-align:center;
			
		}
		.iconBack{
			z-index: 2;
			position:absolute;
			right:0px;
			top:0px;
		}
		.iconBefore{
			width:11px;
			height:11px;
			z-index:3;
			position:absolute;
			right:0px;
			top:0px;
		}
		.describeText{
			display:block;
			position: absolute;
			bottom: 0px;
			left:0px;
			text-align:center;
			line-height:10px;
			width: 100%;
			
		}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="adddiv">
			<h1>items added</h1>
			
			<ul id="addUl">
				<li>
					<img class='iconBack' src="../images/form1.png" />
					<a class="deleteItemButton"><img class='iconBefore' src="../images/02.gif"></a>
					<span class="describeText">Item1</span>
				</li>
				<li>
					<img class='iconBack' src="../images/form2.png" />
					<a class="deleteItemButton"><img class='iconBefore' src="../images/02.gif"></a>
					<span class="describeText">Item2</span>
					
				</li>
				<li>
					<img class='iconBack' src="../images/form3.png" />
					<a class="deleteItemButton"><img class='iconBefore' src="../images/02.gif"></a>
					<span class="describeText">Item3</span>
					
				</li>
				<li>
					<img class='iconBack' src="../images/form4.png" />
					<a class="deleteItemButton"><img class='iconBefore' src="../images/02.gif"></a>
						<span class="describeText">Item4</span>
					
				</li>
			</ul>
			</div>
			<div id="morediv">
			<h1>more option</h1>
			
			<ul id="moreUl">
				<li>
					<img class='iconBack' src="../images/form5.png" />
					<a class="addItemButton"><img class='iconBefore' src="../images/01.gif"></a>
					<span class="describeText">Item5</span>
					
				</li>
				<li>
					<img class='iconBack' src="../images/form6.png" />
					<a class="addItemButton"><img class='iconBefore' src="../images/01.gif"></a>
					<span class="describeText">Item6</span>
					
				</li>
				<li>
					<img class='iconBack' src="../images/form7.png" />
					<a class="addItemButton"><img class='iconBefore' src="../images/01.gif"></a>
					<span class="describeText">Item7</span>
					
				</li>
				<li>
					<img class='iconBack' src="../images/form8.png" />
					<a class="addItemButton"><img class='iconBefore' src="../images/01.gif"></a>
					<span class="describeText">Item8</span>
					
				</li>
			</ul>
		</div>
		</div>

	</body>
	<script>
		(function(){
			var as=document.getElementsByTagName('a');
			var addul=document.getElementById('addUl');
			var moreul=document.getElementById('moreUl');
			for(var i=0,len=as.length;i<len;i++){
				as[i].οnclick=function(event){
					//alert(this.className);
					var classOfA=this.className;//获取元素的class属性值，p.className='pselected';  给元素的class赋值
					var parentli=this.parentNode;						
						var childrenofA=this.childNodes;
						var img;
						for(var i=0,len=childrenofA.length;i<len;i++){
							var child=childrenofA[i];
							if(child.nodeType=='1'&&child.nodeName=='IMG'){//注意此处是IMG，not  img
								img=child;
								break;
							}
						}
					if(classOfA!=null&&classOfA=='deleteItemButton'){//说明是删除的a标签，						
						img.src="../images/01.gif";
						this.className='addItemButton';
						//moreul.appendChild(parentli);//使用appendChild将该文档中已存在的一个节点移动到另一个节点下，结果就是该节点从原来的位置转移到新位置，因此再调用removeChild会导致原来的父节点找不到该节点而报错
						//addul.removeChild(parentli);
						var tnode=	addul.removeChild(parentli);
						moreul.appendChild(tnode);
											
					}
					if(classOfA!=null&&classOfA=='addItemButton'){//说明是增加的a便签
						img.src="../images/02.gif";
						this.className='deleteItemButton';
						addul.appendChild(parentli);
						//moreul.removeChild(parentli);
					}
					//var event=EventUtil.getEvent();
				};
				
			}
		})();
	</script>
</html>

用到了一下图片资源：

5.Document对象

很重要的一个对象，nodeType为9，nodeName为“#document”。主要有以下六个主要功能：

(1)获取特殊的节点。指向<html></html>标签的属性，document.documentElement.

指向<body></body>标签的属性，document.body

指向<DOCTYPE>标签的属性，document.doctype

(2)页面的url信息。获取完整的url document.url

获取域名 document.domain

获取链接到这个页面的前一个页面。 document.referrer

(3)查找特定的元素的方法。document.getElementById('')//除了ie8及以下不区分大小写以外，其余的参数都区分大小写

document.getElementsByTagName('');//通过tag标签名来获取元素

(4)获取特殊的集合。document.anchors//获取的是页面中所有有name特性的a标签

document.images;//获取页面中所有的图片元素

document.href;//获取页面在所有有href特性的a标签

document.forms;//获取页面中所有的form

(5)检测一致性。//我其实搞不太懂，这个的作用

document.implemention.hasFeature();

(6)写方法。document.write();document.writeln();//注意这个方法调用的位置，如果是在页面的最后调用这个方法，会重写整个页面。

6.私有变量

严格的说，js中并没有私有变量这一说法，所有对象的属性都是共有的。不过，在函数内部定义的局部变量，函数参数，以及在函数内部定义的其他函数，应该都是私有的，因为从外部都不能访问它们。但是很多时候有这种情况，就是我们需要提供一个公共接口给外部访问我们的私有变量，这个借口可以只提供写方法，也可以只提供读方法，或者都系。这个时候我们就可以使用闭包，延长作用域链，访问私有变量或者方法。可以用js模仿类似于java中private修饰的变量或者方法。在js中，我们把能够访问私有变量或函数的公有方法叫特权方法。写一个例子。