简便使用jQuery(下)-jQuery自定义插件的编写

浏览数：27 / 时间：2015年06月09日

简便使用jQuery(上)

简便使用jQuery(中)

前面讲了jQuery的使用方法，但是我感觉jQuery没有什么特别要讲的了，最关键的地方是把JavaScript修炼好。jQuery中还有一个最关键的地方就是插件机制。我们直接上代码，插件还是很容易写的。

(function(jQuery){

    //定义在jQuery对象上的全局方法
    jQuery.alert = function(){
        alert("Alert Plugin!!!");
    }

    //定义在jQuery对象的prototype原型对象上的原型方法
    jQuery.fn.alertFn = function(){
        alert("jQuery Plugin!!!");
    }

})(jQuery);

//jQuery官方推荐的自定义插件方式：JSON格式
//第一种：直接在原型上添加方法
jQuery.fn.extend({

    myMethod1:function(){
        alert("MyMethod One!!!");
    },

    myMethod2:function(){
        alert("MyMethod2 Two!!!");
    }
});

//第二种直接在jQuery对象上添加全局方法
jQuery.extend({
    myMethod3:function(){
        alert("MyMethod4 Three!!!");
    }
});

在其他用到的地方直接调用就可以了，区别就是jQuery对象的全局方法调用和jQuery原型方法调用有点区别，注意一下就可以了。

<!-- 引入jQuery -->
<script src="jquery-1.8.3.js"></script>

<!-- 引入自定义插件,插件必须在jQuery调用之后引入 -->
<script src="jQuery-plugin-alert.js"></script>

<script type="text/javascript">
    $(function(){
        //调用自定义插件中的方法
        jQuery.alert();

        $().alertFn();

        $().myMethod1();
        $().myMethod2();

        $.myMethod3();
        //区别上面的jQuery全局方法和jQuery原型方法的调用方式
    });
</script>