jquery封装插件、自定义方法

                                                                         本文章是基于jquery编写

要点：

        1、理清自己的思路，你要做什么的步骤

        2、你的操作需要用到jquery的哪些方法

        3、页面需要引入jquery包，和你自己插件的包

步骤：

1、插件的包装

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称：

为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。

. 代码如下:

;( function ($) {

$.fn.m​​yPlugin = function () {

//你自己的插件代码

};

})(jQuery);

2、环境

现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。

. 代码如下:

?

1 2 3 4 5 6 7 8 9 10

( function ($) { $.fn.m​​yPlugin = function () { //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。 //$(this)等同于 $($('#element')); this .fadeIn( 'normal' , function () { //此处callback函数中this关键字代表一个DOM元素 }); }; })(jQuery); $( '#element' ).myPlugin();

3、默认值和选项

对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。

. 代码如下:

?

1 2 3 4 5 6 7 8 9 10 11