说明（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. 安装mysql 和 apache

    一. 安装apache服务器 1. 检查apache服务器是否安装 #service httpd status 2. 如提示未被识别的服务,则表明组件未安装,需手动安装 #yum install ht ...

  2. TP3.2实例化复杂模型类

    1.表名:xxf_witkey_member_oauth M方法,直接实例化对象:M('member_oauth','xxf_witkey_'[,'db_config']); 具体解析:M方法三个参数 ...

  3. Java JDBC数据库编程

    课程  Java面向对象程序设计 一.实验目的 掌握数据库编程技术 二.实验环境 1.微型计算机一台 2.WINDOWS操作系统,Java SDK,Eclipse开发环境,Microsoft SQL  ...

  4. jsp里面实现asp.net的Global文件内容。

    Global.java文件: import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import ...

  5. 【Linux】如何改变文件的属性与权限

    介绍几个常用于群组.拥有者.各种身份的权限的修改的命令,如下所示: chgrp :改变文件所属群组 chown :改变文件拥有者 chmod :改变文件的权限, SUID, SGID, SBIT等等的 ...

  6. C/S程序的一般流程和基本socket函数

    一.基于TCP协议的网络程序 下图是基于TCP协议的客户端/服务器程序的一般流程: 服务器调用socket().bind().listen()完成初始化后,调用accept()阻塞等待,处于监听端口的 ...

  7. Objective-C学习笔记（十八）——对象方法和类方法的声明，定义及调用

    在程序设计中,函数的使用无疑大大简化了代码的编写.提高代码执行的效率.降低反复代码. 所以如今我们来具体研究一下方法. 本样例还是以People类为例. (一)代码一: (1)先在People.h中声 ...

  8. Spring boot处理OPTIONS请求

    一.现象从fetch说起,用fetch构造一个POST请求. fetch('http://127.0.0.1:8000/api/login', { method: "POST", ...

  9. cocos2dx 3.1从零学习（四）——内存管理(错误案例分析)

    本篇内容文字比較较多,可是这些都是建立在前面三章写代码特别是传值的时候崩溃的基础上的.可能表达的跟正确的机制有出入,还请指正. 假设有不理解的能够联系我.大家能够讨论一下,共同学习. 首先明白一个事实 ...

  10. HDU--Elevator（水题）

    Elevator nid=24#time"> Time Limit: 1000ms   Memory limit: 32768K  有疑问?点这里^_^ 题目描写叙述 The high ...