JavaScript 原生实现 jQuery 的方法

栏目: jQuery · 发布时间: 5个月前

来源: vxhly.github.io

本文转载自:https://vxhly.github.io/2019/01/javascript-2-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);
      }
    }
  }
}

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

为你推荐:

相关软件推荐:

查看所有标签

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

JavaScript & jQuery

JavaScript & jQuery

David Sawyer McFarland / O Reilly / 2011-10-28 / USD 39.99

You don't need programming experience to add interactive and visual effects to your web pages with JavaScript. This Missing Manual shows you how the jQuery library makes JavaScript programming fun, ea......一起来看看 《JavaScript & jQuery》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具