JQuery自定义插件机制

江南才子

$.fn.extend(object)：增强通过JQuery获取的对象的功能
语法
例子
$.extend(object)：增强JQuery对象自身的功能
语法
例子

JQuery除了可以通过$调用自身带有的插件方法之外，还可以自定义插件方法

$.fn.extend(object)：增强通过JQuery获取的对象的功能

$.extend(object)：增强JQuery对象自身的功能

$.fn.extend(object)：增强通过JQuery获取的对象的功能

语法

$.fn.extend(
{
自定义方法名1：function(参数列表){
方法体
}，
自定义方法名2：function(参数列表){
方法体
}
}
)

例子

定义2个通过JQuery获取的对象的方法lingaolu和age,都是简单的控制台输出

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery自定义插件</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    input{
      width:300px;
      height: 50px;
    }
  </style>
  <script>
    $.fn.extend({
      lingaolu:function () {
        console.log("林大帅")
      },
      age:function (age) {
        console.log("林大帅年龄为："+age)
      }
    });
    $(function () {
      $("#id1").click(function () {
        var $id2 = $("#id2");
        $id2.lingaolu();
        $id2.age(27);
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="单击我触发按钮2调用自定义方法输出" style="background-color: burlywood"><br><br><br>
  <input id="id2" type="button" value="按钮2" style="background-color: burlywood"><br><br><br>
</body>
</html>

单击前

单击后

$.extend(object)：增强JQuery对象自身的功能

语法

$.extend(
{
自定义方法名1：function(参数列表){
方法体
}，
自定义方法名2：function(参数列表){
方法体
}
}
)

例子

定义2个JQuery自身$的方法lingaolu和age,都是简单的控制台输出

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery自定义插件</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    #id1{
      width: 200px;
      height: 50px;
    }
  </style>
  <script>
    $.extend({
      lingaolu:function () {
        console.log("林大帅")
      },
      age:function (age) {
        console.log("林大帅年龄为："+age)
      }
    });
    $(function () {
      $("#id1").click(function () {
        $.lingaolu();
        $.age(27);
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="单击调用自定义方法输出" style="background-color: burlywood"><br><br><br>
</body>
</html>

单击前

单击后

这里只是简单具体使用，后面要复杂功能需要的时候，可以自定义，或者公用的方法，可以自定义

[jQuery] JQuery自定义插件机制

相关帖子

HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！

如何关闭office获取正版提示 office获取正版提示关闭方法

获取正版Office怎么关掉？为什么要冒险，获取正版office

win11系统怎么修改软件图标？

Virtualbox增强功能安装不了怎么办？

云骑士自定义重装系统教程

使用HTML/CSS/JS做一个恋爱计时小挂件

WordPress怎么获取当前页面URL地址

常用jquery右健禁止命令

阿里云盘获取refresh_token方法

江南才子 LV4