jQ jQuery

Work with legacy and simple sites using jQuery selectors, events, AJAX, effects, and plugins.

Lessons

1 jQuery Tutorial 2 jQuery HOME 3 jQuery Introduction 4 Get Started with jQuery 5 Install jQuery via CDN 6 Download and Host jQuery 7 jQuery Syntax 8 Document Ready 9 jQuery vs Vanilla JavaScript 10 noConflict Mode 11 jQuery Selectors & DOM Updates 12 Element & Tag Selectors 13 ID and Class Selectors 14 Attribute Selectors 15 Pseudo Selectors & Filters 16 The this Keyword 17 find() and children() 18 parent() and closest() 19 siblings(), next() and prev() 20 filter() and not() 21 eq(), first() and last() 22 Iterating with each() 23 Events & Delegation 24 Click Events 25 Mouse Events 26 Keyboard Events 27 Form Events 28 Event Delegation 29 The Event Object 30 preventDefault & stopPropagation 31 on() and off() 32 one() for Single-Use Handlers 33 Triggering Events 34 DOM Manipulation 35 html() and text() 36 val() for Form Values 37 attr() and prop() 38 data() and data-* Attributes 39 append() and prepend() 40 before() and after() 41 remove() and empty() 42 clone() 43 wrap() and unwrap() 44 replaceWith() and replaceAll() 45 addClass & removeClass 46 toggleClass() 47 The css() Method 48 Dimensions & Positions 49 Effects, Classes & Animations 50 show(), hide() and toggle() 51 Fading Effects 52 Sliding Effects 53 Custom Animations with animate() 54 Animation Queue & stop() 55 delay() and chaining 56 Effect Callbacks 57 jQuery AJAX & JSON 58 $.get() Requests 59 $.post() Requests 60 The $.ajax() Method 61 $.getJSON() 62 load() for HTML Fragments 63 done, fail and always 64 Submitting Forms with AJAX 65 serialize() and serializeArray() 66 AJAX Error Handling 67 Loading Indicators 68 Deferred & Promises 69 $.when() for Parallel Requests 70 Method Chaining 71 DOM Traversal Patterns 72 jQuery Utility Functions 73 $.each vs $.map 74 Type Checking Utilities 75 trim() and $.param() 76 Plugins & Reusable Widgets 77 Writing a jQuery Plugin 78 Plugin Options & Defaults 79 jQuery UI Introduction 80 jQuery UI Datepicker 81 Draggable & Droppable 82 Sortable Lists 83 Autocomplete 84 UI Tabs & Accordion 85 Image Sliders 86 Modal Dialogs 87 Form Validation 88 Input Masking 89 Infinite Scroll 90 Scroll Effects 91 Back-to-Top Button 92 Tooltips 93 FAQ Accordion 94 Tabs Widget 95 Build a To-Do App 96 Live Search Filter 97 Sortable Tables 98 jQuery Performance Tips 99 Caching Selectors 100 jQuery Best Practices 101 Common jQuery Mistakes 102 jQuery Security 103 Modernizing jQuery Code 104 jQuery to Vanilla JS 105 When to Still Use jQuery 106 jQuery Cheatsheet 107 jQuery Interview Questions 108 jQuery Quiz 109 jQuery Exercises 110 jQuery Practice Problems 111 jQuery Project Ideas 112 jQuery Syllabus 113 jQuery Study Plan 114 jQuery Bootcamp

jQuery vs Vanilla JavaScript

jQuery Lesson 9 of 114 ~1 min read

Overview

Compare jQuery with modern DOM and fetch APIs.

jQuery vs Vanilla JavaScript is easiest to learn by reading the example, changing it, and observing the result.

Core Ideas

Understand what jQuery vs Vanilla JavaScript changes.
Run the example.
Change one value.
Explain the result.

Step by Step

Read the jQuery vs Vanilla JavaScript example.
Run it.
Change it.
Explain it.

Code Example

<!doctype html>
<html lang="en">
  <head><meta charset="utf-8"><title>jQuery page</title></head>
  <body>
    <button id="hello">Click me</button>
    <p id="output"></p>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(function () {
        $('#hello').on('click', function () {
          $('#output').text('jQuery is working!');
        });
      });
    </script>
  </body>
</html>

Checklist

Read the example and change one value.
Check the result in the browser.
Write down the rule you learned.

Common Mistakes

Skipping the example.
Changing many things at once.
Not checking the result.

Practice Challenge

Practice the jQuery vs Vanilla JavaScript example in a small scratch file, then explain what changed and why.

Mastery Check

You can explain jQuery vs Vanilla JavaScript.
You can change the example.
You can debug the result.

Create a free account to save which lessons you've finished. Save my progress

← Previous Next lesson →