<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选择框

    前面介绍了两种文本输入框的用法,不过实际应用很少需要用户亲自文字,而是在界面上列出几个选项,让用户勾勾点点完成选择,这样既方便也不容易弄错.依据选择的唯一性,可将选项控件分为两类:一类是在方框中打勾的 ...

  2. python3 最基础

    python 2乱码,源码混了,代码重复,ascii码 一个字节表示 显示中文 只有英文 python 3 utf-8 三个字节 表示中文 int 整型 str 字符串 类型 bool 布尔值 Tru ...

  3. Governing sand(主席树/贪心)(2019牛客暑期多校训练营(第七场))

    示例:输入:25 1 11 10 125 1 23 2 3输出:12 题意:n种树,第i种树有P[i]颗,砍掉每颗树的代价是C[i], 高度是H[i].需要用最小的花费砍掉一些树,让最高的树超过一半. ...

  4. epoll_ctl函数的使用

    #include <sys/epoll.h> int epoll_ctl(int epfd, int op, int fd, struct epoll_event *event);作用: ...

  5. M-SOLUTIONS Programming Contest

    A.(n-2)*180 #include<cstdio> #include<cstring> #include<iostream> #include<algo ...

  6. Python中logging快速上手教程

    本文使用得日志需要导入logging模块和logging.handlers模块,即 import logging import logging.handlers ''' author = " ...

  7. C# vb .net实现不透明度调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的不透明度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  8. Java调用Http/Https接口(1)--编写服务端

    Http接口输入的数据一般是键值对或json数据,返回的一般是json数据.本系列文章主要介绍Java调用Http接口的各种方法,本文主要介绍服务端的编写,方便后续文章里的客户端的调用.文中所使用到的 ...

  9. docker第一章--介绍和安装

  10. 【转载】Javascript使用Math.random()随机数函数生成1至1000的随机数

    在Javascript代码编写过程中,有时候我们需要使用Js来生成随机数,清除ajax的get请求缓存的时候我们会带上一个随机数来解决此问题,此外在其他应用中也可能使用到随机数,在Javascript ...