jQuery封装思想

最新推荐文章于 2024-08-14 12:45:22 发布

li_ding_ding

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量117

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/li_ding_ding/article/details/122592130

版权

jQuery01

DOM非常重要, 但是工作中很少书写原生的DOM代码

因为: 原生的方法名太长过于放在

例如:

querySelectorAll
getElementsByClassName
previousElementSibling
…

简化:

const qa = document.querySelector.bind(document)

前辈 利用函数的封装技巧和函数重载技巧, 把原生DOM进行了封装, 让使用时非常简单!

封装思想-选学

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">Hello jQuery1</div>
    <div class="box">Hello jQuery2</div>
    <div class="box">Hello jQuery3</div>

    <script>
      // 技巧1: 封装 - 用{}封装代码复用
      // 技巧2: 函数重载 - 参数数量/类型不同, 完成不同的逻辑

      // 实现封装:
      function MyQuery(s) {
        // els: 选择器方式, 查询到的所有元素
        this.els = document.querySelectorAll(s)
      }
      MyQuery.prototype.css = function () {
        // css(属性名): 可以读取查询到的元素中, 第一个元素的指定样式的值
        if (arguments.length == 1) {
          const name = arguments[0]

          return this.els[0].style[name]
        }
        // 如果是两个参数: 则为选择器选到的每个元素都进行样式的修改
        if (arguments.length == 2) {
          // 数组解构
          const [name, value] = arguments
          // 遍历每个元素, 修改其style样式
          this.els.forEach(el => {
            el.style[name] = value
          })
        }
      }

      // 制作 $ 函数, 来简化new操作
      // 一个映射操作,  $(s) 相当于 new MyQuery(s)
      // 此处的 $ 随便写, 可以写 x y z 之类, 只不过习惯上是$
      function $(s) {
        return new MyQuery(s)
      }

      // 最终效果: 修改 id='box' 元素的颜色
      // 2个参数: 可以设置颜色
      $('.box').css('color', 'red')
      // 1个参数可以读取颜色
      console.log($('.box').css('color'))
    </script>
  </body>
</html>

插件

有网络的同学: 插件栏搜索即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cf3cAGAl-1642605755652)(jQuery01.assets/image-20220110140654761.png)]

没网的同学: 解压缩 FTP提供的 vendor.zip, 用vscode打开此目录, 然后再vscode中, 右键点击donjayamanne.jquerysnippets-0.0.1.vsix 安装即可

jQuery

官网: https://jquery.com/

jQuery的理念:write less, do more - 写的少,做的多

脚本下载地址: https://jquery.com/download/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqbNu16G-1642605755654)(jQuery01.assets/image-20220110141316360.png)]

脚本分两类:

产品版: 经过代码压缩, 去掉了注释和空行, 达到减小体积的效果
开发版: 有注释和空行, 方便程序员阅读

-1642605755654)]

脚本分两类:

产品版: 经过代码压缩, 去掉了注释和空行, 达到减小体积的效果
开发版: 有注释和空行, 方便程序员阅读

li_ding_ding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery封装思想

jQuery01DOM非常重要, 但是工作中很少书写原生的DOM代码因为: 原生的方法名太长过于放在例如:querySelectorAllgetElementsByClassNamepreviousElementSibling…简化:const qa = document.querySelector.bind(document)前辈利用函数的封装技巧和函数重载技巧, 把原生DOM进行了封装, 让使用时非常简单!封装思想-选学<!DOCTYPE html&gt
复制链接

扫一扫