插件：增强JQuery功能

最新推荐文章于 2022-03-24 18:20:42 发布

深耕Java

最新推荐文章于 2022-03-24 18:20:42 发布

阅读量95

点赞数

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

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

版权

JavaEE 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Java案例及分析

33 篇文章 0 订阅

订阅专栏

插件：增强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>

深耕Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插件：增强JQuery功能

插件：增强JQuery功能1.实现方式： 1. $.fn.extend(object) 增强通过JQuery获取的对象的功能 $("#id") 2. $.extend(object) 增强JQuery对象自身的功能 $/JQuery对JQuery获取的对象进行功能扩展<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit
复制链接

扫一扫