jquery Plugin Development Matters

• Http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
• http://www.w2bc.com/Article/13951
• Http://www.w3cschool.cc/w3cnote/jquery-10-skill.html

This

Inside the function defined by the plug-in name, this refers to the element that we select with the jquery selector when invoking the plugin, which is generally a collection of jquery types. For example, $ (' a ') returns a collection of all the A tags on the page, and the collection is already a jquery wrapper type, which means that you can invoke other methods of jquery directly when you manipulate it without having to wrap it with a dollar sign.

We already know that this refers to the collection returned by the jquery selector, so each element of the collection can be processed by invoking the. each () method of jquery, but it is important to note that within each method, this refers to the normal DOM element. If you need to call jquery's method then you need to re-wrap it with $.

$.fn.button = function (option)    {//this refers to the object returned by jquery. Return This.each (function ()        {            var $this = $ (this)//here only the DOM element is obtained, so you need to encapsulate            var data = $this. Data (' Zui.button ')            var options = typeof option = ' Object ' && option            if (!data) $this. Data (' Zui.button ', (data = New button (this, options)))            if (option = = ' t Oggle ') Data.toggle ()            else if (option) data.setstate (option)        })    }

Object-oriented plug-in case

;(function ($, window, document,undefined) {    //define Beautifier's constructor    var beautifier = function (Ele, opt) {this        . $element = Ele,        this.defaults = {            ' color ': ' Red ',            ' fontSize ': ' 12px ',            ' textdecoration ': ' None '        } ,        this.options = $.extend ({}, this.defaults, opt)    }    //method for defining Beautifier    Beautifier.prototype = {        beautify:function () {            return this. $element. css ({                ' color ': This.options.color,                ' fontSize ': This.options.fontSize,                ' textdecoration ': This.options.textDecoration            });        }    }    Using the Beautifier object in the plug-in    $.fn.myplugin = function (options) {        //create Beautifier entity        var beautifier = new Beautifier (this, options);        Call its method        return beautifier.beautify ();    }}) (JQuery, window, document);

JQuery plug-in development matters