How to use jquery API

In the introduction of jquery we told that jquery is the collections of scripts written in JavaScript to perform various task including the document traversal and manipulation, event handling, animation etc. We also expressed some of the benefits of using the jquery libraries.  Now we are talking how to utilize the features of jquery and jquery API.

Including the jQuery library

To use jQuery library, we have to first include it in our web page or link it. The jQuery library is a single JavaScript file which contains all - common DOM, event, effects, and Ajax functions. To take advantage of it just download the javascript file of jquery from the website. After downloading the file, call it in your page.

<script type="text/javascript" src="jquery.js"></script>

Alternatively you can call the api from the internet sites like of Google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script&gt

jQuery Syntax

The jQuery syntax is very easy, it's tailor made for selecting HTML element(s). After the selection, some action is defined on the element(s) selected .

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery.
• A (selector) to "query (or find)" HTML element(s).
• A jQuery action() to be performed on the element(s).

jQuery Selectors

The jquery selectors are identical to the CSS selectors. Like CSS, jQuery also uses three different ways of selecting the elements, either by the name, id or the class attributes. These selectors are respectively called as element selectors, id selectors and class selectors.

Tag Attributes	Description
Name (element selectors)	Uses the tag name available in the DOM. Syntax -  $('element')For example $('p')selects all paragraphs in the document.
ID (#id selectors)	Uses the tag available with the given ID in the DOM. Syntax -  $('#idname')For example$('#wrapper') selects the single element in the document that has an ID of wrapper.
Class (.class selectors)	Uses the tag available with the given class in the DOM. Syntax -  $('.classname')For example $('.button') selects all elements in the document that have a class of button.

The actions that is performed on the elements are same as the javascript actions.

The Document Ready Function

To load the script as page get loaded, there is ready event in jQuery. Thi helps in manipulating the script as the document is ready. In the ready event function you can call the script written in jQuery.

$( document ).ready(function() {

// Your code here.

});

Final words - These are just basics of jQuery API, how to use them. There are alot more things to go in future posts. Keep in touch and go through them.