Jquery12_開發插件

用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>之下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/test.js" type="text/javascript"></script>
    <script type="text/javascript">

        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" />

     <input type="checkbox" id="c" />
</body>
</html>

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章