Undoing jQuery: How to Convert jQuery to Vanilla JavaScript

Course duration

  • 2 days

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:

Since its founding in 1995, InterSource has been providing high quality and highly customized training solutions to clients worldwide. With over 500 course titles constantly updated and numerous course customization and creation possibilities, we have the capability to meet your I.T. training needs.
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.