jquery如何封装，简单实例
程序员文章站
2022-06-27 20:47:46
简单封装jqueryps：并非真实jquery方法 但可实现jquery使用效果 简单封装jquery ...
简单封装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> 下一篇： 阿里云 CDN + OSS 解决方案