关于 this 的理解
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
window.onload = function(){
function fn(){
alert(this); //this是指wondow
}
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
alert(this); //这里指input
fn(); //这里调用fn（）的this代表window
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="提交" />
</body>
</html>
鼠标经过显示，移开粉红区块消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
li{
width: 100px;
height: 100px;
background: gray;
position: relative; //相当定位 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
float: left;
margin-right: 10px;
}
div{
width: 80px;
height: 140px;
background: pink;
position: absolute; //绝对定位 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
top: 60px;
right: 10px;
display: none;
}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var len = aLi.length;
for(var i=0;i<len;i++){
aLi[i].onmouseover = function(){
oDiv = this.getElementsByTagName('div')[0]; //this代表aLi[i] 注意书写 this.getElementsByTagName('div')[0]; 不能加document
oDiv.style.display = "block";
}
aLi[i].onmouseout = function(){
oDiv = this.getElementsByTagName('div')[0];
oDiv.style.display = "none";
}
}
}
</script>
</head>
<body>
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</body>
</html>
