jquery Plugins in Category 3:
1. Plug-ins that encapsulate object methods.
2. Plug-ins that encapsulate global functions.
3. Selector plug-in.
jquery plugin mechanism
jquery provides two ways to extend the functionality of jquery:
1.jquery.fn.extend () Method-encapsulates the object method.
The code is as follows:
;(function ($) {
Write the plugin code here
}) (JQuery);
The 2.jquery.extend () method-encapsulates the global function, selector plug-in, and a powerful feature for extending an existing object object.
The code is as follows:
Jquery.extend (Target.obj1,...... [OBJN]); Extends an object with one or more other objects, and then returns the extended object.
Examples of table interlaced discoloration:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title></title> <styletype= "Text/css">. Odd{Background-color:Red; }. Even{Background-color:Green; }. Selected{Background-color:Blue; } </style> <Scriptsrc= "Scripts/jquery-1.4.1.min.js"type= "Text/javascript"></Script> <Scripttype= "Text/javascript"> ; (function($) {$.fn.extend ({"Alterbgclass": function(options) {////Set default valuesOptions=Jquery.extend ({odd:"Odd", even:"even", selected:"selected"},options); $("tbody>tr:odd", This). addclass (options.odd); $("Tbody>tr:even", This). addclass (Options.even); $("tbody>tr", This). Click (function () { ////Determines whether the current checkbox is selected varhasselected=$( This). Hasclass (options.selected); ////selected, remove class and checkbox unchecked, otherwise add class and checkbox to select $( This) [hasselected? "Removeclass" : "AddClass"] (options.selected). Find (": CheckBox"). attr ("checked", !hasselected); }); ////If selected by default, add Class $("Tbody>tr:has (Td:has (: checkbox:checked))", This). addclass (options.selected); return This; } }); }) (JQuery); $(function () { $("#table1"). Alterbgclass (); }); </Script></Head><Body> <TableID= "Table1"Border= "1"> <TR> <TD> <inputID= "Checkbox1"type= "checkbox"checked= "Checked" /> </TD> <TD>123</TD> <TD>456</TD> </TR> <TR> <TD> <inputID= "Checkbox2"type= "checkbox" /> </TD> <TD>789</TD> <TD>135</TD> </TR> <TR> <TD> <inputID= "Checkbox3"type= "checkbox" /> </TD> <TD>789</TD> <TD>135</TD> </TR> <TR> <TD> <inputID= "Checkbox4"type= "checkbox"checked= "Checked" /> </TD> <TD>789</TD> <TD>135</TD> </TR> </Table></Body></HTML>
Note: The above content is excerpted from--"sharp jquery" second Edition