zoukankan      html  css  js  c++  java
  • 如何用js造轮子

    写了一个非常通俗易懂的造轮子的方法

    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    function cake($c) {
        this.c = $c;
        this.init();
    }
    cake.prototype = {                                                       // 也可以var p = cake.prototype,后边都是p.init=function(){}; p.w1=function(){}
      constructor: cake, init:
    function() { this.w1(); this.w2(); this.w3(); }, w1: function() { this.c.css('width', '200'); }, w2: function() { this.c.css('height', '200'); }, w3: function() { this.c.css('border', '1px solid red'); } } $('.wrap').each(function() { new cake($(this)); })

     补充一个

    .active {
        color:red;
    }
    <button class="btn">cilck</button>
    <p class="active">aaaaaa</p> <script src="js/main.js"></script> <script> let line = new Line(); </script>

    main.js

    class Line {
        constructor () {
            this.btn = this.$('.btn');
            this.pTxt = this.$('p');
            this.init();
        }
        init () {
            this.btnEvent();
    
        }
        // 选择器
        $ (select) {
            return document.querySelector(select);
        }
    
        // btn点击事件
        btnEvent () {
            /*this.btn.addEventListener('click', e => {
                e.preventDefault();
                this.pTxt.innerHTML = 'bbbbbbbbb'
            });*/
            this.btn.addEventListener('click', function(e) {
                e.preventDefault();
                this.pTxt.classList.toggle('active');
            }.bind(this));
        }
    }

      

  • 相关阅读:
    ElasticSearch6学习(1)-安装Elasticsearch
    Ubuntu 18.04 安装java8
    windows10 php7安装mongodb 扩展
    https加密解密过程详解
    Beanstalkd,zeromq,rabbitmq的区别
    PHP中的++和--
    win10 git bash 闪退
    谈下WebSocket介绍,与Socket的区别
    Bridge桥接模式(结构型模式)
    Apater适配器模式(结构型模式)
  • 原文地址:https://www.cnblogs.com/futai/p/6640595.html
Copyright © 2011-2022 走看看