<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. Java开发笔记(一百二十三)AWT图像视图

    前面介绍了AWT的几种基础控件,从按钮到文本标签,从输入框到选择框,无一例外都能显示文字,唯独无法显示某张图片文件.本以为AWT会提供专门的控件来显示图片,然而偏偏没有意料之中的图像控件,这可真是弱爆 ...

  2. Python中的数据类型、变量、字符编码、输入输出、注释

    数据类型 number(数字) 用于存储类型,通常分为int.long.float.complex: int:32位机器上占32位,取值范围为-231 ~ 231 - 1:64位机器上占64位,取值范 ...

  3. JavaScript是单线程还是多线程(转)

    多线程要考虑线程之间的资源抢占,死锁,冲突之类一系列问题.JavaScript作为一门客户端脚本,貌似没有多线程的一些列问题.那么JavaScript是单线程还是多线程?通过查资料总结了JavaScr ...

  4. 缓存的设计及PHP实现LFU

    1. 恒定缓存性能有哪些因素? 命中率.缓存更新策略.缓存最大数据量. 命中率:指请求缓存次数和缓存返回正确结果次数的比例.比例越高,缓存的使用率越高,用来衡量缓存机智的好坏和效率.如果数据频繁更新, ...

  5. Delphi开发的数据库程序在C:\PDOXUSRS.NET生成文件,拒绝访问及读写权限

    Delphi开发的数据库程序在C:\PDOXUSRS.NET生成文件,拒绝访问及读写权限, "无法打开 PARADOX.NET.这个文件可以随便删除的,下次会自动产生. Permission ...

  6. Java调用WebService方法总结(6)--XFire调用WebService

    XFire是codeHaus组织提供的一个WebService开源框架,目前已被Apache的CXF所取代,已很少有人用了,这里简单记录下其调用WebService使用方法.官网现已不提供下载,可以到 ...

  7. linux识别ntfs U盘

    NTFS-3G 是一个开源的软件,可以实现 Linux.Free BSD.Mac OSX.NetBSD 和 Haiku 等操作系统中的 NTFS 读写支持 下载最新ntfs-3g源代码,编译安装 # ...

  8. HTTP协议复习三--TCP/IP的网络分层模型和OSI 网络分层模型

    TCP/IP网络分层模型 第一层叫“链接层”(link layer),负责在以太网.WiFi这样的底层网络上发送原始数据包,工 作在网卡这个层次,使用MAC地址来标记网络上的设备,所以有时候也叫MAC ...

  9. Python学习日记(四) 集合和元祖

    元祖的特性:是一个只读列表.可以循环.可以切片,修改数据遵循'儿子'不能改但'孙子'可能可以改. iterable:可迭代对象(元祖.列表.字串.集合) 元祖宣告方式: tu = (1,2,3,['a ...

  10. 写Shell脚本自动生成首行

    送给经常写shell脚本的兄弟们常写shell脚本的时候,大家一定都有困扰,怎么样能让.sh文件的表头自己生成,不用我们自己去敲呢 首先我们要编写一下/etc/vimrc执行 vim /etc/vim ...