jQuery Get Started

jQuery Get Started

jQuery Get Started — Step-by-Step Setup Guide | TipsInLearning
Home jQuery Course jQuery Get Started
jQuery Lesson 2

jQuery Get Started

Step-by-step guide to installing jQuery via CDN, downloading locally, or using npm — then writing your first working jQuery program with practical mini-projects.

12 min read
Beginner
jQuery Setup
Free Course

In This Lesson

Course ProgressLesson 2
What You'll Learn in This Lesson
3 ways to include jQuery
CDN setup step by step
Download and local file setup
Writing your first jQuery program
How to verify jQuery is loaded
3 practical mini-projects

3 Ways to Add jQuery

Before writing any jQuery code you need to add the jQuery library to your HTML page. There are three ways to do this — choose the one that fits your project:

CDN Link
✓ Recommended
Add one script tag — no download. Fastest for beginners and most websites.
Download Locally
Offline & Production
Download the file and link it locally. Works offline, better for production.
npm Package
Advanced Projects
Install with npm for Node.js and bundler-based projects like Webpack.

Method 1 — CDN (Recommended)

A CDN (Content Delivery Network) hosts the jQuery file on servers worldwide. You just add a script tag — no download needed. This is the fastest method to get started and what most websites use.

Step-by-step CDN setup

1

Create a new HTML file

Open any text editor (VS Code, Notepad) and create a file called index.html

2

Add your HTML content

Write your normal HTML with elements you want jQuery to interact with

3

Add the jQuery script tag

Paste the CDN script tag just before the closing </body> tag

4

Add your jQuery code after it

Add a second script tag with your own code — always after the jQuery script tag

HTML — Complete CDN Setup
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My jQuery Page</title>
</head>
<body>

  <h1>Hello jQuery!</h1>
  <p>This is my first jQuery page.</p>
  <button>Click Me!</button>

  <!-- Step 1: jQuery CDN — always first -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Step 2: Your code — always after jQuery -->
  <script>
    $(function() {
      $("button").click(function() {
        $("p").hide();
      });
    });
  </script>

</body>
</html>
That's all! Save this file, open it in your browser, and click the button — the paragraph will hide. You have just written your first jQuery program.
Why CDN is fast: Most popular websites use the same jQuery CDN URL. Visitors who have already visited any of those sites have the jQuery file cached in their browser — meaning it loads instantly with zero download time on your site.

jQuery CDN Version Options

You can choose different versions of jQuery from the CDN. Here are the most useful options:

VersionCDN URLUse for
3.6.0 minifiedcode.jquery.com/jquery-3.6.0.min.js✅ Production websites
3.6.0 unminifiedcode.jquery.com/jquery-3.6.0.js🔍 Development & debugging
3.5.1 minifiedcode.jquery.com/jquery-3.5.1.min.jsStable fallback version
Minified vs Unminified: Minified (.min.js) has all spaces and comments removed — tiny file, fast to load, hard to read. Unminified (.js) is human-readable with formatting and comments — use during development when you want to inspect the jQuery source code.

Method 2 — Download Locally

Download the jQuery file and host it yourself in your project. This works offline and removes dependency on external CDN servers for production projects.

Steps to download and set up

1

Download jQuery

Go to jquery.com/download and download the compressed production jQuery 3.6.0 file

2

Save it in your project folder

Create a js/ folder and save the file as jquery-3.6.0.min.js

3

Link it in your HTML

Use a local path instead of the CDN URL in your script tag

HTML + File Structure — Local jQuery
/* Project folder structure */
my-project/
├── index.html
├── css/
│   └── style.css
└── js/
    ├── jquery-3.6.0.min.js   ← downloaded file
    └── main.js               ← your own code

<!-- Link in HTML -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>

Method 3 — npm (Advanced)

For projects using Node.js with build tools like Webpack or Vite, you can install jQuery as a package. This is for advanced setups only — beginners should use the CDN method.

Terminal — npm Install
# Install jQuery via npm
npm install jquery

# Then import it in your JavaScript file
import $ from 'jquery';

$(function() {
  $("button").click(function() {
    $("p").hide();
  });
});

Your First jQuery Program

Now that jQuery is included, here is a complete working program that shows the three key concepts — document ready, selector, and action — all working together:

HTML — Complete First jQuery Program
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First jQuery Program</title>
</head>
<body>

  <h1>Hello jQuery!</h1>
  <p>Click the button to hide me.</p>
  <button id="hideBtn">Hide Paragraph</button>
  <button id="showBtn">Show Paragraph</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // Wait for the page to fully load
    $(function() {

      // Hide button — hides the paragraph
      $("#hideBtn").click(function() {
        $("p").hide();
      });

      // Show button — shows the paragraph again
      $("#showBtn").click(function() {
        $("p").show();
      });

    });
  </script>

</body>
</html>

How to Verify jQuery is Loaded

Before writing jQuery code, confirm jQuery is actually loaded on your page using one of these two methods:

Method 1 — Browser Console

1

Open your page in a browser

Double-click your HTML file or open it with a local server

2

Open DevTools

Press F12 or right-click and select Inspect

3

Go to the Console tab and type

Type jQuery or $ and press Enter

4

Read the result

If it shows a function — jQuery is loaded ✅. If it shows undefined — jQuery is not loaded ❌

Method 2 — Quick Code Check

