« Back
in javascript jquery read.

Begin with Jquery.

As we all know, jQuery is a widely used, cross-platform javascript library, to simplify client side HTML scripting. This article contain no principles or concepts, but just the basics, mainly DOM element selections, traversal, manipulation and event bindings.

jQuery includes the following features:

  • DOM element selections with multi browser support
  • DOM traversal and modification based on CSS selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors
  • Events, Effects and animations
  • AJAX
  • Extensible through plug-ins
  • Utilities – such as user agent information, feature detection

Including Jquery

jQuery is a single javascript file, with all of its functions, and can be included either from a local copy or from a public CDN like jQuery, Google, Microsoft, etc.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Running scripts after document ready is a good practice to wrap your scripts in a document ready handler, because it ensures, the DOM is ready and all the elements actually exists.

$(document).ready(function() {         
   // scripts here 
});

Selecting HTML elements jQuery supports all the CSS3 selectors, and allows you to select any element present in your HTML. You need to wrap the selector in $("") (Both single quotes & double quotes works fine). Some of them are shown below,

$('div') //selects all div elements

$('#myId') //Selects element with id 'myId'

$('.myClass') //Selects element with class 'myClass'

$('a.follow') // Selects anchor tag with class 'follow'

$('div#myDiv ul li a.follow span') // Selects span inside anchor tag with class 'follow', which is inside the 'ul li' inside div with id 'myDiv'

$('input[type=checkbox]') // selects checkboxes

$('input:checked') //selects checked inputs

$('ul.topnav > li') // slects all direct childs of ul with class 'topnav'

$('ul:nth-child(3)' //Selects third chald of ul

See more about jQuery selectors here

Manipulating Elements

Selected HTML elements can be manipulated using jQuery. Manipulations include, copying, removing, changing attributes, css styles, html, and all.

I will demonstrate some of the common manipulations below. Note: Here am using ‘.element’ as selector, and you can use any selected element instead.

$('.element').html('My new Html'); //change html of element 
$('.parent').clone().appendTo('.element'); // appends a copy of HTML element with class 'parent' to '.element'.
$('.element').append('<span>hey</span>');
$('.element').wrap(''); // wraps a div around selected element. 
$('.element').addClass('newClass'); // Adds a new class to element
$('.element').removeClass('element'); // removes given     class.
$('.element').toggleClass('active'); // toggles class to selected elements, adds if not exist or removes if it already have.
$('input').val('New');// sets all inputs value to 'New' 
$('img').prop('src', 'http://imgurl'); // changes elements     attributes 
$('.element').css('width', '150px'); //changes element width, .css function changes the style attribute of element.
$('.element').css('opacity', '0.2'); // changes opacity 

jQuery offers a wide range of commands to manipulate elements, append(), prepend(), appendTo(), prependTo(), insert(), insertBefore(), insertAfter, after(), before(), empty(), wrap() etc.

More about DOM manipulation

Conditions & traversals

Apart from selectors, jQuery allows DOM traversal to find an element, and offers some selectors, that can be used for conditions. For traversal, we can use, closest(), children(), parent(), .siblings(), filter(), find(), each(), has(), last(), next(), etc. and is(), has() etc for checking conditions.

These commands can be used like,

$('li.item').find('.missing') // selects elements with class 'missing', inside li
$('li.item').closest('a.link') // selects closest a with class 'link'
$('li.item').siblings('.new') //selects sibling elements with class 'new'
$('li').hasClass('element') // selects element with specified class
$('.element').is(':visible) // check if element is visible

//check and do
if ($(".element").is("visible")) {  
      //do something
      $(".element").hide();
}

Events

jQuery offers a wide range of events to bind our functions. some of them are, click(), blur(), keyup(), keypress(), focus(), scroll(), etc. These functions can be directly binded to a element, or we can use some listeners to bind them. we can bind functions to these event, using, on(), bind() functions.

I’ll demonstrate some examples below.

//normal usage
$('a').click(function(){
   //Do something here on clicking a tag
});

//show div with callback
$('div').show('fast',function(){
   //Do something here after showing div
});

//binding with listeners
$(document).on('click', 'a', function(){
   //Do something here
});

Above on() function, adds listener to future elements also, in the above example, it will add click event to a tags, inside document. We can use any selector instead of document and a We can manually trigger those events like,

$('a').click(); //clicks a tag
$('input.name').focus(); // focuses selected element

View more events

We can use some animations too with this events like show/hide. some of them are fadeIn(), fadeOut(), slideUp(), slideDown(), slideToggle(), with optional callback and speed parameters(slow, fast, medium or in milliseconds).

//shows with fade effect
$('a.link').fadeIn('slow', function(){
    //do something
}); 

//hides with slide effect
$('a.link').slideUp(800, function(){
    //do something
}); 

We can also do some css changes with animations, using jQuery’s animate() function. for example,

$( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
}, 5000, function() {
    // Animation complete callback.
});

View more effects

These are just basics..

I know these are just basics of jQuery, but I hope it helps someone. There are much more powerful methods, that you can do with jQuery.

And remember, I’ve introduced the above commands in a rough way, with testing it anywhere while writing this blog. So, Please feel free to point out my mistakes & ask your doubts.

All the jQuery methods are well explained in the jquery docs, and you can find it here.