jQuery

Module 1: Introduction to jQuery

• What is jQuery?

• Why use jQuery? (Advantages & Use Cases)

• jQuery vs. Vanilla JavaScript vs. Modern Frameworks

• Setting Up jQuery (CDN, Local Installation, npm)

• Basic Syntax ($(selector).action())

• Document Ready ($(document).ready() vs. $(function() {}))

---

Module 2: jQuery Selectors & DOM Manipulation

Selectors

• Basic Selectors ($("p"), $(".class"), $("#id"))

• Attribute Selectors ($("[href]"), $("[type='text']"))

• Hierarchy Selectors ($("parent > child"), $("ancestor descendant"))

• Filtering Selectors (:first, :last, :even, :odd, :not())

DOM Manipulation

• Getting & Setting Content (.text(), .html(), .val())

• Changing Attributes (.attr(), .removeAttr())

• CSS Manipulation (.css(), .addClass(), .removeClass(), .toggleClass())

• DOM Insertion (.append(), .prepend(), .after(), .before())

• Removing Elements (.remove(), .empty())

• Cloning Elements (.clone())

---

Module 3: jQuery Events

Event Handling

• Click Events (.click())

• Form Events (.submit(), .change(), .focus(), .blur())

• Keyboard Events (.keypress(), .keydown(), .keyup())

• Mouse Events (.hover(), .mouseenter(), .mouseleave())

Event Delegation

• .on() vs .click() (Dynamic Elements)

• Event Bubbling & Prevention (.stopPropagation(), .preventDefault())

---

Module 4: jQuery Effects & Animations

Basic Effects

• Showing/Hiding Elements (.show(), .hide(), .toggle())

• Fading Effects (.fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo())

• Sliding Effects (.slideDown(), .slideUp(), .slideToggle())

Custom Animations

• .animate() (Custom CSS Animations)

• Animation Queues (.queue(), .dequeue(), .clearQueue())

• Stopping Animations (.stop(), .finish())

---

Module 5: jQuery AJAX & APIs

AJAX Basics

• $.ajax() (GET, POST, PUT, DELETE)

• Shorthand Methods ($.get(), $.post(), $.getJSON())

• Handling Responses (.done(), .fail(), .always())

Working with APIs

• Fetching Data from REST APIs

• Dynamic Content Loading

• Error Handling in AJAX

---

Module 6: jQuery UI (User Interface)

Widgets & Interactions

• Accordion ($("#accordion").accordion())

• Datepicker ($("#datepicker").datepicker())

• Draggable, Droppable, Sortable

• Autocomplete ($("#tags").autocomplete())

Effects & Themes

• jQuery UI Effects (.effect(), .addClass("animated"))

• Theme Customization (ThemeRoller)

---

Module 7: Advanced jQuery

Performance Optimization

• Selector Optimization

• Event Delegation Best Practices

• Minimizing DOM Manipulation

Plugins & Extensions

• Using Popular jQuery Plugins (Slick, DataTables, Lightbox)

• Writing Custom Plugins

---

Module 8: jQuery Best Practices & Modern Alternatives

• When to Use jQuery vs. Vanilla JS

• Migrating to Modern Frameworks (React, Vue)

• Security Best Practices

---

Projects & Exercises

1. Interactive To-Do List (AJAX + DOM Manipulation)

2. Image Slider (Animations + Event Handling)

3. Form Validation (jQuery + AJAX)

4. Weather App (API Fetching with jQuery)