jQuery

Welcome to the comprehensive jQuery course! This guide covers everything from jQuery basics to advanced concepts with practical examples.

Table of Contents

1. Introduction
2. Getting Started
3. jQuery Basics
4. Selectors
5. Events
6. DOM Manipulation
7. Effects and Animations
8. AJAX
9. Best Practices
10. Project Examples

Introduction

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Why Learn jQuery?

• Simplifies JavaScript programming
• Cross-browser compatibility
• Large community and extensive documentation
• Plugin ecosystem
• Easy DOM manipulation

Getting Started

Installation Methods

1. CDN Link

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. Download and Include Locally

<script src="js/jquery-3.7.1.min.js"></script>

3. NPM Installation

npm install jquery

Basic Syntax

$(selector).action();

Example:

$(document).ready(function(){
    // Your code here
});

jQuery Basics

Document Ready Function

Always wrap your jQuery code in the document ready function to ensure the DOM is fully loaded:

$(document).ready(function(){
    // Your jQuery code goes here
});

Or the shorter version:

$(function(){
    // Your jQuery code goes here
});

Selectors

jQuery selectors allow you to select and manipulate HTML elements.

Element Selectors

$('p')        // Selects all <p> elements
$('h1')       // Selects all <h1> elements
$('.className') // Selects all elements with class="className"
$('#idName')   // Selects the element with id="idName"

Current Implementation Example

In our main.js file, we demonstrate several selectors:

• $('p') - Selects all paragraph elements
• $('#head') - Selects the element with id "head"
• $('.container') - Selects all elements with class "container"

Events

jQuery makes event handling much easier than traditional JavaScript.

Common Event Methods

• .click() - Triggers when an element is clicked
• .mouseenter() - Triggers when mouse enters an element
• .mouseleave() - Triggers when mouse leaves an element
• .hover() - Combines mouseenter and mouseleave
• .keypress() - Triggers when a key is pressed

Event Handler Example

$('p').click(function(){
    $(this).hide(); // Hides the clicked paragraph
});

Current Implementation Example

Our main.js demonstrates:

• Click events on paragraphs and headings
• Mouse enter and leave events on containers

DOM Manipulation

jQuery provides powerful methods to manipulate the DOM.

Content Manipulation

• .text() - Sets or returns the text content
• .html() - Sets or returns the HTML content
• .val() - Sets or returns the value of form fields

Attribute Manipulation

• .attr() - Gets or sets attributes
• .removeAttr() - Removes attributes

CSS Manipulation

• .addClass() - Adds CSS classes
• .removeClass() - Removes CSS classes
• .toggleClass() - Toggles CSS classes
• .css() - Sets or returns CSS properties

Current Implementation Example

In our main.js, we use:

• .hide() to hide elements
• .css() to change background colors

Effects and Animations

jQuery provides built-in effects for smooth animations.

Basic Effects

• .hide() / .show() - Hide or show elements
• .toggle() - Toggle between hide and show
• .fadeIn() / .fadeOut() - Fade in or out
• .slideDown() / .slideUp() - Slide up or down

Custom Animations

.animate({params}, speed, callback);

AJAX

jQuery simplifies AJAX requests with several methods:

• $.ajax() - Performs an async HTTP request
• $.get() - Loads data from the server using GET request
• $.post() - Loads data from the server using POST request
• $.load() - Loads data from a server and puts the returned data into the selected element

Best Practices

1. Always use the document ready function
2. Cache jQuery selectors when used multiple times
3. Use event delegation for dynamically added elements
4. Minimize DOM manipulation in loops
5. Use classes instead of inline styles

Project Examples

Simple Click Handler

$('p').click(function(){
    $(this).hide();
});

Mouse Events

$('.container').mouseenter(function(){
    $(this).css('background-color','lightblue');
});

$('.container').mouseleave(function(){
    $(this).css('background-color','lightgreen');
});

These examples can be found in our main.js file.

Conclusion

jQuery remains a valuable tool for web development despite the rise of modern frameworks. Its simplicity and ease of use make it perfect for rapid prototyping and smaller projects.

Resources

• Official jQuery Documentation
• jQuery Learning Center
• MDN Web Docs

---

This jQuery course was created to provide a comprehensive introduction to jQuery with hands-on examples.