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
-
Interactive To-Do List (AJAX + DOM Manipulation)
-
Image Slider (Animations + Event Handling)
-
Form Validation (jQuery + AJAX)
-
Weather App (API Fetching with jQuery)