Create a global function using jQuery plug-in _ jquery

This article mainly introduces the usage of global functions created by the jQuery plug-in, and analyzes the usage tips of global functions in jQuery, for more information about how to create global functions using the jQuery plug-in, see the examples in this article. Share it with you for your reference. The specific analysis is as follows:

1. Add a new global function

The so-called global functions are actually jQuery object methods, but in practice, they are functions located inside the jQuery namespace.

(1) to add a function, you only need to specify the new function as an attribute of the jQuery object.

JQuery. five = function () {alert ("the direct inheritance method is different ");}

Call:

The Code is as follows:

$. Five ();

(2) Add Multiple Functions

JQuery. five = function () {alert ("different direct inheritance methods");} jQuery. six = function () {alert ("different direct inheritance Methods 2 ");}

Call:

The Code is as follows:

$. Five (); $. six ();

The above method may face the risk of namespace conflict. To avoid this problem, it is best to encapsulate all global functions belonging to this plug-in into an object, as shown below:

// The namespace inherits jQuery. myPlugin = {one: function (obj) {var object = obj; var id = object. attr ("id"); alert (id) ;}, two: function () {alert (22 );}}

This actually creates another namespace for the global function: jQuery. myPlugin.

2. Add jQuery object Method

In jQuery, most of the built-in functions are provided through the methods of their objects.

jQuery.fn.myMethod= function(){  alert(11); }

Call:

The Code is as follows:

$. Fn. myMethod ();

Note: jQuery. fn is the alias of jQuery. prototype.

Example: The following is an incorrect behavior method.

 
 
   
  
  
11111111111111111111111111
   
  
   22222222222222222222   
   
  
333333333333333
   
   
    44444444444444444   
    
     55555555555555   
     
  
6666666666666666
   
     
  
777777777777777777
   
     
      777777777777777777 
     
    
   
  
 
 
 
 

jQuery.fn.swapClass= function(class1,class2){  if(this.hasClass(class1)){   this.removeClass(class1).addClass(class2);  }  if(this.hasClass(class2)){   this.removeClass(class2).addClass(class1);  } }  $("#swap").click(function(){   $("li").swapClass("this","that");   return false; })

All li uses that style.

(1) hermit Iteration

To ensure correct behavior regardless of matching multiple elements, the simplest method is to always call the. each () method in the method environment.

Executing a hermit iteration is critical to maintaining the consistency between the plug-in and built-in methods. Within the called. each () method, this

Each DOM element is referenced in sequence. The code above is changed:

jQuery.fn.swapClass= function(class1,class2){  this.each(function(){   var $element = jQuery(this);   if($element.hasClass(class1)){    $element.removeClass(class1).addClass(class2);   }else if($element.hasClass(class2)){    $element.removeClass(class2).addClass(class1);   }  }) }

Call:

The Code is as follows:

$ ("Li"). swapClass ("this", "that ")

(2) method concatenation

To use method concatenation, A jQuery object must be returned in all plug-in methods. The returned jQuery object is usually the object referenced by this.

jQuery.fn.swapClass= function(class1,class2){  return this.each(function(){   var $element = jQuery(this);   if($element.hasClass(class1)){    $element.removeClass(class1).addClass(class2);   }else if($element.hasClass(class2)){    $element.removeClass(class2).addClass(class1);   }  }) }

Call:

The Code is as follows:

$ ("Li"). swapClass ("this", "that" ).css ("text-decoration", "underline ");

3. Add a new abbreviated Method

// Add a new abbreviated method jQuery. fn. slideFadeOut = function (speed, callback) {return this. animate ({height: "hide", opacity: "hide"}, speed, callback)} jQuery. fn. slideFadeIn = function (speed, callback) {return this. animate ({height: "show", opacity: "show"}, speed, callback)} jQuery. fn. slideFadeToggle = function (speed, callback) {return this. animate ({height: "toggle", opacity: "toggle"}, speed, callback )}

I hope this article will help you with jQuery programming.