Code has been added to clipboard!

jQuery Introduction

Query is a JavaScript library based on the principle "write less, do more.". This library simplifies JavaScript event handling, traversing HTML documents, AJAX-based interactions, and animations.

To start using this library you only need basic knowledge of CSSHTML, and JavaScript, making it fairly beginner-friendly.

What Can jQuery Do?

The main advantage of jQuery is how it streamlines the development of various features that would require extensive work with JavaScript to implement.

Another important feature is the compatibility of jQuery - the team behind it has done a great job addressing the cross-browser issues, and jQuery will work the same on all major browsers.

To sum it up, the jQuery library supports the following features:

  • HTML event methods
  • HTML/DOM manipulation
  • CSS manipulation
  • AJAX
  • Utilities
  • Effects and animations

In this tutorial we will talk about each of these features briefly, and expand on them in the following tutorials.

Syntax

All statements using jQuery come from a basic template for applying functions and methods to selected HTML elements and their attributes:

$(selector).methodOrFunction();

This method can be modified depending on the selector and the action, which is the applied method or function.

To summarize: jQuery statements follow the pattern where an item from the HTML DOM is selected and action in the form of a method or function is applied.

Document Ready Event

Before jQuery applied, it is important to know that all HTML elements have been loaded, with the CSS being fully computed, so the jQuery is applied properly.

To make sure that is the case, we place all jQuery inside the "document ready" event, meaning that the statements inside the block of code following it will only be applied once the web page has finished loading. Here's an example you can copy and paste into your code to get started with applying jQuery methods.

Example
$(document).ready(function(){

   // All jQuery statements go here

});

Find Coding Exercises

Alternatively, now there is a shorter way of writing the "document ready" event for convenience:

Example
$(function(){

   // All jQuery statements go here

});

Find Coding Exercises

Note: Keep in mind though, that while waiting for the page to load fully is the way that jQuery is usually applied, there are also instances when it is preferable to apply it before the page is loaded to, for example, hide a certain element, or get the size of an element or image, which has not loaded yet.

HTML Event Methods

This library also provides ways to simplify event handling.

Methods that jQuery provides are short, simple and allow you to:

  • Add, change and remove event handlers on specified elements.
  • Trigger various events via code.
  • React to events in more specific, complex ways.

HTML DOM And CSS Manipulation

jQuery provides methods that can be used to access the HTML DOM and CSS in different ways.

The manipulation methods in the jQuery library allow you to:

  • Retrieve DOM information about the HTML elements, their attributes, and the values of attributes
  • Get the values of computed CSS properties which belong to a specified set of elements
  • Remove and add HTML elements in different ways based on the method used
  • Modify the values of CSS properties of HTML elements.

AJAX

AJAX, simply put, is a way of using JavaScript that allows you to refresh a part of the page without needing to refresh the whole.

The jQuery library introduces a full suite of AJAX-related methods to make its implementation easier.

The AJAX-based methods in the jQuery library allow you to:

  • Register, start, stop and follow AJAX events
  • Encode elements as strings for submission
  • Load data from the server via asynchronous requests

Utility Methods

Additionally, there are utility-based methods in the jQuery library, which allow you to do thing such as:

  • Execute JavaScript globally
  • Examine arguments to determine their data type
  • Parse string for various purposes
  • Clear the queue or move on to the following function in it

Effects and Animations

One of the features that jQuery introduces is the variety of methods for implementing animations and effects it provides.

These methods allow you to:

  • Performs custom animations via modifying a set of CSS properties
  • Animate and set the opacity or position of various elements
  • Disable and enable animations globally
  • Create and manipulate a queue of animations