jQuery的插件机制

最新推荐文章于 2024-11-12 11:19:19 发布

听海边涛声

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量782

点赞数 4

文章标签： jquery 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/142031040

版权

jQuery的插件机制说明

https://api.jquery.com/jQuery.fn.extend/#jQuery-fn-extend-object

https://api.jquery.com/jQuery.extend/

jQuery的插件机制，就是利用jQuery提供的jQuery.fn.extend() 和 jQuery.extend()方法，扩展jQuery的功能。

语法：

jQuery.fn.extend( object )：对jQuery对象进行方法扩展
jQuery.extend( object )：对jQuery全局进行方法扩展

示例：用普通方式（非插件机制）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <button type="button" id="btn-check" onclick="checkFn()">普通方式:点击选中所有复选框</button>
  <button type="button" id="btn-uncheck" onclick="uncheckFn()">普通方式:点击取消所有复选框选中</button>
  <br><br>

  <input type="checkbox" value="football">足球
  <input type="checkbox" value="basketball">篮球
  <input type="checkbox" value="volleyball">排球

  <script>
    checkFn = () => {
      $('input[type="checkbox"]').prop('checked', true)
    }

    uncheckFn = () => {
      $('input[type="checkbox"]').prop('checked', false)
    }
  </script>
</body>

</html>

在这里插入图片描述

点击第1个按钮：
在这里插入图片描述

点击第2个按钮：
在这里插入图片描述

对jQuery对象进行方法扩展

定义插件：
$.fn.extend({
函数名: 函数,
函数名: 函数,
函数名: 函数
})

使用插件：
任意的jQuery对象.自定义函数(参数)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <button type="button" id="btn-check" onclick="checkFn()">插件方式:点击选中所有复选框</button>
  <button type="button" id="btn-uncheck" onclick="uncheckFn()">插件方式:点击取消所有复选框选中</button>
  <br><br>

  <input type="checkbox" value="football">足球
  <input type="checkbox" value="basketball">篮球
  <input type="checkbox" value="volleyball">排球

  <script>
    // 定义插件
    $.fn.extend({
      // 定义函数：选中所有复选框
      check: () => {
        $(':checkbox').prop('checked', true)
      },
      // 定义函数：取消选中的所有复选框
      uncheck: () => {
        $(':checkbox').prop('checked', false)
      }
    })

    // 使用插件：任意的jQuery对象.自定义函数(参数)
    checkFn = () => {
      // 使用任意的jQuery对象都行，我们此处是随便使用了一个按钮
      $('#btn-check').check()
    }

    uncheckFn = () => {
      // 使用任意的jQuery对象都行，我们此处是随便使用了一个按钮
      $('#btn-uncheck').uncheck()
    }

  </script>
</body>

</html>

在这里插入图片描述

点击第一个按钮：
在这里插入图片描述

点击第二个按钮：
在这里插入图片描述

对jQuery全局进行方法扩展

定义jQuery对象的全局插件：使用jQuery（简写为$）可以直接调用的函数。
jQuery.extend(Object)

定义格式：
$.extend({
函数名: 函数,
函数名: 函数,
函数名: 函数
)

使用格式：
$.全局函数(参数)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <script>
    // 定义jQuery对象的全局插件
    $.extend({
      // 定义一个函数，返回两个数中的最大值
      max: (a, b) => {
        return a > b ? a : b
      },
      // 定义一个函数，返回两个数中的最小值
      min: (a, b) => {
        return a < b ? a : b
      }
    })

    console.log($.max(10, 20))
    console.log($.min(10, 20))
  </script>
</body>

</html>