Getting started with Jquery plug-in

You can search for various plug-ins on the Internet, such as file uploads, Image Browsing, and Autocomplete. The source code seems very difficult for new users. Of course, I am also a newbie. I started to change the AutoComplete plug-in a little bit, but I really don't know how to start. I will use fireDebug of Firefox later. I am not dedicated to front-end, but I have to understand that basic use is still necessary. Today, Let's sum up the basic knowledge of the recently viewed plug-ins. Here is an entry point, hoping to help new beginners. Below are two very important extension functions.. Extend and. fn. extend $. extend (object) can be understood as adding a static method to JQuery. $. Fn. extend (object) can be understood as adding a method to the JQuery instance. Basic definition and call: copy the code/* $. extend definition and call */$. extend ({fun1: function () {alert ("execution method 1") ;}}); $. fun1 ();/* $. fn. extend definition and call */$. fn. extend ({fun2: function () {alert ("execution method 2") ;}}); $ (this ). fun2 (); // equivalent to $. fn. fun3 = function () {alert ("execution method 3") ;}$ (this ). fun3 (); copy the code $. extend (target, [object1], [objectN]) also has a usage, that is, to merge to the first object. this method is mainly used to merge the content (attributes) of two or more objects to the first object, and return the first object after merging. If the method has only one target parameter, the parameter will expand the jQuery namespace, that is, the static method will be attached to the jQuery global object, such as $ in jQuery. ajax, $. getJSON global functions, as shown in the preceding figure: when multiple object parameters are merged, the structure of the first object is damaged, therefore, an empty object can be passed as the first parameter, for example, $. extend ({}, object1, object2); var options = $. extend ({}, defaults, options); the Code above is merged into {}, and then assigned to options. This is often used when writing plug-ins. You can define some attributes by yourself. The plug-in also defines the default attributes. after calling the above method, if you define the attributes, this uses the new attributes, otherwise, the default attribute is used, which is very useful. $. Fn. extend (target) in jQuery ,. fn is essentially equivalent to the prototype of jQuery, that is. fn = $. prototype, so this method is actually used to add a method for the jQuery prototype, that is, to add the method of the target object to the jQuery prototype, so that the jQuery object instance can access the added method, this is also a common method for jQuery plug-in development, especially when multiple interfaces are added. For example: // Add the hello and hello2 methods to the jquery prototype $. fn. extend ({hello: function () {alert ("hello! ") ;}, Hello2: function () {alert (" hello again !);}}); Let's take a look at the method used by the Autocomplete plug-in. $. Fn. extend ({autocomplete: function (urlOrData, options) {var isUrl = typeof urlOrData = "string"; options = $. extend ({}, $. autocompleter. ults, {url: isUrl? UrlOrData: null, data: isUrl? Null: urlOrData, delay: isUrl? $. Autocompleter. defaults. delay: 10 max: options &&! Options. scroll? 1000: 15000}, options); // if highlight is set to false, replace it with a do-nothing function options. highlight = options. highlight | function (value) {return value ;}; // if the formatMatch option is not specified, then use formatItem for backwards compatibility options. formatMatch = options. formatMatch | options. formatItem; return this. each (function () {new $. autocompleter (this, options );}) ;}, Result: function (handler) {return this. bind ("result", handler) ;}, search: function (handler) {return this. trigger ("search", [handler]);}, flushCache: function () {return this. trigger ("flushCache") ;}, setOptions: function (options) {return this. trigger ("setOptions", [options]);}, unautocomplete: function () {return this. trigger ("unautocomplete") ;}}); can't read it? It doesn't matter. The following is a Malay connection. If you add a single method to the jQuery prototype, you can use $. fn. add the pluginName method, such as: // Add the hello method to the jquery prototype $. fn. hello = function (){//...}; general Plug-In Template (single method): The plug-in has its own basic format:; (function ($) {$. fn. yourName = function (options) {// various attributes and parameters} var options = $. extend (defaults, options); return this. each (function () {// plug-in implementation code}) ;};} (jQuery); There is a semicolon at the top of the above Code, this is to prevent running errors due to the absence of semicolons in the end statements of other scripts when multiple script files are merged. 1. Put all the code in the closure (an immediate execution function). At this time, the closure is equivalent to a private scope, and the external cannot access internal information, and there will be no global variable pollution. The official development specifications are as follows: a) avoiding global dependencies; B) avoiding third-party damages; c) compatible with jQuery operators '$' and 'jQuery '. (Function ($) {// use $ in local scope to reference jQuery //...}) (jQuery); this code can be understood as the following code when parsed: var jQ = function ($) {// code goes here}; jQ (jQuery ); if you cannot understand it, you know that this is an official standard. The following is an example of table beautification. The implementation principle is simple. It is nothing more than finding the odd and even rows of the table, and then adding different classes. It is also very easy to highlight the active row. You only need to judge the mouseover event, add a class and remove the class when mouseout. Check the link to see the details. You can check the details and write well, especially the steps are clear. Well, the basic framework is clear. The following describes how to fill in the content. Copy code (function ($) {$. fn. tableUI = function (options) {var defaults = {evenRowClass: "evenRow", oddRowClass: "oddRow", activeRowClass: "activeRow"} var options = $. extend ({}, defaults, options); this. each (function () {// implementation code}) ;};} (jQuery); repeat the following sentence: var options = $. extend ({}, defaults, options); is to combine multiple objects into one. Here, if you write a new parameter during the call, you will use your new parameter. If not, you will use the default parameter. If you want to learn more about friends, you can refer to jquery's official documentation: http://api.jquery.com/jQuery.extend/ in fact, here defines the default var defaults is irregular writing, the rule is like this $. fn. tableUI. defaults = {evenRowCass: "evenRow", oddRowClass: "oddRow", activeRowClass: "activeRow"}; options = $. extend ({}, $. fn. tableUI. defaults, options); well, read all the Code directly: // it is best to write the relevant description here, such as time, author, mainly for what to do/** tableUI 0.1 * Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/* Date: 2010-03-30 * use TableUI allows you to easily display table prompts for user experience. The features provided in the first step show the color of the odd and even rows. Move the mouse up to highlight */; (function ($) {$. fn. tableUI = function (options) {$. fn. tableUI. defaults = {evenRowCass: "evenRow", oddRowClass: "oddRow", activeRowClass: "activeRow"}; var options = $. extend ({}, $. fn. tableUI. defaults, options); // merge return this. each (function () {var thisTable = $ (this); // Add the color of the parity row $ (thisTable ). find ("tr: even "). addClass (options. evenRowClass); $ (thisTable ). find ("tr: odd "). addClas S (options. oddRowClass); // Add the color of the active row $ (thisTable ). find ("tr "). bind ("mouseover", function () {$ (this ). addClass (options. activeRowClass) ;}); $ (thisTable ). find ("tr "). bind ("mouseout", function () {$ (this ). removeClass (options. activeRowClass) ;};};};}( jQuery); The following is the call code. <Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script> <script src = "Scripts/TableUI. js "type =" text/javascript "> </script> <script type =" text/javascript ">$ (document ). ready (function () {$ (". table_solid "). tableUI ({evenRowCass: "eventRow", oddRowClass: "oddRowClass", activeRowClass: "activeRow"}); // enter a new parameter here, without using the default parameter. The plug-in code is automatically overwritten. }) </Script> <style type = "text/css"> body {font-family: 'verdana ', ''; font-size: 12px ;}. eventRow {background-color: # f0f0ff ;}. activeRow {background-color: # FFFF55 ;}. oddRowClass {background-color: red;} </style>