Hello World jQuery Plugin

In this tutorial we are going to make a very simple jQuery plugin. Sometimes its important just to see the simple first step, instead of getting caught in the complexities of detail. So lets start writing the our Hello World Plugin sayHello.

(function ( $ ){
 $.fn.sayHello=function(){
  this.html("Hello World from jQuery Plugin");
 };
})(jQuery); 

First we need to wrap our code into an self executing function, so that when the page load it executes. Then we pass a jQuery object $ as a parameter to avoid variable conflict. Next we need to extend the jQuery Prototype $.fn. and add a new function sayHello, this function will change the HTML of the target div with the content as shown above. You can use it as shown below,

<div id="helloWorldDiv"></div>
<script>
$(document).ready(function () {
  $('#helloWorldDiv').sayHello();
});
</script>