ES6 在es6中自定义封装 jQuery
发布日期:2021-06-29 14:31:12
浏览次数:3
分类:技术文章
本文共 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の简单实例
菜鸟教程(runoob.com) 如果你点我,我就会消失。
继续点我!
接着点我!
提出问题
看了之前上述代码后,我们大致知道了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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月12日 06时59分49秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
12月8日 RCEA - RT-Thread能力认证考试考前通知
2019-04-29
论坛热贴 | RT-Thread音频驱动开发(一)
2019-04-29
基于 Keil MDK 移植 RT-Thread Nano
2019-04-29
【报名截至今晚】12月14日深圳嵌入式与音频开发专题会议预告
2019-04-29
移植 RT-Thread Nano 到 RISC-V
2019-04-29
软件包应用分享|基于RT-Thread的百度语音识别(二)
2019-04-29
在 RT-Thread Nano 上添加控制台与 FinSH
2019-04-29
一站式开发工具:RT-Thread Studio 正式发布
2019-04-29
留言有礼|谢谢你悄悄点了小星星,让我们跃居GitHub RTOS Star榜第一
2019-04-29
功能更新!C 函数也能在 MicroPython 中被调用啦
2019-04-29
东软载波携ES32+RT-Thread走进海尔集团
2019-04-29
今晚8点直播预告:RT-Thread Studio等相关主题答疑
2019-04-29
物联网 20 年简史大揭秘!
2019-04-29
开源项目|RT-Thread 软件包应用作品:水墨屏桌面台历
2019-04-29
珠联璧合!基于i.MX RT和RT-Thread的物联网云接入方案
2019-04-29
基于RTT-MicroPython制作自带BGM的新型肺炎晴雨表
2019-04-29
开源项目|RT-Thread 软件包应用作品:小闹钟
2019-04-29
在 RT-Thread Studio 上使用 RT-Thread Nano
2019-04-29