Follow me to learn how to develop jQuery plug-ins (with complete examples and downloads)_jquery

Many companies' front-end designers and developers are girls, and many of these girls' JavaScript skills are not very good. In the front-end development process, JavaScript skills are essential. So, if the little front-end girl is worrying about a certain JavaScript effect, you go over there and say to her: "Hey, beauty, use this. This is a jQuery plug-in I wrote." I think basically you Major life events can be resolved quickly.
First think about what function to make
This is the first step, and it is also a very important step. Since we are all just learning to write jQuery plug-ins, this function must be simpler. Don't think about eating a fat man in one bite, we can't eat it either. Let's start with a thin one. However, this function cannot be too boring. If it is so boring that it is almost useless, even if it is done, it will be thrown into the toilet, and it will not be continuously updated, and there will be no continuous improvement.
What I finally chose was to beautify the table, make the odd and even rows of the table different colors, and then move the mouse over a certain row to highlight it. The function is simple and practical, good, good. Haha~~
Don’t rush to write, think about the implementation principle first
Don’t rush, think about the implementation principle first. When necessary, write a simple implementation prototype first.
My example of beautifying a table, the implementation principle is simple. It is nothing more than finding the odd and even rows of the table, and then adding different classes. Highlighting the active rows is also very simple. Just determine the mouseover event, and then add a class, mouseout When the time comes, just remove this class.
A general framework
Before writing your own jQuery plug-in, it is natural to study plug-ins written by others. In fact, there is basically a general framework for writing jQuery. Okay, let’s copy this framework too.

Copy code The code is as follows:

(function($){
$.fn .yourName = function(options){
//Various attributes and parameters
}
var options = $.extend(defaults, options);
this.each(function(){
//Plug-in implementation code
});
};
})(jQuery);

With this, we can put things in it.
Name, parameters and attributes
It’s finally time to enter the world. You must have a resounding name. Only in this way can you be powerful and majestic in the world. If you don’t believe it, just listen to the “China Dental Prevention Group”! Therefore, we must have a resounding name here, which must be simple, clear, and authoritative enough. So, it was decided that it would be called “tableUI”!
The parameters and attributes are also very simple, nothing more than the names of three classes. Just call them: evenRowClass, oddRowClass and activeRowClass.
So, let’s fill in the upper body in the above frame.

Copy code The code is as follows:

(function($){
$.fn .tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//Implementation code
});
};
})(jQuery);

Let me focus on this sentence:

Copy the code The code is as follows:

var options = $.extend(defaults, options);

This sentence looks very cool, but it is actually merging multiple objects into one. Here is, if you write new parameters when calling, your new parameters will be used. If not, the default parameters will be used. Friends who want to know more can refer to the official documentation of jquery: http://api.jquery.com/jQuery.extend/

Let’s start with the lower body
ok, the upper body is filled in , let’s fill in the lower body. It's nothing more than finding the base row and the even row (thanks to jQuery for providing a writing method like tr:even, which makes it extremely simple), and then adding the corresponding class. Then bind mouseover and mouseout events to all tr. The code for the lower body is as follows:

Copy the code The code is as follows:

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow" ,
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//Add odd and even row colors
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd"). addClass(options.oddRowClass);
//Add active row color
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass (options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass );
});
});
};
})(jQuery);

The most important step!
Maybe some friends think this is complete. But on the contrary, we still have the most important step to complete, which is to write the name of the plug-in, version number, completion date, author, author's contact information, date of birth, measurements, etc. above the plug-in. Because only in this way can this plug-in appear professional enough.

Copy code The code is as follows:

/*
* tableUI 0.1
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/
* Date: 2010-03-30
* Using tableUI can easily provide table prompts for user experience. The first function provided is the alternation of odd and even row colors. Move the mouse up to highlight
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this .each(function(){
var thisTable=$(this);
//Add odd and even row colors
$(thisTable).find("tr:even").addClass(options.evenRowClass) ;
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//Add active row color
$(thisTable).find("tr").bind ("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout" ,function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);

Demo address

Instance download address