<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线程的等待与唤醒完整示例代码

    项目结构: 资源类: 输入线程:  输出线程: 测试: 人妖问题发生: 线程安全问题的解决方法: 调用Object的wait()和notify()方法时需注意:必须是锁对象方可调用,否则将抛出无效的监 ...

  2. Js学习04--对象

    1.如何辨别js中的对象 除了五种基本的数据类型,其他的都是对象.万物皆对象. 2.Js中对象的分类 1)内建对象 由ES标准定义的对象,在任何的ES实现中都可以使用. eg:String.Numbe ...

  3. python 操作redis集群

    一.连接redis集群 python的redis库是不支持集群操作的,推荐库:redis-py-cluster,一直在维护.还有一个rediscluster库,看GitHub上已经很久没更新了. 安装 ...

  4. FindWindow SendMessage

    FindWindow 用来根据类名和窗口名来得到窗口句柄的.但是这个函数不能查找子窗口,也不区分大小写. 如果要从一个窗口的子窗口中查找需要使用FindWindowEX. 1.在C#中使用方法如下: ...

  5. chocolatey install curl and netcat

    chocolatey install curl and netcat 软件仓库 https://chocolatey.org/packages choco install curl choco ins ...

  6. 【洛谷 P3346】 [ZJOI2015]诸神眷顾的幻想乡(后缀自动机)

    题目链接 广义sam+不同子串个数.. 找到所有入度为\(0\)的点开始\(dfs\),建出广义sam. 然后就是不同子串个数了 #include <cstdio> #include &l ...

  7. Git使用整理

    [本文由水木桶首发于博客园,原文地址:https://www.cnblogs.com/shuimutong/p/11404664.html,未接允许,严禁转载] 背景 很久之前使用的是svn,直接在E ...

  8. JavaScript对象复制

    近期项目因为怕数据污染所以用到了js的对象复制 js里的对象都是继承自object,是引用类型,所以无法通过=号复制 所以整理了一些常用的复制方法,如下 一.通过JSON序列化和反序列化创建新的对象 ...

  9. [转]数据库性能优化(老Key)

    数据库性能优化一:数据库自身优化(大数据量) https://www.cnblogs.com/AK2012/archive/2012/12/25/2012-1228.html 数据库性能优化二:数据库 ...

  10. Redis持久化小结

    RDB RDB持久化方式是通过快照(snapshotting)完成的,当符合一定条件时,Redis将内存中所有数据以二进制方式生成一份副本并存储在硬盘上. 触发机制 save命令:阻塞当前Redis服 ...