Undoing jQuery: How to Convert jQuery to Vanilla JavaScript

Undoing jQuery: How to Convert jQuery to Vanilla JavaScript (JQY211)

Course Length: 2 days
Delivery Methods: Available as private class only
Course Overview

This is an introduction to jQuery course for JavaScript developers tasked with maintaining a jQuery site or converting a jQuery site to modern JavaScript.

While students will learn to write jQuery code, the emphasis will be on reading jQuery and learning to convert it to JavaScript. A significant part of the course is spent on an exercise converting a math game from jQuery to vanilla JavaScript.

Course Benefits
  • A little history.
  • jQuery in the 2020s.
  • Our project.
  • Your first jQuery code.
  • The document is ready.
  • Selectors.
  • Caching jQuery Objects.
  • Utility Functions.
  • Adding elements.
  • Removing elements.
  • Replacing elements.
  • CSS
  • Listening for events.
  • Responding to events.
  • Triggering events.
  • on(), off(), and trigger()
  • Event delegation.
  • Display effects.
  • Fading effects.
  • Sliding effects.
  • Animating.
  • Ajax and JSON Basics.
  • The Problems and Solutions with Ajax.
  • Getting data with Ajax.
  • Sending data with Ajax.
  • Why convert from jQuery to JavaScript?
  • Practice, practice, practice!
Course Outline
  1. Getting Started with jQuery
    1. Why jQuery in the 2020s?
    2. Our Approach
    3. Exercise: Getting Bootstrap
    4. Exercise: Reviewing the Vanilla JavaScript Code
    5. Exercise: Getting Started with jQuery
  2. The jQuery Function and Selectors
    1. The Document is Ready
    2. Exercise: Waiting for the Load Event
    3. jQuery Selectors
    4. Converting HTML Elements to jQuery Elements
    5. Filtering
    6. Tree Traversal
    7. Caching jQuery Objects
    8. Exercise: Playing with Selectors
    9. Chaining
    10. Utility Functions
  3. jQuery Manipulation
    1. Getter and Setter Methods
    2. Exercise: Getter and Setter Methods Practice
    3. Setting and Adding Content
    4. Exercise: Setting and Adding Content
    5. Copying and Removing Content
    6. Exercise: Copying and Removing Content: Practice
    7. event.target
    8. Properties vs. Attributes
    9. Shopping List Application
    10. Exercise: Logging
    11. Exercise: Adding EventListeners
    12. Exercise: Adding Items to the List
    13. Exercise: Dynamically Adding Remove Buttons to the List Items
    14. Exercise: Removing List Items
    15. Exercise: Preventing Duplicates and Zero-length Product Names
  4. jQuery Forms and Events
    1. Listening for Events
    2. Triggering Events
    3. Delegating Events
    4. Exercise: Event Delegation
  5. jQuery Effects
    1. Display Effects
    2. Fading Effects
    3. Exercise: Waiting for Fading to Finish
    4. Sliding Effects
    5. Other Animations
  6. Ajax and jQuery
    1. Ajax
    2. Using Ajax
    3. Exercise: Form Validation with Ajax
  7. Converting from jQuery to JavaScript
    1. Why Convert jQuery to JavaScript?
    2. Exercise: Getting Ready
    3. Exercise: Converting the Common Functions
    4. Exercise: Converting the Config View Functions
    5. Exercise: Convert the Game View Functions
Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this jQuery class:

  • HTML
  • JavaScript

Experience in the following would be useful for this jQuery class:

  • CSS
Prerequisite Courses

Courses that can help you meet these prerequisites:

Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal