jQuery Learning Portal

// Example jQuery inclusion in HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>

// jQuery Selectors Examples
$('#myId')          // Select by ID
$('.myClass')       // Select by Class
$('p')              // Select by Tag
$('div p')          // Descendant Selector
$('div > p')        // Child Selector
$('input[type=text]') // Attribute Selector

// jQuery HTML/CSS Methods
$('#element').html()              // Get HTML content
$('#element').html('New Content') // Set HTML content
$('#element').text()              // Get text content
$('#element').text('New Text')    // Set text content
$('#element').css('color')        // Get CSS property
$('#element').css('color', 'red') // Set CSS property
$('#element').addClass('newClass')
$('#element').removeClass('oldClass')
$('#element').toggleClass('toggleClass')

// Basic jQuery Document Ready Function
$(document).ready(function() {
    // Your jQuery code here
    $('button').click(function() {
        $('p').hide();
    });
});

// Or shorthand version
$(function() {
    // Your jQuery code here
});

// jQuery Event Handling
$('button').click(function() {
    // Handle click
});

$('input').keydown(function(event) {
    // Handle keydown
});

$('form').submit(function(event) {
    event.preventDefault(); // Prevent form submission
    // Handle form submission
});

// Event delegation
$(document).on('click', '.dynamic-button', function() {
    // Handle clicks on dynamically added elements
});

// jQuery Effects
$('#element').hide();
$('#element').show();
$('#element').toggle();

$('#element').fadeIn();
$('#element').fadeOut();
$('#element').fadeToggle();

$('#element').slideUp();
$('#element').slideDown();
$('#element').slideToggle();

// With duration
$('#element').fadeIn(1000); // 1 second

// With callback
$('#element').fadeOut(function() {
    alert('Fade out completed!');
});

// jQuery Method Chaining
$('#element')
    .css('color', 'blue')
    .fadeOut(1000)
    .delay(500)
    .fadeIn(1000)
    .addClass('highlight');

// Each method returns a jQuery object, allowing chaining

// jQuery "this" keyword
$('button').click(function() {
    // "this" refers to the clicked button element
    $(this).css('background-color', 'red');
    
    // Find elements relative to "this"
    $(this).siblings().hide();
    $(this).parent().addClass('active');
});

// jQuery Traversing Methods
$('#start').parent()         // Get direct parent
$('#start').parents()        // Get all ancestors
$('#start').parents('.class') // Get specific ancestor
$('#start').children()       // Get direct children
$('#start').find('.class')   // Find descendants
$('#start').siblings()       // Get siblings
$('#start').next()           // Get next sibling
$('#start').prev()           // Get previous sibling