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));
        }
    }

      

  • 相关阅读:
    网络兼职轻松赚
    微信H5支付demo
    支付宝H5支付demo
    笔记本安装SSD固态硬盘详细的优化设置
    JQuery的AJAX
    第二次面试
    存储过程的总结
    SQl数据操作和查询
    面对考试毫无畏惧的SSH
    掷骰子-IOS新手项目练习(抱歉,由于个人原因,图片没显示,要源码的项目私聊)
  • 原文地址:https://www.cnblogs.com/futai/p/6640595.html
Copyright © 2011-2022 走看看