以选项卡的故事扯扯js面向对象

在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说。

以“貌”说这货

外貌——还好,长得挺帅

(自己理解的)选项卡:就是通过点击头部切换内容的货。

怎么得到这货

html代码

<div id="div1">
        <input type="button" value="出国" class="active">
        <input type="button" value="留学">
        <input type="button" value="旅游">
        <div style=‘display: block‘>123</div>
        <div>456</div>
        <div>789</div>
    </div> 

css代码

#div1 div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            display: none;
        }
        .active {
            background: orange;
        }

js代码

入门

window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var aBtn=oDiv.getElementsByTagName(‘input‘);
    var aDiv=oDiv.getElementsByTagName(‘div‘);

    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].className=‘‘;
                aDiv[i].style.display=‘none‘;
            }
            this.className=‘active‘;
            //alert(this.index);
            aDiv[this.index].style.display=‘block‘;
        };
    }
};

面向对象

 window.onload = function (){
                new tab(‘div1‘);
            }

用原型实现

function tab(id)
{
    var oDiv = document.getElementById(id);
    this.aBtn = oDiv.getElementsTagName(‘input‘);
    this.aDiv = oDiv.getElemetsTagName(‘div‘);

    var _this = this;
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].index = i;
        this.aDiv[i].addEventListener(‘click‘,function(){
            _this.tabSwitch(this);
        },false)
    }
}

tab.prototype.tabSwitch = function (oBtn){
    for(var i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].className = ‘‘;
        this.aDiv[i].style.display = ‘none‘;
    }
    oBtn.className = ‘avtive‘;
    this.aDiv[oBtn.index].style.display = ‘block‘;
}

用ES6引进的类class实现

class tab {
                constructor(id) {
                   var oDiv = document.getElementById(id);
                    this.aBtn = oDiv.getElementsByTagName(‘input‘);
                    this.aDiv = oDiv.getElementsByTagName(‘div‘);

                    var _this = this;
                    for (var i = 0; i < this.aBtn.length; i++) {
                        this.aBtn[i].index = i;
                        this.aBtn[i].addEventListener(‘click‘, function () {
                            _this.tabSwitch(this);
                        }, false)
                    }
                }
                tabSwitch(oBtn) {
                    for (var 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‘;
                }
            }

关于面向对象(自己的理解)

1.何为对象?

对象,就是拥有属性和方法的集合。

2.何为面向对象?

根据面向对象的三大特征:

多态:多种状态;

封装:把功能封装成工具,不用过多的理会怎么实现的,会使用就行;

继承:跟css继承性类似,继承父的属性和方法。

3.js里的面对对象与Java中的面对对象的区别

js是基于原型的面对对象,而Java是类的面向对象

4.怎么理解js里的原型?

原型可以用css里class去类似理解,就是一组元素通过原型实现相同属性、方法的。

  1. 用原型写面向对象

    function User(name, pass)
    {
        this.name=name;
        this.pass=pass;
    };
    
    User.prototype.showName=function()
    {
        alert(this.name);
    }
    User.prototype.showPass=function(){
        alert(this.pass);
    }
    
    function VipUser(name, pass, level){
        User.call(this, name, pass);
    
        this.level = level;
    }
    VipUser.prototype=new User();
    VipUser.prototype.constructor=VipUser;
    /*for(var i in User.prototype)
    {
        VipUser[i].prototype = User[i].prototype;
    }*/
    VipUser.prototype.showLevel=function(){
        alert(this.level);
    };

    用类写面向对象

    class person
    {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    showName(){
        alert(this.name);
    }
    showAge(){
        alert(this.age);
    }
    }
    class vip extends person
    {
    constructor(name,age,sex) {
        super(name, age);
        this.sex = sex;
    }
    showSex(){
        alert(this.sex);
    }
    }

原文地址:https://www.cnblogs.com/Jomsou/p/9161803.html

时间: 2024-11-06 22:43:24

以选项卡的故事扯扯js面向对象的相关文章

js面向对象+一般方法的选项卡

<!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-

原生js面向对象编程-选项卡(点击)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向对象选项卡(点击)</title> <style> #div1 div{ width:400px; height:300px; border:1px solid #ccc; overflow: hidden; display: non

原生js面向对象编程-选项卡(自动轮播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向对象编程-选项卡(自动轮播)</title> <style> #div1 div{ width:400px; height:300px; border:1px solid #ccc; overflow: hidden; display

由几道JS笔试题引发的知识点探究十五——JS面向对象编程

JS初学者大都没有认识到其强大的面向对象编程的特性,只是把JS当作一门简单实用的脚本语言来用.也正因如此,JS程序员往往处于程序员鄙视链的最低端,很多人觉得JS是HTML一类的语言,甚至连语言都称不上.事实完全不是如此,你若也有这种想法,说明你对JS的认识太浅薄了.要想正真迈入JS的大门,你必须深入了解JS面向对象编程的特性.下面就让我为大家一一道来. 一.创建对象 既然是面向对象,那肯定先得有对象吧,要有对象,肯定得知道对象是什么吧,那JS中的对象是什么呢?在C++里我们知道,对象就是类或结构

随便扯扯,程序员应该具备哪些素质

趁着这几天无事,好好总结一下从事软件开发以来的一些想法,这篇blog尝试从我自身的一些经历来谈谈程序员应该具备哪些素质.如有不足之处,还请不吝赐教! 下面,我将列出并展开所有我认为程序员必须具备的素质. 基础知识 你也许是像我一样的自学者,没有数电/模电,编译原理,操作系统原理,网络与数据库等方面的知识,但是对于这些你应该尝试去了解.理解.当初跨专业考研之时学习的操作系统/网络/数据结构/数据库的知识于我现在的工作仍然有益,我有遇到过一些能力很强的人,他们做解决方案很强,但是debug能力说实话

【随便扯扯】Standby到底翻译成备用还是待机?

最近在翻译VMware VSAN的一本书,术语用词我以官方中文版客户端软件为准.可是,问题出现了,同一个英文表述在不同的中文版客户端软件中,甚至同一个客户端软件中都翻译的不一样. 比如Standby到底应该翻译成备用还是待机?     Web Client英文版里面是这样的:     到了中文版中同样的界面,3个Standby居然在一个页面里面就有2个不同的翻译了. 让我们再到中文版vSphere Client中去看看:    vSwitch配置过程中的Standby Adapter翻译为待机适

js面向对象的系列

在面向对象语言中如java,C#如何定义一个对象,通常是定义一个类,然后在类中定义属性,然后通过new 关键字来实例化这个类,我们知道面向对象有三个特点,继承.多态和封装.那么问题来了,在javaScript中如何定义一个类?在javaScript中如何定义类的属性?如何继承?带着这些问题开始我们的js面向对象之旅吧. 在js中如何定义类? js中是没有类的概念的,但是我们通常会用一个函数定义成一个类.funtion class1(){ //类的成员定义 } 这里class1既是一个函数也是一个

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象程序设置——创建对象

<script type="text/javascript">            //工厂方式        //1.原始方式        /* var objCar=new Object();        objCar.name="劳斯莱斯";        objCar.color="blue";        objCar.showColor = function() {          alert(this.colo

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1