Getting Started

JQuery is a light-weight JavaScript library, which has made HTML document traversal, manipulation, event handling & manipulation much easier. Let's see how we can add JQuery into a webpage:


Adding JQuery into a webpage


Two different approaches can be used to include JQuery into your webpage


Downloading JQuery File


Once you've downloaded JQuery, you can see that it has a .js extension, because it is a Javascript Library. You can reference this .js file with the HTML <script> tag. We need to include this <script> tag within the <head> section.



<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
    JQuery Getting Started
  </title>
<script src="jquery-3.6.0.min.js"></script>
</head>
  <body>
  <p>Hello World </p>
  </body>
</html>
Live Demo!


Always include the JQuery file before your custom scripts, or it can cause issues!


Including JQuery from CDN


We also have an alternative approach for including JQuery. It can be included in our document through freely available CDN (Content Delivery Network) links if you don't want to download the JQuery file and host JQuery yourself.

CDN can be beneficial in terms of performance as it reduces the loading time.


JQuery's CDN provided by Stackpath


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Live Demo!


You can include the latest JQuery CDN from JQuery by Stackpath.


Creating our first JQuery powered web page


Let's see how we can include JQuery and manipulate any DOM element:



<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Web Page With JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Live Demo!

In the above example, we are changing the css color property of <h1> using JQuery. We'll learn more about it in detail in the next topics!