zoukankan      html  css  js  c++  java
  • 面向对象---中级

    面向对象的选项卡

    把面向过程的程序,改写成面向对象的形式

        原则

            -不能有函数套函数,但可以有全局变量

         过程

               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 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>
    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>
    <style>
    #div1 input {background:#CCC;}
    #div1 .active {background:yellow;}
    #div1 div {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="aaa" />
        <div style="display:block;">1asdfasdfds</div>
        <div>2xzcvxzcv</div>
        <div>5332342345</div>
    </div>
    </body>
    </html>
    面向对象选项卡

    本节知识点 

           对象和闭包

  • 相关阅读:
    凸包学习笔记
    2019ICPC南昌网络赛总结
    结对编程作业
    实验 6 :OpenDaylight 实验 ——OpenDaylight 及 Postman 实现流表下发
    实验 5:OpenFlow 协议分析和 OpenDaylight 安装
    实验 3:Mininet 实验——测量路径的损耗率
    实验 4 : Open vSwitch 实验——Mininet 中使用 OVS 命令
    第一次个人编程作业
    实验 2 :Mininet 实验 —— 拓扑的命令脚本生成
    实验 1 :Mininet 源码安装和可视化拓扑
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5572354.html
Copyright © 2011-2022 走看看