jQuery Fundamentals and DOM Manipulation

Introduction

jQuery is a JavaScript library built to make common browser tasks shorter and more consistent: finding elements on a page, changing their content or attributes, responding to user events, and adjusting styles or visibility. Although modern JavaScript now includes many of the features that originally made jQuery popular, you will still encounter it constantly in existing codebases, in tutorials, and as a dependency of other libraries — including older versions of Bootstrap. Knowing jQuery syntax means you can read and maintain that code as well as write it quickly yourself.

In this course, jQuery is your entry point into working with external libraries. You will practice loading it from a CDN with a script tag, placing that tag in the right position relative to your own scripts, and then using the $ function to select elements with CSS-style selectors. From there, the same patterns carry over to Bootstrap and Chart.js later in the module: include the library, learn its core API, then use it to drive page behavior.

As you watch the videos below, pay attention to three things. First, where the script tags go and what happens if the order is wrong. Second, the shape of a jQuery statement — selector, then method, then arguments — and how methods chain together. Third, the get-versus-set pattern: calling a method with no argument reads a value, while calling it with an argument writes one. Try typing the examples into a small HTML file yourself rather than only watching.

Video 1: jQuery Crash Course Lesson #1 - Intro & Setup

Web Dev With Ron · 4:40 · 156 views · 3y ago · captions — Watch on YouTube

About this video

The opening lesson of a short jQuery crash course, covering what jQuery is and how to get it into a page before writing any code. Expect an introduction to the library's purpose and a walkthrough of setup, which typically means adding the jQuery script tag from a CDN (or a downloaded file) and confirming it loaded correctly.

Why this video

It maps directly to the first two subtopics — what jQuery is and why use it, and including jQuery via CDN — and at under five minutes it gives you the setup step you need before anything else in this topic will run.

Video 2: jQuery Crash Course Lesson #2 - Syntax

Web Dev With Ron · 6:27 · 60 views · 3y ago · captions — Watch on YouTube

About this video

This lesson focuses on jQuery syntax, with timestamps indicating sections on the basic syntax pattern, jQuery selectors, and a further topic introduced near the end. You should see how the $ function wraps a selector string and how CSS-style selectors are used to target elements by tag, class, and id.

Why this video

Core syntax and element selection are the foundation of everything else in jQuery, and the chaptered structure lets you jump straight to the selector material when you are reviewing.

Video 3: jQuery Crash Course Lesson #6 - Html Get & Set Methods

Web Dev With Ron · 10:50 · 46 views · 3y ago · captions — Watch on YouTube

About this video

The sixth lesson in the same series, dealing with HTML get and set methods — the jQuery methods used to read and write element content. Expect demonstrations of how the same method behaves differently depending on whether you pass it an argument, and likely coverage of related content and attribute methods.

Why this video

It directly addresses the modifying content and attributes subtopic and makes the get/set convention explicit, which is a pattern that recurs across many jQuery methods you will use later.

How These Videos Support the Learning Outcomes

Together these three videos build the jQuery foundation the module depends on. The setup lesson supports MO1 by showing how a library is loaded into a page via a script tag, the same mechanism you will reuse for Bootstrap and Chart.js and the same reason load order matters when combining libraries (MO5). The syntax and selector lesson, plus the get and set methods lesson, supply the selection and manipulation half of MO2 — you will need both before you can attach meaningful click, submit, and keyboard handlers. Event handling, CSS and visibility methods, and DOM traversal are treated more fully in the course readings and lecture examples, so use these videos to get comfortable with the $ function and selectors first, then extend those same patterns to events and styling in your module assignment.

About These Videos

These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.