jQuery Code Snippets

These code snippets are based on the code developed in my jQuery online course, with thorough documentation to recap each function and how it's used.

The prefixes of the folders indicate which course section they correspond to:

Section 1: Intro

Section 1 is an introduction to jQuery and other JS libraries but contains no code. So there are no folders prefixed "01" in this repo.

Section 2: Animations

Section 2 teaches you how to use predefined and custom animations in jQuery, including fading, sliding, and moving elements.

Section 3: jQuery Selectors

Section 3 is all about selecting the correct elements on the page. This includes using CSS selectors, jQuery functions for traversing the DOM, and filtering a given selection based on some predicates.

Section 4: Manipulating the DOM I

Section 4 demonstrates how to add, remove, and replace DOM elements. After that, it also shows how to manipulate the attributes of any element, such as an image's source.

Section 5: Manipulating the DOM II

Section 5 shows how to add or remove CSS classes to dynamically change the layout of elements or the whole page. It also shows how to attach arbitrary data to any element, and how to manipulate the text or HTML contents of elements.

Section 6: Event Handling

Section 6 teaches you how to use event handlers to handle user events such as clicks, the cursor hovering an element, and key presses. It also discusses basic modularization of event handlers, delegated events, and how to attach the same handler for different event types.

Section 7: Handling Form Events

Section 7 then focuses on events particularly for form elements, such as focusing or unfocusing an input, changing a selection, ticking a checkbox, and eventually submitting the form. Here, you'll learn how to validate forms on the client-side and provide fast feedback to users.

Section 8: AJAX

Section 8 first introduces the basics of AJAX in jQuery and then uses this to access to Flickr API and to build a Pokédex using the PokéAPI.