jQuery插件写法

JQuery实际上就是一个封装操作DOM的对象。JQuery插件实际上就是扩展JQuery这个对象（实例或者本身），增加用户自己的方法。

[TOC]

1. 扩展JQuery本身

JQuery提供.extend()方法来对自身进行扩展。

$.extend( { say : function() { return "roddy"; } } ); // 使用 console.log( $.say() ); // 输出： // "roddy"

对JQuery自身扩展一个.say()方法。

2. 扩展JQuery实例

JQuery提供.fn.extend()方法来扩展JQuery实例对象

$.fn.extend( { changeColor : function() { $( this ).style.color = "red"; } } ); // 使用 $( "span" ).changeColor();

3. 扩展写法

( function( $ ) { // 插件默认配置 var defaultOptions = { property1 : "value1", property2 : "value2", ... }; // 插件构造函数 function userPlug( element, options ) { // jQuery实例对象 this.$ele = $( element ); // 合并用户配置和默认配置 this.options = $.extend( defatuleOptions, options, true ); // 插件初始化 this.init( this ); } // 插件原型 userPlug.prototype = { // 插件初始化函数 init : function( self ) { // 插件的主要实现代码 // 可以通过self.options进行配置或者修改 // 然后给self.$ele绑定事件处理函数等 } } // 绑定插件 $.fn.userplug = function( options ) { return this.each( function() { if( !$.data( this, 'userplug' ) ) { $.data( this, 'userplug', new userPlug( this, options ) ); } } ); } } )( window.jQuery );

4. 使用插件

<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script src="userPlug.js"></script> <script> $( "div" ).userplug( [options] ); </script>