Introduction to JQuery

JQuery Introduction: In this tutorial, we are going to learn about the introduction to JQuery.
Submitted by Siddhant Verma, on November 14, 2019

Should we learn JQuery?

As and when we talk about JQuery and become more elaborative, I think it's best you make a judgement of your own and decide whether or not learning JQuery is essential. You might think this dude is super old and aging quick but JQuery is used a hell lot even today. Maybe not directly, but with certain modern JS APIs and frameworks. A lot of JS frameworks are built on top of JQuery. You don't need to be a ninja and it will hardly take any time to learn the basics so why not?

When should we learn JQuery?

The next thing is to know if this is the right time for you to read this article further and start your journey on learning this JS library. The simple answer is the answer to this question- am I familiar with HTML, CSS and JavaScript? If yes, then great! If not, you might want to brush up on these prerequisites first.

What is JQuery?

JQuery is gigantic, free, open source JavaScript library. Remember, it is not a programming language. It's built on top of the plain old vanilla JS so don't think that if JS seems complex to you, JQuery will save you. No way, it is highly essential to be a bit comfortable in JavaScript so you can learn, master, understand JQuery and most of all appreciate it. It is a JavaScript library that enhances JS for us and we can see that enhancement in action when we understand the crux of JavaScript. It allows us to work with the DOM in a much easier way along with event handling and making AJAX requests. It's a simple replacement for vanilla JS which makes writing JS so much easier with so much less lines of code. You're doing the same stuff but now with less lines of code.

Sometimes when we use events in JavaScript, the browsers interpret those events in their way which could be different from each other. JQuery takes away those differences giving us a one fix solution approach to working with the DOM and events.

In addition to that, it has some super awesome features such as chaining which makes coding verbose and faster. We'll look at this a bit more deeply later.

One of the most exciting features of JQuery is the plethora of plugins available to us which we can use for making enhancements to our website.

So in a nutshell you can use JQuery for manipulating the DOM using CSS Selectors and thus learn how to add, update and delete HTML elements on the page. You can also use it for event handling, animations and super cool plugins for your website.

Using JQuery

With a code editor ready, the first thing we want to learn is how to use JQuery in our website. Head over to https://code.jquery.com/ and select the oldest version of JQuery's uncompressed CDN or you can also simply copy the CDN from below,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You can also download JQuery and include that script to your HTML document. However, using CDN's is the best and easiest way I feel so we'll do that only.

Index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

All we have done till now is created a blank HTML page with absolutely nothing on it, included JQuery CDN and also an index.js where all our local JQuery JS will go.

$(document).ready(function(){
    alert("We're now using JQuery! Awesome.");
})

Output

We get an alert when the page loads.

Now we have a good knowledge of what JQuery is and how to use it, we’ll fill this HTML with stuff and see how we use JQuery selectors, event handling, etc.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples