$.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>单击前

单击后

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










