JQuery的对象扩展

破晓Dawn

于 2021-07-03 20:06:23 发布

阅读量144

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_41093260/article/details/118444438

版权

javaweb 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

JQuery的对象扩展

其实也可以定义方法

局部对象

语法:$.fn.extend({});

全局对象

语法:$.extend({});

代码演练

局部对象

<!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">
        $.fn.extend({
            //选中复选框
            check:function(){
                this.prop("checked",true);
            },
            //清除复选框
            uncheck:function(){
                this.prop("checked",false);
            }
        });
        function checkFn(){
            $("input[type='checkbox']").check();
        }
        function uncheckFun(){
            $("input[type='checkbox']").uncheck();
        }
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFun()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>

全局对象

<!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;
            }

        })
            //使用方法
            var max = $.max(2,3);
            alert(max);

            var min = $.min(2,3);
            alert(min);
    </script>
</head>
<body>
</body>
</html>

破晓Dawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的对象扩展

JQuery的对象扩展其实也可以定义方法局部对象语法:$.fn.extend({});全局对象语法:$.extend({});代码演练局部对象<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>01-jQuery对象进行方法扩展</title> <script src="../js/jquery-3.3.1.min.js"
复制链接

扫一扫