IT编程 > 网页制作 > HTML

jquery如何封装,简单实例

74人参与2020-08-08

简单封装jquery

ps:并非真实jquery方法 但可实现jquery使用效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单封装jquery</title> </head> <body> <div class="test"></div> <div class="test"></div> </body> <script> // 定义一个方法 命名为$传入query参数 function $(element) { // 因为有可能是多个dom 所以我们使用querySelectorAll来获取dom const querys = document.querySelectorAll(element); // 将方法返回一个对象,并调用init方法 return new { // 定义初始化方法 init: function () { // 使用for循环拿到所有的dom 并且循环赋给this(指当前返回的对象) 此时它会返回一个方法; // 返回值:init {0: div.test, 1: div.test} for (let i = 0; i < querys.length; i++) this[i] = querys[i]; // 在当前对象下定义一个css方法,...arge可拿到所有参数; this.css = function (...args) { // 判断它的长度为1则说明传入一个参数 即是一个对象(这里你可以自行判断它的类型不符合可返回错误提示,我就简单演示了) if (args.length === 1) { for (let i = 0; i < querys.length; i++) { // 拿到 args是一个数组所以要取args的第0个位置的参数 let object = args[0]; //返回值: { width: '100px', float: 'left'} // 利用forIn拿到对象的key和value for (const key in object) { // 要检测的属性的 String 字符串形式表示的名称,或者 Symbol if (object.hasOwnProperty(key)) { const value = object[key]; // 将对象循环赋值 querys[i].style[key] = value; } } } // 判断是否是2个参数 } else if (args.length === 2) { for (let i = 0; i < querys.length; i++) { // 赋值 querys[i].style[args[0]] = args[1]; } } else { console.error('css 参数有误!') } } // 如果还要添加别的方法可在下面定义 // 例如:this.test... this.html...  this.val... 等. } }.init() } $('.test').css('height', '100px'); $('.test').css('background', 'green'); $('.test').css({ width: '100px', float: 'left' }); $('.test')[0].onclick = function(){ console.log('click') } </script> </html> 

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

jquery如何封装,简单实例

08-08

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-08

前端利用伪元素+动画效果制作一个跳动的心

08-08

页面各种布局的整理

08-08

贡献一个CSS心形加载的动画源码

08-08

浏览器兼容设置 + 拖拽封装

08-08

拓展阅读

大家都在看

音视频编解码:NVIDIA Jetson Linux Multimedia API(总结)

12-04

前端页面点击图片放大功能(viewerjs插件的简单而强大)

08-20

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

i5 1135g7和i5 9300h 相差多少

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

热门评论