How to use jQuery API

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 a jQuery library, we have to first include it on 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 on 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="https://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 AttributesDescription
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 a 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 are performed on the elements that are all same as the javascript actions.

The Document Ready Function

To load the script as page get loaded, there is a ready event in jQuery. This 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 a lot more things to go in future posts. Keep in touch and go through them.

Leave a Reply

Your email address will not be published. Required fields are marked *