Learn to write Jquery plug-in example tutorial in 10 minutes_jquery

Many friends have used jQuery plug-ins, but few people have written jQuery plug-ins themselves. This article briefly describes the implementation method of jQuery plug-ins in the form of examples. Share it with everyone for your reference. The specific method is as follows:

Specifically, it actually encapsulates some commonly used, practical, and general functions. To put it simply, it means putting these codes in a method to achieve the effect of repeated use, so that you don’t need to use it every time. I have to rewrite this function every time.

Now that Jquery has added the concept of plug-in, you just need to write it according to its specific format just like you usually write functions, but it is not too complicated. It's up to you to believe it or not, but I do.

Next, I will explain it with simple code. If you don’t know how to write a plug-in after reading it, I can only say that I am speechless

The specific steps are as follows:

Step 1: Define the plug-in

$(function() { 
  $.fn.插件名称 = function(options) { 
   var defaults = { 
     Event : "click",    //触发响应事件 
     msg : "Holle word!"    //显示内容 
   }; 
   var options = $.extend(defaults,options); 
   var $this = $(this);    //当然响应事件对象 
   //功能代码部分 
   //绑定事件 
   $this.live(options.Event,function(e){ 
     alert(options.msg); 
   }); 
  } 
}); 
 

Step 2: Call the plug-in

$(function() { 
  //绑定元素事件 
  $("#test").插件名称({ 
   Event : "click",    //触发响应事件 
   msg : "插件原来就是这么简单!"   //显示内容 
  }); 
}); 
 

Now, the simplest plug-in is done! Less than 10 minutes! I believe everyone should understand it! The jQuery plug-in turns out to be that simple.