标签：style blog io color ar sp java div on
面向对象写法的简单小例子，也即是一个小模板，方便以后拿来参考，如果有误，请各位大神多多指点。
思想：主要给#box添加颜色和添加内容，一个方法是添加颜色，另一个方法是添加内容，然后编写的面向对象写法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> #box{ width:100px; height:100px; background:orange; } </style> <body> <div id="box"></div> </body> </html> <script> //构造函数 function MyBox(options) { //此刻option.box 指的是 box:document.getElementById(‘box‘) this.box = options.box; //每个方法最好分开来写 //切换颜色的方法 this.boxColor(); //给box添加内容 this.addSpan(); } //编写颜色的方法 MyBox.prototype.boxColor = function() { //那么在这里也就可以继承this.box 这个属性 var myBox = this.box; //这里创建一个span,这里只是演示，让我们在addSpan中也能访问到this.span this.span = document.createElement(‘span‘); var boxBlue = function() { myBox.style.background = ‘blue‘; } // 监听事件 box.addEventListener(‘click‘,boxBlue); } //添加span的方法 MyBox.prototype.addSpan = function() { var myBox = this.box; //继承下来的this.span 可以拿来这里用 var span = this.span; span.innerHTML = ‘请大神多多指教‘; myBox.appendChild(span); } //new 一个对象，然后参数又是一个对象; new MyBox({ box:document.getElementById(‘box‘) }); </script>
javascript 面向对象写法的简单小例子,方面以后参考
标签：style blog io color ar sp java div on
原文地址：http://www.cnblogs.com/zion0707/p/4101534.html
