Learn jQuery in 5 minutes!
This post helps you to learn jQuery in 5 minutes. If you do not know what jQuery is, jQuery is an open-source cross-browser javascript framework. jQuery is deployed in many sites as the javascript framework. Below is a Hello World jQuery function
$(document).ready(
function() {
alert('hello world');
});
The $ in jQuery stands for the function jQuery(). The jQuery function selects an element from the document. In the above example, it selects the document element. $(document).ready() is an eventhandler which is triggered when the document is loaded in the browser. The function shows a ‘hello world’ message box when the document is loaded.
jQuery selector API is very robust. $(‘div’) selects all div elements. $(‘#elementId’) selects all elements with an id=elementId. $(‘.className’) selects all elements with class=className. Please check the link for a complete reference of the selector API. The following code is an example of selector API:
$(document).ready(
function() {
// changes the background color of all div elements to red
$('div').css('background', 'red');
// changes the background color of element with id = red to red
$('#red').css('background','red');
// changes the background color of element with class = red to red
$('.red').css('background','red');
// changes the background color of all input elements to red
$('input').css('background','red');
// changes the background color of input elements with name = red to red
$('input[name=red]').css('background','red');
// changes the background color of input elements with name ending with red to red
$('input[name$=red]').css('background','red');
});
jQuery selectors can select a group of elements. $(‘input’) selects all input elements. Within this group of elements, it is possible to find a element with a specific id. $(‘input’).find(‘#txtName’); will find an input element with an id = txtName. It is also possible to filter elements using a filter function. The following method filters all elements which has ‘txt’ within it:
$(document).ready(
function () {
$('input').filter(
function () {
// $(this) gets the element for which this function is called
// indexOf() gets the position of the substring within the string
// if indexOf() returns -1, then the substring does not exist within the string
if($(this).attr('name').indexOf('txt')!=-1)
return true;
else return false;
});
});
Arrays of elements can be processed using the each function. For eg. $(‘.number’).each(sum); will call the sum function which will calculate the sum of all numbers.
<div class="number">12</div> <div class="number">23</div> <div class="number">5</div>
var sum = 0;
$(document).ready(
function () {
$('.number').each(
function () {
// parseInt() converts the text to integer
// .text() gets the inner text within the div
sum = sum + parseInt($(this).text());
});
});
jQuery allows to write event handlers for common events like click, change, dblclick, keydown, keyup, mousedown etc. For eg, the following code writes an event handler when the value in a textbox changes:
$(document).ready(
function() {
// this event handler is triggered when value of textbox changes
$('#txtAmount').change(
function () {
// gets the value in the textbox
var txtBoxValue = $(this).val();
});
});
To trigger a click event, $(‘#btnSubmit’).click(); will do. jQuery provides two generic functions – bind() and trigger(). The bind() function can bind an eventhandler to an event. $(‘#id’).bind(‘click’, fn); is the equivalent of writing a click event handler. The trigger() function can trigger $(‘#id’).trigger(‘click’) triggers the click event on an element. Please see the link for a complete reference of jQuery Event API.
$(‘selector’).text() gets the text of the selected element. The same function can be used to set the text within the selected element. $(‘selector’).text(‘text’) sets the text within the selector. $(‘selector’).html() and $(‘selector’).html(‘html’) is used to get and set the html contents respectively. The .val() function works for input elements. $(‘input’).val() gets the value of the input element. $(‘input’).val(‘value’) sets the value for the input element. $(‘selector’).attr(‘attrName’) gets the attribute of an element. $(‘selector’).attr(‘attrName’, attrValue) sets the attribute value for the selected element.
jQuery also has a rich API for manipulating HTML contents. $(‘selector’).addClass(‘className’) adds a class to the selected elements. $(‘selector’).removeClass(‘className’) removes the class from the selected elements. The following code illustrates the jQuery manipulation API:
$(document).ready(
function() {
// appends the row to a table
$('table tbody').append('<tr><td>Sample column</td></tr>');
// removes the table
$('table').remove();
// replaces the table with a div
$('table').replaceWith('<div>Sample div</div>');
// removes the readonly attribute
$('input').removeAttr('readonly');
});
Apart from the core jQuery API, jQuery has a number of plugins. jQuery UI is quite popular. jQuery can also be used for a lot of animations. Finally, jQuery can be used to implement AJAX calls. I prefer the jQuery AJAX API to the Microsoft AJAX framework. jQuery AJAX works well with the Microsoft MVC framework.
