Jquery12_开发插件

最新推荐文章于 2024-01-05 19:47:22 发布

「已注销」

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量765

点赞数

分类专栏： JQuery 文章标签： Jquery开发插件

本文链接：https://blog.csdn.net/wo_shi_chuan_qi_007/article/details/9284873

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

用Jquery可以开发自己想用的插件

开发插件有两种方法

1：$.extend()：用于开发静态方法
2： $.fn.extend():用于开发实例方法

第一步：写插件

下面是比较最大值最小值的插件和选中checkbox的插件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
          $.extend()：用于开发静态方法
          $.fn.extend():用于开发实例方法
        */

        // 最大值，最小值的方法
        $.extend({ "max": function (x, y) {
            return x > y ? x : y;
        }, "min": function (x, y) {
            return x > y ? y : x;
        }
        });

        // 选中check 的状态
        $.fn.extend({
            "Checked": function () {
                $(this).attr("checked", true);
            }, "UnChecked": function () {
                $(this).attr("checked",false);
            }
        });
    </script>
</head>
<body>
</body>
</html>

第二步：新建JS文件把开发的插件封装到JS文件中

第三步：在项目中引用带有封装插件的JS文件

注意：引入的封装的js文件要在引入<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>之下

alert($.max(20, 8989));

$(function () {

            // 点击check按钮
            $("#btnCheck").click(function () {
                $("#c").Checked();
            });

            // 点击unCheck按钮
            $("#btnUnCheck").click(function () {
                $("#c").UnChecked();
            });

});

    </script>
</head>
<body>
     <input type="button" value="check" id="btnCheck" />
     <input type="button" value="unCheck" id="btnUnCheck" />