JavaScript 面向对象之选项卡

来源：互联网发布：路由器网络服务商编辑：程序博客网时间：2024/05/16 18:29

这里写图片描述

<!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><style>#div1 input {background:#CCC;}#div1 .active {background:yellow;}#div1 div {width:200px; height:200px; background:#CCC; display:none;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>window.onload=function (){    var oDiv=document.getElementById('div1');    var aBtn=oDiv.getElementsByTagName('input');    var aDiv=oDiv.getElementsByTagName('div');    var i=0;    for(i=0;i<aBtn.length;i++)    {        aBtn[i].index=i;        aBtn[i].onclick=function ()        {            for(i=0;i<aBtn.length;i++)            {                aBtn[i].className='';                aDiv[i].style.display='none';            }            this.className='active';            aDiv[this.index].style.display='block';        };    }};</script></head><body><div id="div1">    <input class="active" type="button" value="服装" />    <input type="button" value="手机" />    <input type="button" value="电脑" />    <div style="display:block;">1asdfasdfds</div>    <div>2xzcvxzcv</div>    <div>5332342345</div></div></body></html>

把面向过程的程序，改写成面向对象的形式
原则：
不能有函数套函数、但可以有全局变量
过程
onload → 构造函数
全局变量 → 属性
函数 → 方法

改错
this、事件、闭包、传参
对象与闭包
通过闭包传递this

<!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><script>function Aaa(){    var _this=this;    this.a=12;    setInterval(function (){        _this.show();    }, 1000);}Aaa.prototype.show=function (){    alert(this.a);};var obj=new Aaa();//obj.show();</script></head><body></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><script>function Bbb(){    var _this=this;    this.b=5;    document.getElementById('btn1').onclick=function ()    {        _this.show();    };}Bbb.prototype.show=function (){    alert(this.b);};window.onload=function (){    new Bbb();};</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><style>#div1 input {background:#CCC;}#div1 .active {background:yellow;}#div1 div {width:200px; height:200px; background:#CCC; display:none;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>window.onload=function (){    var oTab=new TabSwitch('div1');};function TabSwitch(id){    var oDiv=document.getElementById(id);    this.aBtn=oDiv.getElementsByTagName('input');    this.aDiv=oDiv.getElementsByTagName('div');    var i=0;    var _this=this;    for(i=0;i<this.aBtn.length;i++)    {        this.aBtn[i].index=i;        this.aBtn[i].onclick=function ()        {            _this.tab(this);        };    }}TabSwitch.prototype.tab=function (oBtn){    for(i=0;i<this.aBtn.length;i++)    {        this.aBtn[i].className='';        this.aDiv[i].style.display='none';    }    oBtn.className='active';    this.aDiv[oBtn.index].style.display='block';};</script></head><body><div id="div1">    <input class="active" type="button" value="服装" />    <input type="button" value="手机" />    <input type="button" value="电脑" />    <div style="display:block;">1asdfasdfds</div>    <div>2xzcvxzcv</div>    <div>5332342345</div></div></body></html>

参考：JavaScript 面向对象

阅读全文

0 0