Introduction to jQuery

// Vanilla JS (before modern browsers)
var elements = document.getElementsByClassName('item');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
}

// jQuery — clean and concise
$('.item').css('color', 'red');

<!-- CDN (most common) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Or download and host locally -->
<script src="jquery-3.7.1.min.js"></script>

// $('selector') returns a jQuery object wrapping matched elements
$('p')                    // All <p> elements
$('.myclass')             // Elements with class="myclass"
$('#myid')                // Element with id="myid"
$('div > p')              // Direct child <p> of <div>
$('a[target="_blank"]')   // Links with target="_blank"

// Always wrap jQuery code in document ready
$(document).ready(function() {
    // DOM is fully loaded
    // Safe to manipulate elements here
});

// Shorthand (preferred)
$(function() {
    // Same as above
});

// Get/set text
$('h1').text();              // Get text content
$('h1').text('New Title');   // Set text content

// Get/set HTML
$('div').html();             // Get inner HTML
$('div').html('<b>Bold</b>'); // Set inner HTML

// Get/set attributes
$('a').attr('href');         // Get attribute
$('a').attr('href', 'https://example.com');  // Set attribute
$('a').removeAttr('target'); // Remove attribute

// CSS manipulation
$('p').css('color');                   // Get computed style
$('p').css('color', 'red');           // Set single style
$('p').css({'color': 'red', 'font-size': '16px'});  // Set multiple

// Classes
$('p').addClass('highlight');          // Add class
$('p').removeClass('highlight');      // Remove class
$('p').toggleClass('highlight');      // Toggle class
$('p').hasClass('highlight');         // Check if has class

// Find descendants
$('div').find('p');          // All <p> inside <div>
$('div').children();         // Direct children only
$('div').children('.active'); // Direct children with class

// Siblings
$('li').next();              // Next sibling
$('li').prev();              // Previous sibling
$('li').siblings();          // All siblings
$('li').parent();            // Direct parent
$('li').parents();           // All ancestors
$('li').closest('ul');       // Closest matching ancestor

// Filtering
$('li').first();             // First element
$('li').last();              // Last element
$('li').eq(2);               // Third element (0-indexed)
$('li').filter('.done');     // Elements matching selector
$('li').not('.done');        // Elements NOT matching

// jQuery objects are chainable
$('ul')
    .find('li')
    .eq(0)
    .css('color', 'red')
    .end()               // Go back to the previous set (all <li>)
    .addClass('list-item')
    .end()
    .fadeIn(300);