zoukankan      html  css  js  c++  java
  • 用原型封装一个操作DOM的例子

     <script>
        // 一句话 在构造函数里面写属性  在原型里面写方法
            function Elem(d){
                this.even=document.getElementById(d);
            }
            Elem.prototype.html=function(val){  
                  var e = this.even;
                  if(val){
                    e.innerHTML=val;
                    return this; // 链式操作 返回整个这个Elem.prototype.html整体 ,不写这个return 就不能进行链式操作
                  }else{
                    return e.innerHTML;
                  }
            }
           Elem.prototype.on=function(type,fn){
                var e = this.even;
                e.addEventListener(type,fn);  
                return this;//同理 也是为了能够继续链式操作
           }
            var box = new Elem('page-info');
           // box.html('123')
           //  box.on('click',function(){
           //      alert('test')
           //  })
     // 上面注释部分的链式操作
     // box.html('123').on('click',function(){ alert('test')})
     box.html('123').on('click',function(){ alert('test')}).html('从123变成456')
        </script>

     字面量形式的原型不需要加function

      var   vehicle  = function(){
           this.door=4;
      }
      vehicle.prototype ={
          getName: function(){
              return 'vehicle'
          },
          getInfo: function(){
              return [
                  this.getName(),'has',this.door,'doors'
              ].join(',')
          }
      }
      var vehicle = new vehicle();
      console.log(vehicle.getInfo()) // vehicle,has,4,doors
  • 相关阅读:
    Spring4+SpringMVC+MyBatis登录注册详细
    Spring MVC登录注册以及转换json数据
    MyBatis+mysql查询和添加数据
    html5中的选择器
    倒影(转)
    bi包
    函数作用域
    节点开始
    window.onload中失效的问题
    Node.js简介
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7453147.html
Copyright © 2011-2022 走看看