Friday, April 24, 2015

Basics before writing a jquery plugin


Jquery Basics


Take a look at this code:  

$( "a" ).css( "color", "red" );

This is some pretty basic jQuery code, but do you know what's happening behind the scenes? Whenever you use the $ function to select elements,
it returns a jQuery object. This object contains all of the methods you've been using (.css(), .click(), etc.) and all of the elements that fit your selector.
The jQuery object gets these methods from the $.fn object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well.


Write your first jquery plugin


Let's say we want to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called greenify to $.fn and it will be available just like any other jQuery object method.

$.fn.greenify = function() {

    this.css( "color", "green" );

};

$( "a" ).greenify(); // Makes all the links green.



Notice that to use .css(), another method, we use this, not $( this ).
This is because our greenify function is a part of the same object as .css().

for more detail refer JQUERY