JQuery自定义插件机制

最新推荐文章于 2022-03-18 20:10:16 发布

深知她是一场梦

最新推荐文章于 2022-03-18 20:10:16 发布

阅读量5.6k

点赞数 1

分类专栏： JQuery 文章标签： JQuery 自定义方法插件

本文链接：https://blog.csdn.net/lgl782519197/article/details/107859009

版权

JQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

$.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>