js的面向对象（实现鼠标移入移出右下角出现备注）

刚刚接触js的面向对象思想，小试身手的写了个dome，实现鼠标移入移出，鼠标右下角出现备注的功能！

我引入的是jquery-1.9.1.min.js文件

第一步：创建html页面 选项卡.html

第二步：js构建页面 configure.js文件

var jsonArray = [
		 {name:"点击1",divid:"div1",messagename:"消息1",messageid:"message1"},
		 {name:"点击2",divid:"div2",messagename:"消息2",messageid:"message2"},
		 {name:"点击3",divid:"div3",messagename:"消息3",messageid:"message3"},
		 {name:"点击4",divid:"div4",messagename:"消息4",messageid:"message4"}
		]
function initdiv(){		
	for(var i=0;i'+json.name+'

'; html += '

'+json.messagename+'

'; $("#main").append(html); } new Tabswitch('main'); }这是通过json数据构建的html页面

第三步：css实现布局 maincss.css文件

.divclass{width: 50px;	height: 20px;border: 1px solid;	float: left;}
.selectdivclass{width: 50px; background:#CCC; height: 20px;border: 1px solid;	float: left;}
.mainclass{width: 100%;height: 50px;}
.meaageclass{background:#FFEC8B;display: none;width: 50px;height: 20px; border: 1px solid;position:absolute;}

第四步：js实现效果（核心部分）mouse.js文件

	Tabswitch = function(divobj){
		var _this = this;
		var div=document.getElementById(divobj);
		this.divArray = div.getElementsByTagName('div');
		for(var i=0;i

第五步：效果如图

只是一个简单的js面向对象思想写的小dome，希望对大家有帮助！（个人认为写的很详细了）。