JavaScript — Check if jQuery is Loaded
if (typeof jQuery !== 'undefined') {
  console.log('✅ jQuery is loaded! Version: ' + jQuery.fn.jquery);
} else {
  console.log('❌ jQuery is NOT loaded — check your script tag');
}

Common Errors & Fixes

ErrorCauseFix
$ is not definedjQuery script not loadedCheck CDN URL or file path in script tag
Elements not foundCode runs before DOM loadsWrap code in $(function(){...})
Your code runs but nothing happensScript tag order wrongjQuery script tag must come before your code
Works on desktop, broken on mobileCached old versionHard refresh with Ctrl+Shift+R
Event not firing on new elementsEvent added before element existedUse $(document).on("click", "sel", fn)
Most common beginner mistake: Placing your own script tag before the jQuery script tag. jQuery must always load first. Check that the order is jQuery CDN → your code, never the other way around.

3 Practical Mini-Projects

Practice your setup with these three real working projects — copy each one into a new HTML file and test it in your browser:

Project 1 — Toggle Hide/Show
jQuery — Toggle
<button id="toggleBtn">Toggle Text</button>
<p id="myText">This text can be toggled!</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    $("#toggleBtn").click(function() {
      $("#myText").toggle();
    });
  });
</script>
Project 2 — Color Changer
jQuery — Color Changer
<button id="redBtn">Red</button>
<button id="blueBtn">Blue</button>
<button id="greenBtn">Green</button>
<p id="colorText">My color changes!</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    $("#redBtn").click(function() {
      $("#colorText").css("color", "red");
    });
    $("#blueBtn").click(function() {
      $("#colorText").css("color", "blue");
    });
    $("#greenBtn").click(function() {
      $("#colorText").css("color", "green");
    });
  });
</script>
Project 3 — Dynamic List
jQuery — Dynamic List
<input type="text" id="itemInput" placeholder="Enter item name">
<button id="addBtn">Add Item</button>
<ul id="myList"></ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    $("#addBtn").click(function() {
      const item = $("#itemInput").val();
      if (item !== "") {
        $("#myList").append("<li>" + item + "</li>");
        $("#itemInput").val("");
      }
    });
  });
</script>

Best Practices

Always use document ready

Wrap all jQuery in $(function(){...}) to ensure the DOM is loaded before your code runs

jQuery script tag always first

Always load jQuery before your own code — your script tag must come after the jQuery script tag

Use minified for production

Use .min.js on live websites for fastest load times — unminified is only for development

Use external JS files for real projects

Put jQuery code in a separate main.js file rather than inline in your HTML

Try It Yourself

Complete these challenges to make sure everything is working:

Challenge — jQuery Setup Practice
1Create a new HTML file, add the jQuery CDN script tag, open it in a browser and type jQuery in the console — confirm it shows the jQuery function
2Add a paragraph and a button. Write jQuery inside document ready to hide the paragraph when the button is clicked using $("p").hide()
3Replace .hide() with .fadeOut(800) and observe the smooth animation. Then try .slideUp() for a different effect
4Build the color changer project from this lesson. Add a fourth button for "purple" that changes the text color to purple
5Create the dynamic list project and add a second button that removes the last item from the list using $("#myList li:last").remove()
Lesson Summary — Key Takeaways
1CDN is the easiest setup — one script tag, no download, works immediately
2jQuery script tag must always come before your own script tag
3Always wrap code in $(function(){...}) to wait for DOM ready
4Use .min.js for production — unminified only for development debugging
5Verify jQuery loaded by typing jQuery in the browser console
6$ is not defined error means jQuery script tag is missing or in wrong order

Frequently Asked Questions

Common questions beginners ask when getting started with jQuery:

There are three ways to install jQuery. The easiest is using a CDN link — add a script tag with the jQuery CDN URL just before your closing body tag and it works with no download needed. The second way is downloading the file from jquery.com and linking it locally. The third way is using npm for Node.js projects by running npm install jquery in your project folder.

Use the minified version which has dot min dot js in the filename for all production websites. Minified means all whitespace and comments have been stripped out to make the file as small as possible for faster loading. Use the unminified version without dot min during development and debugging because it is formatted and human-readable with helpful comments inside.

A CDN is a Content Delivery Network — a global system of servers that host files close to users around the world. Using a CDN for jQuery means the file loads from a server physically near your visitor which is faster than loading from your own server. Also many popular websites use the same jQuery CDN URL so visitors may already have it cached in their browser meaning it loads instantly with zero download time.

Place the jQuery script tag just before the closing body tag at the bottom of your HTML. Your own custom code should come in a second script tag after the jQuery script tag. This order is critical — jQuery must load before your code or you will get a dollar sign is not defined error. If you must put scripts in the head tag use the document ready function to make sure the DOM loads first.

Open your page in a browser, press F12 to open DevTools, go to the Console tab, type jQuery or just the dollar sign and press Enter. If jQuery is loaded it shows you the jQuery function object. If it shows undefined or an error then jQuery is not loaded and you need to check your script tag URL or file path is correct.

Dollar sign is not defined means jQuery has not loaded when your code tries to run. The most common causes are the CDN URL or local file path in your script tag is wrong, your own code script tag comes before the jQuery script tag instead of after, or you are running jQuery code before wrapping it in the document ready function. Check the script tag order and check your URL for typos.

Post a Comment