jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
In jQuery all the codes starts with “jquery” it’s kind of a door, but when we write some long functionality we can see lot of jquery terms in the code. We don’t really want to repeat it everywhere, instead of “jquery” we can use “$” symbol.
jquery == $
Ex, below are two methods that return the same o/p. In this example we write hello world in the browser console (F12 shortcut key to open browser console window) after the page load.
jQuery(function () { console.log('hello world'); });
OR
$(function () { console.log('hello world'); });
Selectors
We can use CSS3 Selectors for selecting particular tag or set of tags from the page.
Ex,
<html> <head>
<style> p { background-color: #ffc022; } </style>
</head> <body>
<div id="container">
<h1 class="Info">Introduction</h1>
<a href="/newpage">move to the new page</a></div>
</body> </html>
In the above HTML code we call div using id, in this method id should be unique,
$(‘#container’)
Values for class be repeated and have multiple space-separated values
$(‘.Info’)
Adding and Removing CSS class
After selecting using selector we can add or remove CSS class using below methods
$( "p" ).addClass( "newClass onemoreClass" ) $( "p" ).removeClass( "newClass onemoreClass " )
Events
In the jQuery we can call events in varies ways, in below method we add a function within click event. We have lot of events available in jQuery.
$( "#butSave" ).click(function() {
alert( "Handler for .click() called." );
});
Another method, here we are attaching the event into a button.
$( "#btnSave" ).on( "click", function() {
alert( "Handler for click called using event attach method " );
});
Below code will remove the event attachment from button.
$( "#btnSave" ).off( "click", function() {
alert( "Handler for click is removed" );
});
Below code will fire only once, there is some other event attaching methods also available in jQuery
$( "#btnSave" ).one( "click", function() {
alert( "Handler for click called using event attach method " );
});
Selecting right version of jQuery
There are two major release available in jQuery, one is 1.x and another is 2.x. Select 1.x version if you want to support your application in IE 8 and the below version browsers,else select 2.x.
Ravichandran Blog 