JQuery

Course Fee:AED15,000.00/Course

This jQuery Tutorial has been prepared by well experienced front end programmers who are using Javascript and jQuery extensively in their projects. This tutorial has been developed for the jQuery beginners to help them understand the basics to advanced of jQuery Framework. After completing this tutorial, you will find yourself at a great level of expertise in jQuery Framework, from where you can take yourself to the next levels.

jQuery Tutorial

What is jQuery?

jQuery is a lightweight Javascript library which is blazing fast and concise. This library was created by John Resig in 2006 and

jQuery has been designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

jQuery can be used to find a particular HTML element in the HTML document with a certain ID, class or attribute and later we can use jQuery to change one or more of attributes of the same element like color, visibility etc. jQuery can also be used to make a webpage interactive by responding to an event like a mouse click.

jQuery is free, open-source software which comes under the permissive MIT License. As of Apr 2021, jQuery is used by 77.8% of the top 10 million most popular websites.

jQuery has been developed with the following principles:

  • Separation of JavaScript and HTML, which encourages developers to completely separate JavaScript code from HTML markup.

  • Brevity and clarity promotes features like chainable functions and shorthand function names.

  • Eliminates of cross-browser incompatibilities, so developers does not need to worry about browser compatibility while writing code using jQuery library.

  • Extensibility, which means new events, elements, and methods can be easily added in jQuery library and then reused as a plugin.

jQuery Online Editor

We have provided jQuery Online Editor which helps you to Edit and Execute the code directly from your browser. Try to click the icon Execute Program to run the following jQuery code to print conventional "Hello, World!".

Below code box allows you to change the value of the code. Try to change the value of Hello, World! and run it again to verify the result.
<html> <head> <title>The jQuery Example</title> <script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"> </script> <script type = "text/javascript"> $(document).ready(function() { $("h1").html("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>

Browser Support

As of April 2022, jQuery 3.0 and newer supports "current-1 versions" of Firefox, Chrome, Safari, and Edge as well as Internet Explorer 9 and newer versions. On mobile it supports iOS 7 and newer, and Android 4.0 and newer.

jQuery and Javascript Jobs

jQuery and Javascripts both are very high in demand and all major web applications are making use of jQuery in one or another way. We explored many major job websites before writing this tutorial and found that there are numerous openings across the world in multi national companies.

Average annual salary for a Javascript and jQuery developer is around $150,000. Though it can vary depending on the location. Following are the great companies who are using Kotlin:

  • Google

  • Amazon

  • Netflix

  • Zomato

  • Uber

  • Trello

  • Coursera

  • Basecamp

  • Unacademy

  • Byjus

  • Many more...

So, you could be the next potential employee for any of these major companies. We have develop a great learning material for jQuery which will help you to prepare for the technical interviews and certification exams based on jQuery. So, start learning jQuery using our simple and effective tutorial anywhere and anytime absolutely at your pace.

Before you Start

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM) and any text editor. As we are going to develop web based application using jQuery, it will be good if you have understanding on how internet and web based applications work.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery Features

jQuery simplifies various tasks of a progammer by writing less code. Here is the list of important core features supported by jQuery −

  • DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.

  • Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

  • AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.

  • Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.

  • Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).

  • Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

  • Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

Setting up jQuery

There are two ways to use jQuery.

  1. Local Installation − You can download jQuery library on your local machine and include it in your HTML code.

  2. CDN Based Installation − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

jQuery - Local Installation

You can download latest version of jQuery on your web server and include the downloaded library in your code. We suggest you to download compressed version of the library for a better performance.

  • Go to the https://jquery.com/download/ to download the latest version available.

  • Now put downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery/jquery-3.6.0.js.

  • Finally include this file in your HTML markup file as shown below.

Example

Now you can include jquery library in your HTML file as given below. Try to click the icon run button to run the following jQuery code −

<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { document.write("Hello, World!"); }); </script> </head> <body> <!-- HTML body goes here --> </body> </html>

jQuery - CDN Based Installation

You can include jQuery library into your HTML code directly from a Content Delivery Network (CDN). There are various CDNs which provide a direct link to the latest jQuery library which you can include in your program.

Example

Now let us rewrite above example using jQuery library from Google CDN. Try to click the icon run button to run the following jQuery code −

<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { document.write("Hello, World!"); }); </script> </head> <body> <!-- HTML body goes here --> </body> </html> <html>

We are using our own Tutorials Point CDN version of the library throughout this jQuery Tutorial. You can find many other CDNs on the internet to include jQuery in your web pages.

<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { document.write("Hello, World!"); }); </script> </head> <body> <!-- HTML body goes here --> </body> </html> <html>

How to Call a jQuery Library Functions?

As almost everything, we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

To do this, we register a ready event for the document as follows −

$(document).ready(function() { // do stuff when DOM is ready });

To call upon any jQuery library function, use HTML script tags as shown below. Try to click the icon run button to run the following jQuery code −

<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script> $(document).ready(function() { $("div").click(function() {alert("Hello, world!");}); }); </script> </head> <body> <div>Click on this to see a dialogue box.</div> </body> </html>

How to Use Custom Scripts?

It is better to write your custom code in the custom JavaScript file : custom.js, as follows −

/* Filename: custom.js */
$(document).ready(function() {
                            $("div").click(function() {
                            alert("Hello, world!");
                            });
});

Let's keep this file in /jquery directory and then we can include custom.js file in our HTML file as follows. Try to click the icon run button to run the following jQuery code −

<!doctype html> <html> <head> <title>The jQuery Example</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> <script src="https://www.tutorialspoint.com/jquery/custom.js"></script> </head> <body> <div>Click on this to see a dialogue box.</div> </body> </html>

Using Multiple Libraries

You can use multiple libraries all together without conflicting each others. For example, you can use jQuery and MooTool javascript libraries together. You can check jQuery noConflict Method for more detail.

What is Next ?

Do not worry too much if you did not understand above examples. You are going to grasp them very soon in subsequent chapters.

Next chapter would try to cover few basic concepts which are coming from conventional JavaScript.