Basic jQuery
Basic jQuery is a foundation course in jQuery 4 for adding interactivity to web pages, from selectors, traversing and DOM changes to events with .on(), effects, forms, Ajax and jQuery UI, with each topic compared to standard JavaScript. It suits beginners who know HTML and CSS and people who maintain websites or themes that already use jQuery.
- Duration12 hours · 2 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
jQuery is a JavaScript library that makes it quick to select elements, change the DOM, handle events and make Ajax calls with short code, and it is still found on a great many websites, including internal systems and WordPress and other CMS themes and plugins. Teams who maintain or customise these sites still need to read and write jQuery correctly, and to know where standard JavaScript is the better choice.
This course is a starting point in current jQuery 4 for people who know HTML and CSS. Learners add jQuery to a project, use selectors and traversing, change content, attributes and classes, handle events with .on() and event delegation, create effects, validate forms and load data with Ajax, use jQuery UI widgets and finish by building a dropdown menu, breadcrumbs and a tree, with every topic compared to standard JavaScript. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
What you’ll gain
- Explain the role of jQuery 4 today and when standard JavaScript is the better choice
- Add jQuery to a project and select elements with selectors
- Traverse the DOM and change content, attributes, classes and styles
- Bind events with .on() and use event delegation
- Create effects, validate forms and load data with Ajax
- Use jQuery UI and build a dropdown menu, breadcrumbs and a tree
Who this course is for
- Beginners who know HTML and CSS and want to add interactivity to web pages
- Developers and webmasters who maintain existing websites or systems built with jQuery
- People who customise WordPress or other CMS themes and plugins
- IT managers who need to understand the jQuery code in their organisation's systems
Prerequisites
- Basic HTML and CSS
- A basic understanding of the web and HTTP
- Some programming in any language helps you learn faster
- A laptop that can run VS Code and a current browser
Curriculum
Course Details
This course is the 2026 edition of Basic jQuery. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with workshops. Beginner level. This edition moves to jQuery 4, which removes old APIs and drops support for old browsers, replaces bind and hover with .on() and event delegation, uses jQuery UI 1.14, which supports jQuery 4, adds basic forms and Ajax, and compares
every topic to standard JavaScript, while keeping the original core of selectors, DOM manipulation, events, jQuery UI and a navigation workshop with a dropdown menu, breadcrumbs and a tree. The course focuses on jQuery alone for beginners, unlike Basic JavaScript ES6+ and jQuery, which builds JavaScript foundations first, and jQuery for Application, which focuses on plugins and larger apps. All tools are free. Learners take home a lab guide and sample files.
Day 1 jQuery 4, Selectors and DOM Manipulation
Section 1: jQuery Today
- What jQuery is and why it is still found on so many sites
- What changed in jQuery 4 and which APIs were removed
- When to use jQuery and when to use standard JavaScript
- Set up VS Code, Live Server and DevTools
- Lab: open a sample page and try commands in the console
Section 2: Lab: Adding jQuery to a Project
- Load jQuery 4 from a CDN or a local file
- Use jQuery as an ES module and through npm
- Wait for the DOM with $(function) and defer
- Use jQuery Migrate to check old code that uses removed APIs
- Lab: a first web page using jQuery 4
Section 3: Lab: jQuery Selectors
- How selectors and the jQuery object work
- Select by ID, class, tag and attribute value
- Filters such as :first, :checked and .filter()
- Compare with querySelectorAll in standard JavaScript
- Lab: highlight table data that meets a condition
Section 4: Lab: Traversing the DOM
- Understand the DOM structure and nodes
- Work with child nodes using .children() and .find()
- Move up with .parent() and .closest()
- Sibling nodes with .siblings(), .next() and .prev()
- Lab: expand and collapse answers in an FAQ list
Section 5: Lab: Changing Content, Attributes and Styles
- Read and write content with .text(), .html() and .val()
- How .attr() and .prop() differ
- Manage classes with .addClass() and .toggleClass()
- Add and remove elements, and avoid XSS when using .html()
- Lab: a product list where items can be added and removed
Day 2 Events, Forms, Ajax and jQuery UI
Section 6: Lab: Event Handlers
- Bind events with .on() and remove them with .off()
- Click, change, submit and keyboard events
- mouseenter and mouseleave instead of the old .hover()
- The event object, preventDefault and event delegation
- Lab: a shopping cart where new buttons still work
Section 7: Lab: Effects and Animation
- .show(), .hide(), .fadeIn() and .slideToggle()
- Build animations with .animate()
- Combine classes with CSS transitions for smooth motion
- Respect the user's reduced-motion setting
- Lab: a sliding banner and alert box
Section 8: Lab: Forms and Basic Ajax
- Read form values with .val() and .serialize()
- Validate input before sending and show messages
- Load JSON with $.ajax() and $.getJSON()
- Handle success and errors, and compare with fetch
- Lab: search and display results from an API
Section 9: Lab: jQuery UI 1.14
- Install the jQuery UI release that supports jQuery 4
- Common widgets such as Datepicker, Dialog, Tabs and Accordion
- Widget themes, options, events and methods
- Its maintenance-only status and alternatives for new work
- Lab: a booking form with a calendar and confirmation dialog
Section 10: Workshop: Website Navigation
- A dropdown menu that works with both mouse and keyboard
- Breadcrumbs built from the page structure
- A collapsible multi-level tree menu
- Add ARIA so menus work with screen readers
- Workshop: combine all the menus on a sample site
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
How do jQuery selectors work?
jQuery selectors use the same syntax as CSS selectors, such as #id, .class, tag names or [attribute=value]. Calling $("...") finds every matching element and returns a jQuery object you can act on straight away and chain. Standard JavaScript does the same with querySelector and querySelectorAll, and this course compares both side by side.
How do I bind a click event with jQuery?
Current practice is to use .on(), for example $("#btn").on("click", function (e) { ... }), rather than shorthand methods such as .click() or .bind(), which are no longer recommended. If buttons are added later, use event delegation by binding to a parent, such as $("#list").on("click", ".btn", handler), and remove events with .off().
How is jQuery different from plain JavaScript, and is it still needed?
jQuery lets you select elements, change the DOM, handle events and call Ajax with short code, which mattered a great deal when browsers behaved differently. Standard JavaScript now does all of this itself, so new projects often skip jQuery, but many existing websites, internal systems and CMS themes and plugins still use it. Understanding jQuery 4 remains necessary for maintaining and improving that work.
Who is the Basic jQuery course for, and what should I know beforehand?
It suits beginners who know HTML and CSS and want to add interactivity to web pages, developers and webmasters who maintain existing jQuery systems, people who customise WordPress themes or plugins, and IT managers who need to understand the code in their systems. You should know HTML and CSS and how the web works at a basic level. Some programming experience helps you learn faster.
What will I be able to do after the Basic jQuery course?
You will be able to add jQuery 4 to a project, select and change elements with selectors and traversing, bind events with .on() and event delegation, create effects, validate forms, load data with Ajax, use jQuery UI widgets and build a dropdown menu, breadcrumbs and a tree, as well as read existing jQuery code and know what should be updated. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Can the Basic jQuery course be run in-house for our team?
Yes. The course can be run in-house, with examples adapted to the websites or systems your team maintains, such as WordPress themes or internal system screens, and extra focus on updating existing jQuery code to work with jQuery 4. Contact the institute for a quotation.
Related articles
Articles are published in Thai.