1. Form Validation Plugin validation
2. Form plug-in form
3. Dynamic Event Binding plugin Livequeryevents can be bound for later elements similar to the
Live () method in jquery
4.jQuery UI
5.jQuery Cookies
6. Masking Layer Plug-in: Thickbox
7. Writing jquery plugins
<1> The purpose of writing plug-ins : To make a package for some of the existing column methods or functions, and to do it again elsewhereTo facilitate later maintenance and improve development efficiency.
<2> Three types of plugins
A: Plug-in for encapsulating object Methods JQuery.fn.extend ()
B: Plug-in that encapsulates global functions jquery.extend ()
C: Selector plug-in jquery.extend () The
this in the <3> plugin refers to a jquery object, not a DOM object.
8. ForJQuery Plugin-(first experience one)Jquery.fn.extend and jquery.extend--(First Experience II)$.extend ({},defaults, Options)--(First Experience III)the supplement.
Basic points of <1> plugins
The <2>jquery.extend () method processing can be used to extend the JQuery object, and there is a powerful feature for extending an existing object object. For example:
var false, Li:5, Name: "foo"}; var true, Name: "Bar"}; var newset=jquery.extend (settings,options);
Results:
true, Li:5, Name: "Bar"};
so:
the Jquery.extend () method is often used to set default parameters for Plug-in methods. Example:
function foo (options) { options=jquery.extend ({ name:"Bar", Length:5, DataType:"xml" },options);}
<2> encapsulation Methods for plug-in use
Example: Write a color plugin.
1.js file name: JQuery.color.js
2. Format
;(function($) {}) (jQuery);
3. Due to the plug-in using the encapsulation method: JQuery.fn.extend ()
;(function($) { $.fn.extend ({ "color":function(value) { } })}) ( JQuery);
4.this chain-Call
;(function($) { $.fn.extend ({ "color":function(value) { Returnthis. css ("color", value); // in order to make a chained call, return this }) }) (jQuery);
5. Two functions: Set and get color
;(function($) { $.fn.extend ({ "color":function(value) { if (value==undefined) { returnthis. css ("color"); // return this for a chained call ) Else { returnthis. css ("Color", Value),}}) }) (jQuery);
6. Plug-in promotionA: Because the CSS method itself has the ability to return the first matching element, there is no need to use EQ () to get the first elementB: Since there is already a mechanism inside the CSS method that determines whether value is undefined, you can omit the IFFinal:
;(function($) { $.fn.extend ({ "color":function(value) { return this. css ("Color", value);}) }) (jQuery);
7. Actual use:
<script> ;(function($) {$.fn.extend ({"Color":function(value) {return This. CSS ("Color", value); })}) (JQuery); //Application$(function() {alert ($ ("Div"). color ());//gets the first color of the$ ("div"). Color ("red");//set all the div's color to red}) </script>
8. Plugin extension: If you want to define a set of plugins that you can write
;(function($) { $.fn.extend ({ "color":function(value) { }, " Border ":function(value) { }, ...}) }) (jQuery);
9. Note: The jquery selector may match multiple elements, and you can call the each () method inside the plug-in to traverse the matching element. such as:
;(function($) { $.fn.extend ({ "color":function(value) { Returnthis. each (function() {})}) }) (jQuery);
<3> Encapsulation of global functions using the plug-inExample: Removing the left and right spaces
;(function($) { $.extend ({ ltrim:function(text) { return (Text | | ""). Replace (/^\s+/g, ""); }, RTrim:function(text) { return (Text | | ""). Replace (/^\s+$/g, ""); } // Call $ ("div"). Val ( Jquery.ltrim (" text "
<4> Selector Plugin$ ("DIV:GT (1)")
The source code in jquery is :gt:function (a,i,m) {return i>m[3]-0;}There are three parameters: A,i,m
Sharp jquery--Writing jquery plugin (reading note five) [end of article]