JavaScript 原生实现 jQuery 的方法

栏目: jQuery · 发布时间: 7年前

内容简介:提供 jQuery 中的 $()、siblings()、addClass()、hasClass()、removeClass()、toggleClass() 等方法的原生 JavaScript 实现方法,以下方法适用于 Vue.js 项目个人强烈推荐,既然用了 Vue.js 来做项目的话,不要去引用 jQuery,因为 jQuery 能实现的功能,在 Vue.js 的项目一定能找到对应的解决方案。但是有人就说了,我就是想用 jQuery 中的某些方法,然鹅 Vue.js 却找不到对应的 API 或者根本不知道

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

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

查看所有标签

猜你喜欢:

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

程序设计语言

程序设计语言

斯科特 / 裘宗燕 / 电子工业出版社 / 2005-1 / 88.00元

这是一本很有特色的教材,其核心是讨论程序设计语言的工作原理和技术。本书融合了传统的程序设计语言教科书和编译教科书的有关知识,并增加了一些有关汇编层体系结构的材料,以满足没学过计算机组织的学生们的需要。书中通过各种语言的例子,阐释了程序设计语言的重要基础概念,讨论了各种概念之间的关系,解释了语言中许多结构的形成和发展过程,以及它们演化为今天这种形式的根源。书中还详细讨论了编译器的工作方式和工作过程,......一起来看看 《程序设计语言》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具