JQUERY BASICS – Part 1

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.

jquery-logo

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s