Global function usage example made by jQuery plug-in_jquery

The example in this article describes the usage of global functions in jQuery plug-in production. Share it with everyone for your reference. The specific analysis is as follows:

1. Add new global function

The so-called global functions are actually methods of jQuery objects, but from a practical point of view, they are functions located inside the jQuery namespace

(1) To add a function, just specify the new function as a property of the jQuery object.

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

Call:

Copy code The code is as follows:

$.five();

(2)Add multiple functions

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

Call:

Copy code The code is as follows:

$.five();$.six();

The above method will 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 follows:

//命名空间继承
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

Most of the built-in functionality in jQuery is provided through its object methods.

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

Call:

Copy code The code is as follows:

$.fn.myMethod();

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

Example: The following is a method that behaves incorrectly

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />

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 use that style.

(1)Hermit iteration

To ensure correct behavior regardless of matching multiple elements, the simplest way is to always call the .each() method on the method's environment, so that

Performs hermit iteration, and performing hermit iteration is crucial to maintaining consistency between plugins and built-in methods. Inside the called .each() method, this

refers to each DOM element in turn. The above code is modified to:

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:

Copy code The code is as follows:

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

(2) Method concatenation

To use method concatenation, a jQuery object must be returned in all plugin methods. The jQuery object returned 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:

Copy code The code is as follows:

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

3. Add new abbreviation 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 be helpful to everyone’s jQuery programming.