JQuery Tutorials

Last modified on: June 29, 2026

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="3d706f22-e442-4f12-afe5-b9c774c795f3" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>jQuery Tutorials: A Beginner-to-Advanced Guide</h3>
<p>jQuery is a widely-used JavaScript library that simplifies common web development tasks like DOM manipulation, event handling, animations, and AJAX calls. This tutorial is designed to help you get started with jQuery and gradually explore its advanced features with practical examples.</p>
<hr />
<h3>Getting Started with jQuery</h3>
<h4>Step 1: Include jQuery in Your Project</h4>
<p>You can include jQuery using a CDN or by downloading it.</p>
<p><strong>Using CDN</strong>:<br />Add the following script tag in the <code>&lt;head&gt;</code> or at the end of the <code>&lt;body&gt;</code>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Download</strong>:<br />Download jQuery from <a href="https://jquery.com/" target="_new" rel="noopener">jQuery's official website</a> and include it:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;script src="path/to/jquery.min.js"&gt;&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Basic jQuery Syntax</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>$(selector).action()
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><code>$</code>: Refers to the jQuery function.</li>
<li><code>selector</code>: Targets the HTML element(s).</li>
<li><code>action()</code>: Specifies the operation to be performed.</li>
</ul>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Change the text of an element with id "header"
$('#header').text('Welcome to jQuery!');
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Tutorial Topics with Examples</h3>
<h4>1. <strong>Selecting Elements</strong></h4>
<p>jQuery uses CSS selectors to target elements.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Select all paragraphs and change their color
$('p').css('color', 'blue');
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. <strong>Event Handling</strong></h4>
<p>Manage user interactions with ease.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Click event for a button
$('#myButton').click(function () {
    alert('Button clicked!');
});
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. <strong>Hiding and Showing Elements</strong></h4>
<p>Show or hide elements dynamically.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Toggle visibility of an element
$('#toggleBtn').click(function () {
    $('#myDiv').toggle();
});
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. <strong>AJAX Requests</strong></h4>
<p>Interact with servers without reloading the page.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Fetch data from a server
$.get('/api/data', function (response) {
    console.log(response);
});
</code></pre>
</div>
</div>
</div>
</div>
<h4>5. <strong>Animations</strong></h4>
<p>Create smooth effects for your website.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Slide up and down animation
$('#animateBtn').click(function () {
    $('#contentBox').slideToggle();
});
</code></pre>
</div>
</div>
</div>
</div>
<h4>6. <strong>Traversing the DOM</strong></h4>
<p>Navigate through the DOM tree to find elements.</p>
<p>Example:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>// Select the parent of a specific element
$('#child').parent().css('border', '1px solid red');
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Practical Examples</h3>
<h4>Example 1: Toggle Class on Click</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;jQuery Toggle Example&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .highlight {
            background-color: yellow;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id="text"&gt;Click the button to highlight this text.&lt;/p&gt;
    &lt;button id="toggleBtn"&gt;Toggle Highlight&lt;/button&gt;

&lt;script&gt;
        $(document).ready(function () {
            $('#toggleBtn').click(function () {
                $('#text').toggleClass('highlight');
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Example 2: AJAX Call to Fetch Data</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;jQuery AJAX Example&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id="fetchBtn"&gt;Fetch Data&lt;/button&gt;
    &lt;div id="result"&gt;&lt;/div&gt;

&lt;script&gt;
        $(document).ready(function () {
            $('#fetchBtn').click(function () {
                $.get('https://jsonplaceholder.typicode.com/posts/1', function (data) {
                    $('#result').html(`&lt;h3&gt;${data.title}&lt;/h3&gt;&lt;p&gt;${data.body}&lt;/p&gt;`);
                });
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Best Practices</h3>
<ol>
<li><strong>Use the Latest Version</strong>: Always use the latest version of jQuery for better performance and security.</li>
<li><strong>Optimize Selectors</strong>: Use specific selectors to improve performance.</li>
<li><strong>Minimize Use of DOM Manipulation</strong>: Excessive manipulation can slow down your application.</li>
<li><strong>Leverage Event Delegation</strong>: Use <code>on()</code> for dynamically created elements.</li>
</ol>
<hr />
<h3>Additional Resources</h3>
<ul>
<li><a target="_new" rel="noopener">jQuery Official Documentation</a></li>
<li><a href="https://jqueryui.com/" target="_new" rel="noopener">jQuery Plugins</a></li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More