<script>

// //对象div的创建
// var div = document.createElement("div");
// document.body.appendChild(div);
// div.style.width = "200px";
// div.style.height = "200px";
// div.style.background = "blue";
// div.style.border = "1px solid black";
// div.style.bodyRadius = "10px";
// //将代码封装成方法
// function createDiv() {
// var div = document.createElement("div");
// document.body.appendChild(div);
// div.style.width = "200px";
// div.style.height = "200px";
// div.style.background = "blue";
// div.style.border = "1px solid black";
// div.style.bodyRadius = "10px";
// }
// createDiv();
// createDiv();
//面向过程1.创建元素,2.添加元素,3.设置元素样式
//面向对象1.对象,div对象,2.对象需要完成什么功能,方法:添加到body中appendTo,设置div对象的样式css
// function MyDiv(text){
// this.DOM = document.createElement('div');
// this.DOM.innerText = text;
// //添加方法
// this.appendTo = function(node){
// node.appendChild(this.DOM);
// }
// this.css = function(option){
// for(var key in option){
// this.DOM.style[key] = option[key];
// }
// }
// }
function MyDiv(text){
this.DOM = document.createElement('div');
this.DOM.innerText = text;
}
MyDiv.prototype.appendTo = function(node){
node.appendChild(this.DOM);
return this;
}
MyDiv.prototype.css = function(option){
for(var key in option){
this.DOM.style[key] = option[key];
}
return this;
}
//使用对象
// var div1 = new MyDiv("第一个");
// div1.appendTo(document.body);
// div1.css({
// width:"200px",
// height:"200px",
// background:"red",
// border:"1px solid black",
// })
var div = new MyDiv('这是我的div');
div.appendTo(document.body).css({
width:"200px",
height:"200px",
background:"red",
border:"1px solid black",
})
</script>
<script>
//匿名函数,闭包的概述,闭包的作用
//需求:计数,
//常规
// var count = 0;
// function addCount(){
// count++;
// console.log(count);
// }addCount(5);
// addCount(5);
// addCount(5);
// addCount(5);
//打破作用域链,在外部访问函数内部的局部变量:把局部变量保持在内存中:闭包的经典写法
function addCount() {
var count = 0;
return function () {
count++;
console.log(count);
}
}
var add = addCount();
add();
add();
add();
 
//js私有化属性
function person(){
var age = 18;
return{
getAge:function(){
return age;
},
setAge:function(value){
age=value;
}
}
}
var p = person();
console.log(p.age);
console.log(p.getAge());
console.log(20,'私有化自定义属性');
</script>

使用对象,面向对象创建div的方式的更多相关文章

  1. JS面向对象编程创建类的方式

    js创建类的方式有几种,大致如下: 1,构造函数方式: function Car(parameters) { this.name = "objectboy"; } var cat1 ...

  2. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

  3. JavaScript DOM三种创建元素的方式

    三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...

  4. Java学习笔记-多线程-创建线程的方式

    创建线程 创建线程的方式: 继承java.lang.Thread 实现java.lang.Runnable接口 所有的线程对象都是Thead及其子类的实例 每个线程完成一定的任务,其实就是一段顺序执行 ...

  5. javascript 创建 div

        纯JAVASCRIPPT创建 (1):document.getElementById("要创建DIV位置的ID").innerHTML='<div>div里面的 ...

  6. 通过DIV+span方式模拟进度条的实现方法

    上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有 ...

  7. Wireshark工具创建过滤器的方式

    Wireshark工具创建过滤器的方式  [实例1-3]现在要抓取目的或来源地址为192.168.5.9的封包.在图1.5中添加如下所示的条件: tcp dst port 3128 添加后单击Star ...

  8. Java多线程学习总结--线程概述及创建线程的方式(1)

    在Java开发中,多线程是很常用的,用得好的话,可以提高程序的性能. 首先先来看一下线程和进程的区别: 1,一个应用程序就是一个进程,一个进程中有一个或多个线程.一个进程至少要有一个主线程.线程可以看 ...

  9. java中创建多线程的方式

    在java中比较常用的有三种创建多线程的方式. 方式一:继承Thread类,要重写run方法. 在MyThread类 public class MyThread extends Thread { @O ...

随机推荐

  1. c++基础(五)——关联容器

    1.关联容器 关联容器中的元素时按照关键字来保存和访问的,与之相对的,顺序容器中的元素时按它们在容器中的位置来顺序保存和访问的.两个主要关联容器是 map 和 set.标准库提供了8个关联容器,这8个 ...

  2. MVC与MTV模型

    MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...

  3. kubernetes 实践四:Pod详解

    本篇是关于k8s的Pod,主要包括Pod和容器的使用.Pod的控制和调度管理.应用配置管理等内容. Pod的定义 Pod是k8s的核心概念一直,就名字一样,是k8s中一个逻辑概念.Pod是docekr ...

  4. redis订阅与发布系统

    一.概述 1.redis通过publish.subscribe等命令实现了订阅与发布模式. 2.这个功能提供两种信息机制,分别是订阅/发布到频道和订阅/发布到模式. 二.频道的订阅与信息发送 1.re ...

  5. Java Swing 资料(转载学习)

    Swing图像界面简介:https://blog.csdn.net/xietansheng/article/details/72814531 Swing实用经验总结篇:https://blog.csd ...

  6. 【转载】C#中List集合使用RemoveRange方法移除指定索引开始的一段元素

    在C#的List集合操作中,移除集合中的元素可以使用Remove方法和RemoveAt方法,这两个方法都是进行单个List集合元素的移除,其实List集合中还有个RemoveRange方法来移除一整段 ...

  7. DML 操作表中数据

    DML 是对于表中的记录进行增删改操作 一.添加数据   语法格式: insert into 表名[字段名] values[字段值]      表名:表示往那张表中添加数据   (字段名1,字段名2, ...

  8. centOS学习part7:Oracle开机自启配置

    0 上一章(http://www.cnblogs.com/souvenir/p/3884904.html)我们用了很多时间以及很长的篇幅来介绍oracle的整个安装过程,希望对大家用所帮助.oracl ...

  9. 【cookie的使用】&【Session】

    明确一点:        cookie由服务器创建Cookie cookie=new Cookie("haha","xixi") 通过HtttpServletR ...

  10. uavcan扩展帧格式 zubax

    zubax_gnss_1.0和zubax_gnss_2.0中使用的uavcan的两种不同封装方式.都是采用扩展帧29b帧类型 zubax_gnss_1.0 我的代码:https://github.co ...