Analysis on Parameter usage of jQuery plug-in _ jquery

This article mainly introduces the parameter usage of the jQuery plug-in, and analyzes in detail the usage skills of parameters in the process of making the jQuery plug-in the form of examples, if you need it, refer to the example in this article to describe the parameter usage of jQuery plug-in. Share it with you for your reference. The specific analysis is as follows:

1. Achieve text shadow without Parameters

jQuery.fn.shadow =function(){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < 5;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top :$originalElement.offset().top + i,     margin : 0,     zIndex : -1,     opacity : 0.1    })    .appendTo("body");   }  }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ();

2. Simple parameters

jQuery.fn.shadow =function(slices,opacity,zIndex){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < slices;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top :$originalElement.offset().top + i,     margin : 0,     zIndex : zIndex,     opacity : opacity    })    .appendTo("body");   }  }) }

Call example:

The Code is as follows:

$ ("H1"). shadow (10, 0.1,-1 );

3. Parameter ing

jQuery.fn.shadow =function(opts){  return this.each(function(){   var $originalElement = jQuery(this);   for(var i = 0;i < opts.slices;i++){    $originalElement.clone()    .css({     position :"absolute",     left :$originalElement.offset().left + i,     top : $originalElement.offset().top+ i,     margin : 0,     zIndex :opts.zIndex,     opacity : opts.opacity    })    .appendTo("body");   }  }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ({
Slices: 5,
Opacity: 0.25,
ZIndex:-1
});

4. default parameter values (this is the most important)

JQuery. fn. shadow = function (options) {var defaults = {slices: 5, opacity: 0.1, zIndex:-1}; // if the value of ults exists in options, the value var opts = jQuery in ults is overwritten. extend (defaults, options); return this. each (function () {var $ originalElement = jQuery (this); for (var I = 0; I <opts. slices; I ++) {$ originalElement. clone (). css ({position: "absolute", left: $ originalElement. offset (). left + I, top: $ originalElement. offset (). top + I, margin: 0, zIndex: opts. zIndex, opacity: opts. opacity }). appendTo ("body ");}})}

Call example:

The Code is as follows:

$ ("H1"). shadow ({
Opacity: 0.05
});

5. Callback Function

JQuery. fn. shadow = function (options) {var defaults = {slices: 5, opacity: 0.1, zIndex:-1, sliceOffset: function (I) {return {x: I, y: I }}; // options if there is a value in ults, it overwrites the VALUE IN var ults var opts = jQuery. extend (defaults, options); return this. each (function () {var $ originalElement = jQuery (this); for (var I = 0; I <opts. slices; I ++) {// call the callback function var offset = opts. sliceOffset (I); $ originalElement. clone (). css ({position: "absolute", left: $ originalElement. offset (). left + offset. x, top: $ originalElement. offset (). top + offset. y, margin: 0, zIndex: opts. zIndex, opacity: opts. opacity }). appendTo ("body ");}})}

Call example:

The Code is as follows:

$ ("H1"). shadow ({
SliceOffset: function (I ){
Return {x:-I, y:-2 * I}
}
});

6. Customizable default values

JQuery. fn. shadow = function (options) {// The default value is placed in the namespace of the projection plug-in. var opts = jQuery. extend ({}, jQuery. fn. shadow. defaults, options); return this. each (function () {var $ originalElement = jQuery (this); for (var I = 0; I <opts. slices; I ++) {// call the callback function var offset = opts. sliceOffset (I); $ originalElement. clone (). css ({position: "absolute", left: $ originalElement. offset (). left + offset. x, top: $ originalElement. offset (). top + offset. y, margin: 0, zIndex: opts. zIndex, opacity: opts. opacity }). appendTo ("body") ;}} jQuery. fn. shadow. defaults = {slices: 5, opacity: 0.1, zIndex:-1, sliceOffset: function (I) {return {x: I, y: I }}}

The default value is placed in the namespace and can be directly referenced through $. fn. shadow. default. The call to $. extend () must also be modified to adapt to this change. Because all. the defaults ing must be reused for the call of shadow (), so it cannot be set to $. extend () modifies it, so an empty ing ({}) must be used as $. the first parameter of extend () makes this new object the target of modification.

Call method:

The Code is as follows:

JQuery. fn. shadow. defaults. slices = 10;
$ ("H1"). shadow ({
SliceOffset: function (I ){
Return {x:-I, y: I}
}
});

7. Add a selector expression

/** Add selector expression ** parameter: * element: the current DOM element. Most selector requires this * index: index of the Dom element in the result set. This parameter pair: select characters such as eq () and: lt () are more useful. * matches: An array containing the regular expression results for parsing the current selected character. Matches [3] is usually the only useful item in this array. For selection operators in the form of a (B), matches [3] contains B, * Text in parentheses. * Set: set of the entire DOM element matched so far. This parameter is rarely used. **/JQuery. extend (jQuery. expr [':'], {'css ': function (element, index, matches, set) {// modified matches [3]: width <100 var parts = matches [3]. split (""); var value implements parsefloat(jquery(element).css (parts [0]); switch (parts [1]) {case '<': return value
 
  
= ': Return value >=parseint (parts [2]); case'> ': return value> parseInt (parts [2]) ;}})
 

Call:

 
  Desrunt mollit anim id estlaborum
  

  
   2222222
   

   
    33333333333333333333333
    

    
     4444444444444444
     

    
   
  
 

The Code is as follows:

$ ("P: css (width <100)"). addClass ("heighlight ");

I hope this article will help you with jQuery programming.