jQuery 插件开发

jQuery 插件开发

一 jquery 为开发插件提供了两个方法

jQuery.fn.extend(object);
jQuery 的fn.extend(object)可以理解为 javascript 的 prototype

jQuery.fn= jQuery.prototype={

  init:function(selector,context){}

}

2.jQuery.extend(object);

$.extend(object); 扩展jQuery对象本身。用来在jQeury命名空间上增加新函数

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

 

3.示例一

 $.extend({

        OperateClick: function (number1, number2) {

            return number1 + number2;

        }

    });

 之后我们在html就可以这样调用了

     $(function () {

           

            alert($.OperateClick(100, 100));

        });

  jQuery.fn.extend(object);对jQuery.prototype进行扩展，就是jQuery类添加"成员函数",jQuery类的实例可以使用这个"成员函数"。

  然后我们组装成一个插件：

  

  (function ($) {

    $.fn.extend({

        OperateClick: function (number1, number2) {

            return number1 + number2;

        }

    });

  })(jQuery);

  html调用 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

    <script type="text/javascript" src="Scripts/jsalert.js"></script>

    <script type="text/javascript">

        $(function () {

            alert($("#name").OperateClick());

        });

    </script>

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="name" value="aa" />

    </div>

    </form>

</body>

</html>

 其实插件的开发就这么简单，多多练习，自然就熟悉了！

posted @ 2011-06-19 09:38 jackyong 阅读(391) 评论(0) 编辑收藏举报

刷新页面返回顶部

jQuery 插件开发

公告