JavaScript 原生实现 jQuery 的方法

提供 jQuery 中的 $()、siblings()、addClass()、hasClass()、removeClass()、toggleClass() 等方法的原生 JavaScript 实现方法,以下方法适用于 Vue.js 项目

Vue.js 不等于 jQuery

个人强烈推荐,既然用了 Vue.js 来做项目的话,不要去引用 jQuery,因为 jQuery 能实现的功能,在 Vue.js 的项目一定能找到对应的解决方案。但是有人就说了,我就是想用 jQuery 中的某些方法,然鹅 Vue.js 却找不到对应的 API 或者根本不知道它在哪里,所以下面收集了几个原生 JavaScript 实现方法仅供参考。

$()

<script>
export default {
  methods: {
    $(obj) {
      return document.querySelectorAll(obj)
    }
  }
}
</script>

siblings()

<script>
export default {
  methods: {
    siblings(elem) {
      let a = [];
      let b = elem.parentNode.children;
      for (let i = 0; i < b.length; i++) {
        if (b[i] !== elem) a.push(b[i]);
      }
      return a;
    }
  }
}

addClass()

<script>
export default {
  methods: {
    addClass(ele, cls) {
      ele.className = `${ele.className} ${cls}`;
    }
  }
}

hasClass()

<script>
export default {
  methods: {
    hasClass(ele, cls) {
      return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }
  }
}
</script>

removeClass()

<script>
export default {
  methods: {
    removeClass(ele, cls) {
      if (this.hasClass(ele, cls)) {
        let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        ele.className = ele.className.replace(reg, " ");
      }
    }
  }
}

toggleClass()

<script>
export default {
  methods: {
    toggleClass(ele, cls) {
      if (this.hasClass(ele, cls)) {
        this.removeClass(ele, cls);
      } else {
        this.addClass(ele, cls);
      }
    }
  }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

妙趣横生的算法(C++语言实现)

妙趣横生的算法(C++语言实现)

胡浩 / 清华大学出版社 / 2014-10-1 / 59.80元

《妙趣横生的算法(C++语言实现)》内容丰富,生动有趣,寓教于乐,旨在帮助读者学习数据结构和算法的相关知识,从而开阔眼界,培养编程兴趣,提高编程能力,增强求职的竞争力。如果您想提高自己对算法和数据结构的理解能力,在程序设计之路上走得更远,那么请翻开《妙趣横生的算法(C++语言实现)》,仔细研读吧,它将助您一臂之力。 《妙趣横生的算法(C++语言实现)》以通俗易懂的语言深入浅出地介绍了常用的数......一起来看看 《妙趣横生的算法(C++语言实现)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具