A global function Usage example _jquery of jquery plug-in production

This article illustrates the global function usage of jquery plug-ins. Share to everyone for your reference. The specific analysis is as follows:

1, add a new global function

The so-called global functions, in fact, are the methods of the JQuery object, but from a practical standpoint, they are functions that reside 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 ("Direct inheritance is not the way"); 
}

Call:

Copy Code code as follows:

$.five ();

(2) Add multiple functions

Jquery.five =function () { 
 alert ("Direct inheritance is not the way"); 
} 
Jquery.six =function () { 
 alert ("Direct inheritance is not 2"); 
}

Call:

Copy Code code as follows:

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

The above approach faces the risk of namespace conflict, and to avoid this problem, it is best to encapsulate all global functions that belong to this plug-in into one object, as follows:

namespace inheritance
jquery.myplugin ={ 
 one:function (obj) { 
  var object = obj; 
  var id = object.attr ("id"); 
  alert (ID); 
 }, 
 two:function () { 
  alert; 
 } 
}

This actually creates another namespace for the global function: Jquery.myplugin.

2. Add JQuery object method

Most of the built-in features in jquery are provided through the methods of their objects.

jquery.fn.mymethod= function () { 
 alert (one); 
}

Call:

Copy Code code as follows:

$.fn.mymethod ();

Note: Jquery.fn is an alias for Jquery.prototype.

Example: The following is a way to behave 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 is in that style.

(1) The hermit iteration

The easiest way to ensure that the behavior is correct regardless of how many elements are matched is to always invoke the. each () method on the method's environment.

The execution of hermit iterations, while the execution of hermit iterations is critical to maintaining the consistency of plug-ins and built-in methods, within the called. each () method, this

Each DOM element is referenced 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 code as follows:

$ ("Li"). Swapclass ("This", "that")

(2) The consonant of the method

To use the consonant of a method, you must return a jquery object in all plug-in methods. The jquery object that is 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 code as follows:

$ ("Li"). Swapclass ("This", "that"). CSS ("text-decoration", "underline");

3, add a new shorthand method

Add a new shorthand 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 your jquery programming.