说明（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. wordpress调用函数大全

    WordPress模板基本文件 style.css 样式表文件 index.php 主页文件 single.php 日志单页文件 page.php 页面文件 archvie.php 分类和日期存档页文 ...

  2. DevExpress.XtraLayout.LayoutControl 动态添加控件

    // Create an item within a specified group,// bound to a specified data field with the specified edi ...

  3. spring cloud单点登录

    概述 基于springcloud的单点登录服务及基于zuul的网关服务(解决了通过zuul转发到认证服务之后session丢失问题) 详细 代码下载:http://www.demodashi.com/ ...

  4. 客户端用java api 远程操作HDFS以及远程提交MR任务(源码和异常处理)

    两个类,一个HDFS文件操作类,一个是wordcount 词数统计类,都是从网上看来的.上代码: package mapreduce; import java.io.IOException; impo ...

  5. oracle-imp导入小错filesize设置

    ***********************************************声明*************************************************** ...

  6. HDUOJ-----1066Last non-zero Digit in N!

    Last non-zero Digit in N! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  7. Lucene的索引不跨平台

    在windows上使用Lucene生成索引文件,将索引文件复制到Linux服务器上,报错"校验错误,可能是硬件问题". 所以,Lucene的跨平台只是代码跨平台,生成的索引不跨平台 ...

  8. SAP接口设计的扩展性考虑

            由于现在的系统和SAP的接口出现了几次变更,因此需要对系统进行设计改造.由于系统中和SAP交互的接口不止一处,而且也是在不同的时间段进行开发,并由不同的人员来完成的,因此我在维护升级的 ...

  9. C语言笔记本

    在此记录一些常见的C语言错误,可以当作学习C语言的笔记,需要的时候可以回过头看看. 1.关于“++” #include int main() { int a,b,cd; a=10; b=a++; c= ...

  10. android侧滑效果，SlidingMenu配置

    最近开始做点东西,需要用到android activity侧滑的效果.感觉配置起来还是有点小麻烦,总结一下以便回顾. 需要的东西: 1.SlidingMenu项目:点击打开链接 2.ActionBar ...