<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. Delphi 10 Seattle plus 新特性——System.JSON.Builders

    { 全能中间件 —— 简单.高效.稳定.安全的三层中间件 1.支持 多账套多数据库,包括SQLite, MySQL, SQL Server, Oracle, PostgreSQL, DB2, SQL ...

  2. linux net通信 基于密钥

    配置SSHD服务 SSH(Secure Shell)是一种能够以安全的方式提供远程登录的协议,也是目前远程管理 Linux 系统的首选方式.在此之前,一般使用 FTP 或 Telnet 来进行远程登录 ...

  3. Linux进程的五个段

    目录 数据段 代码段 BSS段 堆(heap) 栈 数据段 用来存放可执行文件中已初始化的全局变量,换句话说就是存放程序静态分配的变量和全局变量: 代码段 代码段是用来存放可执行文件的操作指令,也就是 ...

  4. AX 2009中Set运用

    Set运行: 例子: Set m_set = new Set(Types::String); m_set.add("AAA"); m_set.add("BBB" ...

  5. 小程序day1-day3随笔

    0==小程序的结构和组件 1==小程序常用组件:text文本属性 3==小程序UI组件view的属性hover 鼠标点击出现的效果hover 4==小程序ui组件button按钮组件的属性 5==小程 ...

  6. grafana部署安装

    部署grafana 在prometheus& grafana server节点部署grafana服务. 1. 下载&安装 # 下载 [root@prometheus ~]# cd /u ...

  7. 在jenkins中使用shell命令推送当前主机上的docker镜像到远程的Harbor私有仓库

    1.jenkins主机上的docker配置 先在Jenkins主机的docke上配置上Harbor私有仓库地址 cat /etc/docker/daemon.json { "insecure ...

  8. HA 高可用集群概述及其原理解析

    HA 高可用集群概述及其原理解析 1. 概述 1)所谓HA(High Available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件 ...

  9. 使用eslint检查代码质量

    1.安装 全局安装 npm install eslint -g 局部安装 npm install eslint --save 2.初始化一个配置文件 eslint --init 执行后根据项目需要回答 ...

  10. SQL Server 2012使用日常

    SQL Server 2012个人使用日常(持续完善中) 1.查询筛选 2.修改数据