jQuery Cheat Sheet

// jQuery Essential Snippets Cheat Sheet

// ============================================
// SELECTORS
// ============================================

// Basic selectors
$('#myId')              // Select by ID
$('.myClass')           // Select by class
$('div')                // Select by tag
$('div.myClass')        // Select div with class
$('[name="myName"]')    // Select by attribute

// Hierarchy
$('parent > child')     // Direct children
$('ancestor descendant') // All descendants
$('prev + next')        // Next sibling
$('prev ~ siblings')    // All siblings

// Filters
$('div:first')          // First div
$('div:last')           // Last div
$('div:even')           // Even divs (0, 2, 4...)
$('div:odd')            // Odd divs (1, 3, 5...)
$('div:eq(2)')          // Third div (0-indexed)
$('div:gt(2)')          // Divs after index 2
$('div:lt(2)')          // Divs before index 2
$('div:not(.myClass)')  // Divs without class

// ============================================
// DOM MANIPULATION
// ============================================

// Get/Set content
$('#myDiv').text()                  // Get text
$('#myDiv').text('New text')        // Set text
$('#myDiv').html()                  // Get HTML
$('#myDiv').html('<b>Bold</b>')     // Set HTML
$('#myInput').val()                 // Get input value
$('#myInput').val('New value')      // Set input value

// Attributes
$('#myImg').attr('src')             // Get attribute
$('#myImg').attr('src', 'new.jpg')  // Set attribute
$('#myImg').removeAttr('src')       // Remove attribute
$('#myDiv').data('key', 'value')    // Set data attribute
$('#myDiv').data('key')             // Get data attribute

// CSS
$('#myDiv').css('color')            // Get CSS property
$('#myDiv').css('color', 'red')     // Set CSS property
$('#myDiv').css({                   // Set multiple properties
    'color': 'red',
    'font-size': '20px'
})

// Classes
$('#myDiv').addClass('newClass')
$('#myDiv').removeClass('oldClass')
$('#myDiv').toggleClass('active')
$('#myDiv').hasClass('myClass')     // Returns boolean

// ============================================
// DOM INSERTION
// ============================================

$('#myDiv').append('<p>End</p>')        // Add to end
$('#myDiv').prepend('<p>Start</p>')     // Add to beginning
$('#myDiv').after('<p>After</p>')       // Add after element
$('#myDiv').before('<p>Before</p>')     // Add before element
$('#myDiv').remove()                    // Remove element
$('#myDiv').empty()                     // Remove children

// ============================================
// EVENTS
// ============================================

// Click
$('#myButton').click(function() {
    console.log('Clicked!');
});

// Common events
$('#myInput').focus(function() { });    // Focus
$('#myInput').blur(function() { });     // Blur
$('#myInput').change(function() { });   // Change
$('#myForm').submit(function(e) {       // Submit
    e.preventDefault();
});

// Hover
$('#myDiv').hover(
    function() { console.log('Mouse enter'); },
    function() { console.log('Mouse leave'); }
);

// Event delegation (for dynamic elements)
$(document).on('click', '.dynamic-button', function() {
    console.log('Dynamic element clicked');
});

// ============================================
// EFFECTS & ANIMATIONS
// ============================================

$('#myDiv').hide()                      // Hide instantly
$('#myDiv').show()                      // Show instantly
$('#myDiv').toggle()                    // Toggle visibility

$('#myDiv').fadeIn(500)                 // Fade in (500ms)
$('#myDiv').fadeOut(500)                // Fade out
$('#myDiv').fadeToggle(500)             // Toggle fade
$('#myDiv').fadeTo(500, 0.5)            // Fade to opacity

$('#myDiv').slideDown(500)              // Slide down
$('#myDiv').slideUp(500)                // Slide up
$('#myDiv').slideToggle(500)            // Toggle slide

// Custom animation
$('#myDiv').animate({
    left: '250px',
    opacity: 0.5,
    height: '150px',
    width: '150px'
}, 1000);

// ============================================
// AJAX
// ============================================

// GET request
$.get('api/data', function(data) {
    console.log(data);
});

// POST request
$.post('api/data', { name: 'John', age: 30 }, function(response) {
    console.log(response);
});

// Full AJAX
$.ajax({
    url: 'api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Success:', data);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

// ============================================
// UTILITIES
// ============================================

$.each([1, 2, 3], function(index, value) {
    console.log(index + ': ' + value);
});

$.map([1, 2, 3], function(value, index) {
    return value * 2;
});

$.grep([1, 2, 3, 4, 5], function(value) {
    return value > 2;
});

// ============================================
// DOCUMENT READY
// ============================================

$(document).ready(function() {
    // Code here runs when DOM is ready
});

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