jquery plug-in learning (5)_jquery

This section encapsulates the plug-in. How is the progress?

Generally, plug-ins released to the outside world should be encapsulated, and the encapsulated plug-ins should also comply with the specifications. Only plug-ins written in this way can have promotion value and be loved by other users.

The first step is to define an independent domain. The code is as follows.

Copy code The code is as follows:

(function($){
//Since Define plug-in code
}) (jQuery) //Encapsulate plug-in

Determine the type of plug-in to be created and select the creation method. For example, to create a plug-in that sets the font color of elements, you should create a jquery object method , considering that jquery provides the plug-in extension method extend(), calling this method will be more standardized.

Copy code The code is as follows:

(function($){
//Since Define plug-in code
$.extend($.fn,{ //jquery object extension method

})
})(jQuery) //Encapsulate plug-in

Generally, plug-ins will accept parameters to control the behavior of the plug-in. For example, for plug-ins that set colors, the user should be allowed to set the font color. At the same time, it should be considered that if the user does not set the color, the default color should be kept.

Copy code The code is as follows:

(function($){
//Since Define plug-in code
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor : "white",fcolor: "black"},options ; 🎜>
Copy code


The code is as follows:

;(function($){
$.extend($.fn,{

color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options); //Function bodyreturn this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); }); }// color==end

})

})(jQuery);


Call and see




Copy code


The code is as follows:

$("h1").color({bcolor : "#ccc",fcolor:"#eee"});
$(' a').color("#fff");