jQuery Fundamentals
2-day Basic jQuery Course for Beginners — JQF
jQuery Web Design Training Course Overview
This jQuery course for beginners, is designed to get non-programmers started with using jQuery to progressively enhance and gracefully degrade website and web application user interfaces (UIs).
Unlike a lot of jQuery training, this course gives as much attention to the issues of when and why to use jQuery, as it does to the mechanics of how to use jQuery. So, for example, when jQuery features overlap with those of CSS3, we'll show you how to use jQuery to support feature-incomplete browsers, without duplicating the built-in CSS3 functionality of advanced browsers.
This jQuery course is particularly suitable for front-end web designers taking their first steps into web programming — because:
- jQuery builds directly upon your existing HTML and CSS knowledge
- jQuery is narrowly scoped — i.e. web-specific, not general-purpose programming
- The course devotes more time for incremental learning and practical exercises — than our intensive 1-day basic jQuery course
This course will not turn you into an expert web programmer overnight, but it will give you some very useful everyday design tools and provide a firm conceptual foundation for learning more generic programming skills in future.
Course contents — 1 Introduction and overview
- What is jQuery?
- What are the alternatives?
- Overview of jQuery features
- Download, install and configure jQuery
- Getting started — a simple jQuery enabled web page
Course contents — 2 Selecting/extracting content
- Basic jQuery selectors
- Form selectors
- Using filters with selectors
- jQuery attribute filters
- jQuery content filters
- jQuery visibility filters
- Traversing the page
- Chaining jQuery statements
- Bringing it all together
Course contents — 3 Content manipulation
- Create and insert new content
- Find and change element attributes
- jQuery insert functions — append-prepend, after-before, etc.
- Functions to remove, wrap or replace content
- Cross-browser CSS styling with jQuery
- Bringing it all together
Course contents — 4 Event handling
- Single (cross-browser) jQuery event object
- jQuery event model — assign handlers to objects by selection
- The
onandofffunctions — to connect to / disconnect from elements - Click, hover, etc — handy event-related functions
- Common functions on the jQuery event model
- E.g. data, timeStamp, type, target, pageX and pageY, result, stopPropagation, etc.
- Using the
onemethod instead ofon— for one-off events - Trigger and triggerHandler event functions
- Bringing it all together
Course contents — 5 jQuery Animations & effects
- Show, hide and toggle matched elements
- Fade matched elements in, out, and to
- Slide matched elements up, down, toggle — to hide and reveal
- Customised animations — using the animate and stop functions
- Bringing it all together
Course contents — 6 jQuery UI
- Overview — interactions, widgets and effects
- Download, install and configure the jQuery UI plugin
- Interactions — selectable, sortable, draggable, droppable, resizeable
- Widgets — tabs, slider, progress, accordion, datepicker, dialog
- Effects — show, hide, toggle, add class, remove class, toggle class, switch class, color animation
- Using ThemeRoller — build widget themes from off-the-shelf and bespoke components
- Bringing it all together
Course contents — 7 jQuery workshop
- Website upgrade project
- Use jQuery to enhance a pre-built CSS3 website
- jQuery fallbacks for CSS3 animation in non-supporting browsers
- Adding UI features that CSS3 does not provide
- Collapseable sections, tooltips, thumbnailing, slideshow
- Enhanced form design
Dates for Online courses
- €1020 Book
Dates for Brussels
- Thursday 27 Mar 2025 Arts-loi / Kunst wet €1020 Book
- Thursday 10 Jul 2025 Arts-loi / Kunst wet €1020 Book
Dates for Antwerp
- Thursday 1 May 2025 Antwerp Centraal €1020 Book
- Thursday 14 Aug 2025 Antwerp Centraal €1020 Book
Course Objectives
On completion of this jQuery training course, you should be able to:
- Understand the proper place of jQuery in web design
- Use jQuery alongside HTML, CSS, JavaScript and back-end web programming
- Select, extract, manipulate and insert web content with jQuery
- Use jQuery selectors, filters and functions appropriately
- Use the jQuery event object to handle user-driven and data-driven page events
- Create and manipulate jQuery animations
- Use the jQuery UI library to create and manage widgets, effects and interactions
- Use jQuery and jQuery UI to enhance a pre-existing, non-dynamic, website
Target Audience
- Experienced CSS-based web designers
Training Pre-requisites
The following 2-day WDA training courses — or equivalent knowledge and experience:
Additional knowledge of CSS3 and HTML5 would be helpful, but are not required.
Training Style
This jQuery training course, is instructor-led, but puts more emphasis than usual on hands-on, practical, exercises.
Hands-on practical work may comprise 60%, or more, of class time — depending on the characteristics of your particular training group.