[JQ权威指南]类级别插件开发_jq类级插件-优快云博客

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/53403869

本文介绍了一个简单的jQuery插件，该插件提供了两个全局函数：addNum和subNum，分别用于计算两个数字的和与差。通过HTML页面演示了如何使用这两个函数来动态显示计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)功能描述：新增两个类级别的全局函数，分别用于计算两数之和与两数之差，并将结果返回调用的页面中。
(2)JS

/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
/*------------------------------------------------------------/
功能：计算二个数字相加或相减的结果
参数：数字p1,p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/------------------------------------------------------------*/
; (function($) {
    $.extend({
        "addNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1 > p2) { //如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>编写一个类级别的插件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Plugin/jquery.twoaddresult.js">
    </script>
    <style type="text/css">
           body{font-size:12px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
           .divFrame .divContent{padding:8px;line-height:1.6em}
           .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px;width:8px}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); //调用自定义的插件计算两数之和
            $("#Button2").click(function () {
                $("#Text6").val(
                $.subNum($("#Text4").val(),$("#Text5").val())
                )
            })
            //调用自定义的插件计算两数之差
        })
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              类级别的插件
         </div>
         <div class="divContent">两数相加：
             <input id="Text1" type="text" class="txt" />
             +
             <input id="Text2" type="text" class="txt" />
             =
             <input id="Text3" type="text" class="txt" />
             <input id="Button1" type="button" 
                    value="等于" class="btn" />
             <hr />两数相减：
             <input id="Text4" type="text" class="txt" />
             -&nbsp;
             <input id="Text5" type="text" class="txt" />
             =
             <input id="Text6" type="text" class="txt" />
             <input id="Button2" type="button" 
                    value="等于" class="btn"/>
         </div>
     </div>

</body>
</html>