说明（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布局之position详解

    相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在 ...

  2. JSTL fmt:formatNumber 数字、货币格式化

    <fmt:formatNumber value="12.34" pattern="#0.00" /> 12.34 保留小数点后两位数 <fmt ...

  3. HDFS架构设计

    原文:http://hadoop.apache.org/docs/r2.6.4/hadoop-project-dist/hadoop-hdfs/HdfsDesign.html 介绍 HDFS是个分布式 ...

  4. python标准日志模块logging的使用方法

    参考地址 最近写一个爬虫系统,需要用到python的日志记录模块,于是便学习了一下.python的标准库里的日志系统从Python2.3开始支持.只要import logging这个模块即可使用.如果 ...

  5. smokeping with tcpping centos 7 环境

    本次环境采用centos7,使用centos6的同学就洗洗睡吧,此外一定要做好时间同步,并且关闭防火墙以及selinux,不然安装可能会失败的哦.时间同步方式如下: yum install ntpda ...

  6. Eclipse中导入项目后js报错解决方法(转未解决问题)

    本文转自:http://blog.csdn.net/chenchunlin526/article/details/54666882 Eclipse中导入项目后js报错的原因与解决方法 在我们将项目导入 ...

  7. Java面试基础部分合集

    写在前面:这篇文章对于在Java方面已经很牛逼的大手,就没必要看了,因为对于你们来说,这tm简直太简单了.... 面试我们都经历过,你真的懂面试吗?针对面试我只想说一点,面试的目的不是让考官知道你怎么 ...

  8. Hibernate 、 Axis2发布

    1. you just compile your web-service into aar file (not include bean files), copy the aar into axis2 ...

  9. php计算经纬度间的距离

    <?php //根据经纬度计算距离 function getdistance($lng1,$lat1,$lng2,$lat2) { //将角度转为狐度 $radLat1=deg2rad($lat ...

  10. linux的cat命令

    1 描述 cat 的全称 concatenate files and print on the standard output cat命令事Linux下的一个文本输出命令. 用于链接文件并打印到标准输 ...