zoukankan      html  css  js  c++  java
  • 使用对象,面向对象创建div的方式

    <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({
    // "200px",
    // height:"200px",
    // background:"red",
    // border:"1px solid black",
    // })
    var div = new MyDiv('这是我的div');
    div.appendTo(document.body).css({
    "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>
  • 相关阅读:
    整数数组的组合问题
    C++ 虚函数与纯虚函数 浅析
    NetBeans 8.0 连接远程服务器
    R语言画图教程之盒形图
    R语言建立回归分析,并利用VIF查看共线性问题的例子
    R语言建立回归分析,并利用VIF查看共线性问题的例子
    Python技巧—list与字符串互相转换
    Python技巧—list与字符串互相转换
    sas正则式之prxparen
    sas正则式之prxparen
  • 原文地址:https://www.cnblogs.com/wtdall/p/12077761.html
Copyright © 2011-2022 走看看