HTML,
CSS, and JavaScript are the three fundamental languages of the web. We
structure our websites with HTML, style them with CSS, and add interactive
functionality with JavaScript. In fact, most animations and any action that
happens as a result of a user clicking, hovering, or scrolling are constructed
with JavaScript.
jQuery is
the “Write Less, Do More” JavaScript library. It is not a programming language,
but rather a tool used to make writing common JavaScript tasks more concise.
jQuery has the added benefit of being cross-browser compatible, meaning
you can be certain the output of your code will render as intended in any
modern
What is jQuery?
- jQuery is a fast, small, lightweight, and feature-rich JavaScript
library. It is designed to simplify the client-side scripting of HTML. It makes
things like DOM traversal and manipulation, event handling, animation, and Ajax
much simpler. With a combination of versatility and extensibility, jQuery has
changed the way that millions of people write JavaScript. As of May 2019,
jQuery was used by 73% of the 10 million most popular websites.
- jQuery was created by John Resig in 2006 with the motto “Write
less, do more”.
- The main purpose of jQuery is to make JavaScript faster, easier,
more concise, more effective, and more attractive. jQuery helps the developers
to make websites more dynamic and interactive with jQuery.
- jQuery takes a lot of common functionalities of Vanilla
JavaScript which required many lines of code and wraps them into pre-defined
and built-in methods which you can call in a single line of code in jQuery.
Why jQuery?
jQuery Syntax is designed to make it easier to
achieve a wide collection of functionalities. Let us now see one by one, why we
should learn jQuery and use it over vanilla JavaScript.
- LIGHT-WEIGHT: jQuery
is a very lightweight library of JavaScript. Its minified file is just about 19
kB.
- SHORT SELECTORS: jQuery
provides us a shorter syntax to select any element of our DOM (Document Object
Model). Thus, using jQuery, we can easily target any of the DOM elements
- DOM MANIPULATION: jQuery
makes the DOM manipulating really with short and simple syntax by its selector
engine named Sizzle.
- DOM TRAVERSING: jQuery
provides us built-in and predefined keywords to traverse through the DOM, which
is really hassle-free for the developers.
- EVENT HANDLING: jQuery
provides us an extremely easy and elegant way to Handle any keyboard or mouse
event in our web application such as clicking on a button or pressing the enter
key or firing the blur event.
- AJAX SUPPORT: jQuery
helps us to develop dynamic and interactive web applications with the latest
AJAX technology. AJAX calling with jQuery is much easier than vanilla
JavaScript.
- ANIMATION: jQuery
has a sea of built-in animation effects that can provide your website an
elegant look.
- PLUG-INS: jQuery
provides a lot of plug-ins to use in our web applications to make high-level
effects, advanced and themeable widgets
- CROSS-BROWSER SUPPORT: JQuery has cross-browser support, works efficiently in IE
6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+ browser.
jQuery History
jQuery
was first released in January 2006 by John Resig at BarCamp NYC. It is
currently headed by Timmy Wilson and maintained by a team of developers.
Nowadays, jQuery is
widely used technology. Most of the websites are using jQuery. So, you can say that out of the lot of JavaScript
frameworks, jQuery is the most popular and the most extendable. Many of the
biggest companies on the web use jQuery.
Some of these companies are:
- Microsoft
- Google
- IBM
- Netflix
JQuery Prerequisite
It is always advised to a fresher to learn the basics of web designing
before starting to learn jQuery. He should learn HTML, CSS and JavaScript
first. But, if you belong to a technical background, it is up to you.
If you are a fresher and want to study these subjects first.
How to use jQuery?
There are
two ways to use jQuery.
- Local
Installation − You can download jQuery library on your
local machine and include it in your HTML code.
- CDN Based
Version − You can include jQuery library into your HTML code directly from
Content Delivery Network (CDN).
Local Installation
Go to
the https://jquery.com/download/ to
download the latest version available.
Now put
downloaded jquery-3.6.0.js file in a directory of your
website, e.g. /jQquery.
Example
Now you
can include jQuery library in your HTML file as follows −
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="./jquery/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
This will
produce following result −
CDN Based Version
You can
include jQuery library into your HTML code directly from Content Delivery
Network (CDN). Google and Microsoft provides content deliver for the latest
version.
We are using Google CDN version of the library
throughout this tutorial.
Example
Now let us rewrite above example using jQuery
library from Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
This will produce following result −
