刚开始编写jquery插件的时候，只是从网上找个模板看着写，并不理解.刚刚仔细把官网的API看了下，突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又.
How to create a Jquery Plugin主要看的大体介绍，然后创建Basic Plugin 和 Advanced Plugin
Basic
1.这应该是最简单的一种，定义和调用
$.fn.greenify = function() { this.css( "color", "green" ); return this; // chain use } $( "a" ).greenify().addClass( "greenified" );
2.proteting the $ Alias and Adding Scope(包起来防止$标识冲突)
(function ( $ ) { $.fn.greenify = function() { this.css( "color", "green" ); return this; }; }( jQuery ));
3.Using the each() Method
调用插件方法时可能有多个Element
$.fn.myNewPlugin = function() { return this.each(function() { // Do something to each element here. }); };
Advanced
// Plugin definition. $.fn.hilight = function( options ) { // Extend our default options with those provided. // Note that the first argument to extend is an empty // object – this is to keep from overriding our "defaults" object. var opts = $.extend( {}, $.fn.hilight.defaults, options ); // Our plugin implementation code goes here. }; // Plugin defaults – added as a property on our plugin function. $.fn.hilight.defaults = { foreground: "red", background: "yellow" };
调用的时候有两种方式改变参数
// Override plugin default foreground color. $.fn.hilight.defaults.foreground = "blue"; // ... // 方式1.Invoke plugin using new defaults. $( ".hilightDiv" ).hilight(); // ... // 方式2.Override default by passing options to plugin method. $( "#green" ).hilight({ foreground: "green" });