jQuery — Get Started

Including jQuery

From CDN (Recommended)

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Local File

Download from jquery.com and reference locally:

<script src="js/jquery-3.7.1.min.js"></script>

npm

npm install jquery

import $ from 'jquery';

First jQuery Script

<!DOCTYPE html>
<html>
<head>
    <title>My First jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1 id="demo">Hello World</h1>
    <script>
        $(document).ready(function() {
            $("#demo").click(function() {
                $(this).text("You clicked me!");
            });
        });
    </script>
</body>
</html>

The $ Symbol

$ is a function that wraps jQuery:

// All equivalent
$("<p>");
jQuery("<p>");

Checking jQuery is Loaded

if (typeof jQuery !== 'undefined') {
    console.log('jQuery is loaded');
}

Multiple Scripts

Always load jQuery before other scripts that depend on it:

<script src="jquery-3.7.1.min.js"></script>
<script src="my-plugin.js"></script>

The Document Ready

// Full form
$(document).ready(function() {
    // DOM is ready
});

// Shorthand
$(function() {
    // DOM is ready
});

// Arrow function (jQuery 3+)
$(() => {
    // DOM is ready
});

Mini Practice

Include jQuery from a CDN in an HTML file
Write a document ready handler
Use $ to select an element
Change an element's text on page load

Up Next

Continue with Syntax — understanding jQuery's syntax patterns.

Frequently Asked Questions about Get Started

What is Get Started in jQuery?

Get Started is a fundamental concept in jQuery. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Get Started?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Get Started.

Why is Get Started important in jQuery?

Get Started is essential for jQuery development. Understanding this concept will help you write better code and solve real-world problems more effectively.