本文共 1413 字，大约阅读时间需要 4 分钟。

写在开头

本文将带你深入理解ES6 介绍怎样在es6中自定义封装 jQuery

后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！

如果想更多了解ES6，请参考之前写过的一些文章：

了解jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

下面的代码你是否比较熟悉呢？

$(document).ready(function(){
     $("p").click(function(){
       $(this).hide();  });});

$(‘.div’).addClass();$(‘#div’).removeClass();$(‘div’).bind(‘click’,function(){
   })

我们或许常见的语句如上所示，那么对于es6中我们如何自定义封装jQuery 呢

jQueryの简单实例

     
如果你点我，我就会消失。
继续点我!
接着点我!

提出问题

看了之前上述代码后，我们大致知道了jQuery常用就是$()，而不是es6中new $()

难点：我们该如何去掉这个new呢？

或许我们首先想到的是这样：

var $ = new

但是这样，我们该如何传递参数呢？所以这种方式不能采纳

一提到传参，于是想到了用函数，试试

function $(obj){
   		return new jquery(obj);	}

这样，直接就满足了我们想要的效果！

使用jQuery获取样式属性

这里就举个我们常用的例子，例如我们常见对某个样式，可以使用 . # 或者直接对div等等

$(‘.div’).addClass();$(‘#div’).removeClass();$(‘div’).bind(‘click’,function(){
   })

这里附上源码，我们定义了一个jquery的class类，然后通过switch选择我们的标签，最后通过执行$('.div1')来看一下我们是否获取成功。

控制台打印结果：

使用jQuery修改样式属性

上一个模块，我们已经获取到了样式属性，那么接下来就是加入我们想要的样式，并且添加事件

核心代码如下：

addClass(myClass){
   			for(let i =0;i

div1.onclick = ()=>{
   		$('.div1').addClass('bkColor');	}

打开浏览器，我们首先看到的是如下界面

然后点击事件后，我们发现.div1变成了红色，达到我们预期效果

removeClass(myClass){
   			for(let i =0;i

div1.onclick = ()=>{
   		$('.div1').removeClass('bkColor');	}

使用jQuery向界面传入css

源码整合

总结

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/104651048 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！