jQuery的插件机制

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)
      }
    })

    
    checkFn = () => {
      
      $('#btn-check').check()
    }

    uncheckFn = () => {
      
      $('#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>
    
    $.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>