js面向对象的特点：

继承(inheritance)：对象方法和属性的继承

多态(polymorphism)：组件开发

抽象(abstract)：抓住核心问题

封装(encapsulation)：把功能写出方法

面向过程式切换面板实现：

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title>切换面板</title>

        <style>

            #div1 input {

                background: white;

            }

            #div1 input.active {

                background: yellow;

            }

            #div1 div {

                width: 200px;

                height: 200px;

                background: #CCC;

                display: none;

            }

        </style>

        <script>

            window.onload = function() {

                var div = document.getElementById('div1');

                var ipt = oDiv.getElementsByTagName('input');

                var divContents = oDiv.getElementsByTagName('div');

                for(var i = 0; i < aBtn.length; i++) {

                    ipt[i].index = i;

                    ipt[i].onclick = function() {

                        //隐藏所有，显示所点击面板

                        for(var i = 0; i < ipt.length; i++) {

                            ipt[i].className = ''

                            ipt[i].style.display = 'none';

                        }

                        this.className = 'active';

                        ipt[this.index].style.display = 'block';

                    };

                }

            };

        </script>

    </head>

    <body>

        <div id="div1">

            <input class="active" type="button" value="aaa" />

            <input type="button" value="bbb" />

            <input type="button" value="ccc" />

            <div style="display:block;">saysomething</div>

            <div>sayHello</div>

            <div>sayGoodbye</div>

        </div>

    </body>

</html>

面向对象方法：

            window.onload = function() {

                new TabSwitch('div1');

            };

            function TabSwitch(id) {

                //将属性挂到this

                var _this = this;//注意this的改变

                var div = document.getElementById(id);

                this.ipt = div.getElementsByTagName('input');

                this.divContents = div.getElementsByTagName('div');

                for(var i = 0; i < this.ipt.length; i++) {

                    this.ipt[i].index = i;

                    this.ipt[i].onclick = function() {

                        _this.fnClick(this);

                    };

                }

            };

            //函数不嵌套，方法写入原型

            TabSwitch.prototype.fnClick = function(ref) {

                for(var i = 0; i < this.ipt.length; i++) {

                    this.ipt[i].className = ''

                    this.divContents[i].style.display = 'none';

                }

                ref.className = 'active';

                this.divContents[ref.index].style.display = 'block';

            }

js面向对象实现切换面板的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  3. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  4. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  5. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

  6. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  8. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  9. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

随机推荐

  1. JavaScript中的confirm的用法

    confirm()方法用于显示一个带有指定消息和ok以及取消按钮的对话框confirm(message,ok,cancel); message:表示在弹出框的对话框中现实的文本信息如果用户点击确定按钮 ...

  2. jfinal excel表导出

    在自己的WEB项目中要用到导出Excel,所以结合网络上的资源写了一个自己的export 工具类. 说明: JFinal 环境 WEB项目 JAVA后台生成非JS插件 好了,直接撸代码 1.设置文件保 ...

  3. Java中json前后端日期传递处理

    这里推荐2种方式 依赖包 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifa ...

  4. shell基础及变量符号

    kernel主要的功能: 1.内存的管理 2.设备驱动程序 3.文件系统的管理 4.进程的管理 5.网络系统   vim /etc/profile.d/ profile(主配置文件) .d(子配置文件 ...

  5. 火狐IE event和target的兼容

    一.event对象 IE 中可以直接使用 window.event 对象,而 FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.c ...

  6. 关于poi的坑

    背景故事 今天遇上一个坑,关于poi公式计算结果出错的问题,自己打断点debug了半天,虽然没彻底搞清楚为啥不行,但所幸找到了解决办法. 干货 下面不废话,直接贴干货,原先的公式处理代码如下: fin ...

  7. ECMAScript 6入门扩展笔记

    字符串扩展 Unicode相关补充 引入"\u{xx}"来表示码点,之前只能表示\u0000-\uffff引入String.fromCodePoint()能正确读取大于uFFFF的 ...

  8. hihocoder1015 kmp算法

    #1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...

  9. Word 2013发布博客测试

    Hello world ! I am from word2013! 测试修改 这里添加一行文字.   参考 1在 Word 中建立博客的相关帮助 2使用Word2013发布随笔到博客园 PS: 参考2 ...

  10. greenplum-时间处理

    工作中遇到,需要改变两周以前的数据状态,于是查了下资料,原来数据库直接就可以处理,所以分享给大家! 在PostgreSQL中可以直接对时间进行加减运算:. SELECT now()::timestam ...