插件：增强JQuery功能

深耕Java

于 2021-03-28 22:32:41 发布

阅读量118

点赞数

分类专栏： JavaEE Java案例及分析文章标签： jquery jquery插件

本文链接：https://blog.csdn.net/qq_44905731/article/details/115289487

版权

JavaEE 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Java案例及分析

33 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用$.fn.extend和$.extend来增强JQuery的功能。首先，通过$.fn.extend方法为JQuery选择器对象添加了check()和uncheck()方法，实现了复选框的选中和取消选中操作。然后，利用$.extend方法扩展了全局的JQuery对象，添加了max()和min()方法，用于找出两个数值中的最大值和最小值。示例代码展示了这两种扩展方法的用法。

摘要由CSDN通过智能技术生成

插件：增强JQuery功能

1.实现方式：
    1.  $.fn.extend(object)
        增强通过JQuery获取的对象的功能 $("#id")
    2.  $.extend(object)
        增强JQuery对象自身的功能 $/JQuery

对JQuery获取的对象进行功能扩展

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // 使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        // 1.定义jquery对象插件
        $.fn.extend({
            // 定义了一个check方法，所有的jquery对象都可以调用
            check:function() {
                // 让复选框选中
                // this是调用该方法的jq对象
                this.prop("checked", true);
            },
            uncheck:function () {
                // 让复选框不选中
                this.prop("checked", false);
            }
        });

        $(function () {
            // 获取按钮
            // $("#btn-check").check();
            $("#btn-check").click(function () {
                // 获取复选框对象
                $("input[type='checkbox']").check();
            });
            $("#btn-uncheck").click(function () {
                // 获取复选框对象
                $("input[type='checkbox']").uncheck();
            });
        });
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>

对全局对象JQuery进行扩展

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a, b) {
                // 返回两数的较大值
                return a >= b ? a:b;
            },
            min:function (a, b) {
                // 返回两数中较小值
                return a <= b ? a:b;
            }
        });

        // 调用全局方法
        alert($.max(2, 3));
        alert($.min(2, 3));
    </script>
</head>
<body>
</body>
</html>