说明（2017.3.28）：

1. JavaScript是一种基于对象的多范式编程语言，不是面向对象，但离开对象不能活。

　　范式编程是指编程习惯、方式，分为过程式、对象式和函数式编程。

2. 面向对象是指，使用对象进行开发，面向对象是对面向过程的封装。

3. JavaScript面向对象的三个特点，抽象性、继承性和封装性。

　　抽象性是指，抽取出核心属性和方法，不在特定条件下不能确定对象的具体意义。

　　继承性是指，把我没有的属性和方法拿来使用，并变成自己的属性和方法。

　　封装性是指，把方法和属性打包成一个对象。

4. JavaScript的对象就是键值对的集合。

　　键值是数据（基本数据，复合数据，空数据），就叫属性。

　　键值是函数，就叫方法。

5. 例子是在body里面添加一个div并设置样式。

　　第一次，采用过程的方法，先添加div，再分别设置样式。

　　第二次，采用面向对象的方法，把创建出来的div作为一个属性DOM，添加div到body作为方法appendTo()，设置样式作为方法css()。

　　第三次，将css()的参数设置为json格式对象，只要调用一次css()方法就可以了。

　　第四次，每个方法最后返回this，实现像jquery一样的链式编程。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 </body>

 <script type="text/javascript">

     // 画一个div框

     // 过程的方法

     // var divTag = document.createElement("div");

     // divTag.style.border = "1px solid red";

     // divTag.style.width = "200px";

     // divTag.style.height = "100px";

     // divTag.style.backgroundColor = "pink";

     // document.body.appendChild(divTag);

     // 面向对象的方法

     var DivTag = function(){

         this.DOM = document.createElement("div")

         this.appendTo = function(){

             document.body.appendChild(this.DOM)

             return this;

         };

         // 注意，此处for in循环对于json来说，i是键名，而不是索引

         this.css = function(option){

             for(var i in option){

                 this.DOM.style[i] = option[i];

             }

             return this;

             // this.DOM.style[name] = value;

         };

     };

     var divTag = new DivTag();

     divTag.appendTo();

     divTag.css({border:"1px dotted blue",width:"100px",height:"100px"});

     divTag.appendTo().css({border:"3px dotted yellow",width:"100px",height:"100px"});

     // divTag.css("border","1px solid red");

     // divTag.css("width","200px");

     // divTag.css("height","200px");

 </script>

 </html>

JavaScript高级 面向对象（1）--添加一个div标签的更多相关文章

  1. JavaScript高级 面向对象（5）--内存逻辑图画法

    说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...

  2. 使用yii的layout，加入<?php echo $content; ?>这句话时，它会自动在子页面上面添加一个div包裹

    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...

  3. JavaScript高级 面向对象（10）--onload与jq中ready的区别

    说明(2017.4.2): 1. 在body中放一个img标签,src链接一张图片,那么页面会先读取html的document文档,然后再读取外部资源(这里没加onload其实就是从上往下顺序读取). ...

  4. JavaScript高级 面向对象（8）--浅拷贝代码实现

    说明(2017.3.31): 1. 浅拷贝,只有值属性,没有引用属性. 2. 在原对象里面添加一个copy方法,返回本对象内的所有值属性. <!DOCTYPE html> <html ...

  5. JavaScript高级 面向对象的程序设计 （一）《JavaScript高级程序设计（第三版）》

    创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...

  6. JavaScript高级 面向对象的程序设计 （二）《JavaScript高级程序设计（第三版）》

    二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...

  7. JavaScript高级 面向对象（13）--构造函数的执行过程

    说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...

  8. JavaScript高级 面向对象（11）--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

  9. JavaScript高级 面向对象（9）--深拷贝代码实现

    说明(2017.4.1): 1. 深拷贝要把对象里的“方法”也复制一份出来,“方法”里的“方法和属性”再判断深浅进行拷贝. 2. 办法就是写一个函数deepCopy,里面判断深浅拷贝,然后每个对象都添 ...

随机推荐

  1. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  2. Python之L.pop()和del L[i]

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之L.pop()和del L[i] #http://python.jobbole.com/826 ...

  3. 触发器学习笔记(:new，:old用法)

    触发器学习笔记(:new,:old用法) 触发器是数据库发生某个操作时自动运行的一类的程序         用于保持数据的完整性或记录数据库操作信息方面         触发器不能够被直接调用,只能够 ...

  4. Opcode查看利器之vld

    简介 在PHP的生命周期中 词法分析(zend_language_scanner),将PHP代码转换为语言片段(Tokens) 语法分析(zend_language_parser)将Tokens转换成 ...

  5. PHP-Open Flash Chart报表生成

    下载: http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 安装: 解压ZIP包, 将open-flash-chart.s ...

  6. 【php】基础学习1

    其中包括php基础.字符串和正则表达式的学习.具体如下: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta h ...

  7. DBA_实践指南系列5_Oracle Erp R12日常运维和管理（案例）

    2013-12-05 Created By BaoXinjian

  8. linux下安装nginx和配置

    1.系统:centos6.8 2.安装准备: 安装nginx前,我们首先要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件,可通过如图所示命令进 ...

  9. Python 元组 tuple() 方法

    描述 Python 元组 tuple() 方法用于将可迭代对象(字符串.列表.元祖.字典)转换为元组. 语法 tuple() 方法语法: tuple(iterable) 参数 iterable -- ...

  10. Spring注解 强大了个强大--详解注解方式

    好文章:http://tonyaction.blog.51cto.com/227462/83874/ http://www.ibm.com/developerworks/cn/java/j-lo-sp ...