const $element = $('#myDiv'); // jQuery object for all examples
// Select Elements (RETURNS JQUERY OBJECT)
$('#myId'); // Single element by ID
$('.myClass'); // All elements by class
$('div'); // All elements by tag
$('.myClass'); // Elements by CSS selector
$('.myClass'); // All elements by CSS selector (same as above)
// Create Elements (RETURNS JQUERY OBJECT)
$(''); //
$('Hello'); // Hello
$(document.createDocumentFragment()); // Document fragment (rare in jQuery)
$element.clone(true); // Deep clone with events/data
$element.clone(false); // Shallow clone without events/data
// Add/Remove Elements (MUTATES DOM)
$parent.append($child); // Add child to end - MUTATES
$parent.prepend($child); // Add child to beginning - MUTATES
$newChild.insertBefore($refChild); // Insert before reference - MUTATES
$newChild.insertAfter($refChild); // Insert after reference - MUTATES
$element.remove(); // Remove element and events - MUTATES
$element.detach(); // Remove but keep events - MUTATES
$element.replaceWith($newElement); // Replace element - MUTATES
// Modern Add/Remove (MUTATES DOM)
$element.append($child1, $child2, 'text'); // Add multiple children/text - MUTATES
$element.prepend($child1, $child2); // Add to beginning - MUTATES
$element.before($newElement); // Insert before element - MUTATES
$element.after($newElement); // Insert after element - MUTATES
$element.replaceWith($newElement); // Replace element - MUTATES
// Content (GETS/SETS)
$element.html(); // "Hello
"
$element.html('New'); // Set HTML content - MUTATES
$element.text(); // "Hello World"
$element.text('New text'); // Set text content - MUTATES
$element.text(); // "Hello World" (jQuery text() is like textContent)
$element.prop('outerHTML'); // "Hello
"
// Attributes (GETS/SETS)
$element.attr('id'); // "myId"
$element.attr('id', 'newId'); // Set attribute - MUTATES
$element.removeAttr('class'); // Remove attribute - MUTATES
$element.is('[data-value]'); // true/false (has attribute)
$element.prop('id'); // "myId" (property)
$element.prop('id', 'newId'); // Set property - MUTATES
$element.attr('class'); // "class1 class2"
$element.attr('class', 'newClass'); // Set class - MUTATES
// Classes (MUTATES DOM)
$element.addClass('newClass'); // Add class - MUTATES
$element.removeClass('oldClass'); // Remove class - MUTATES
$element.toggleClass('active'); // Toggle class - MUTATES
$element.hasClass('myClass'); // true/false
$element.removeClass('old').addClass('new'); // Replace class - MUTATES
// Styles (GETS/SETS)
$element.css('color', 'red'); // Set CSS property - MUTATES
$element.css('background-color', 'blue'); // Set background - MUTATES
$element.css({'color': 'red', 'background': 'blue'}); // Set multiple styles - MUTATES
$element.css('color'); // "rgb(255, 0, 0)" (computed style)
$element.css('color', ''); // Remove style property - MUTATES
// Data Attributes (GETS/SETS)
$element.data('userId'); // Get data-user-id
$element.data('userId', '123'); // Set data-user-id - MUTATES
$element.attr('data-user-id'); // "123"
$element.attr('data-value', 'test'); // Set data attribute - MUTATES
// Navigation (RETURNS JQUERY OBJECT)
$element.parent(); // Parent element
$element.parent(); // Parent element (jQuery doesn't distinguish)
$element.children(); // Child elements
$element.contents(); // All child nodes (including text)
$element.children().first(); // First child element
$element.children().last(); // Last child element
$element.next(); // Next sibling element
$element.prev(); // Previous sibling element
// Events (MUTATES DOM)
$element.on('click', handler); // Add event listener - MUTATES
$element.off('click', handler); // Remove event listener - MUTATES
$element.click(handler); // Set click handler - MUTATES
$element.click(); // Trigger click event - MUTATES
$element.focus(); // Focus element - MUTATES
$element.blur(); // Blur element - MUTATES
// Form Elements (GETS/SETS)
$input.val(); // Input value
$input.val('new value'); // Set input value - MUTATES
$input.is(':checked'); // true/false (checkboxes/radios)
$input.prop('checked', true); // Set checked - MUTATES
$input.prop('disabled', true); // Disable input - MUTATES
$select.prop('selectedIndex'); // Selected option index
$form.submit(); // Submit form - MUTATES
$form[0].reset(); // Reset form - MUTATES
// Position/Size (RETURNS NUMBER)
$element.outerWidth(); // 200 (width including padding/border)
$element.outerHeight(); // 100 (height including padding/border)
$element.width(); // 180 (width excluding padding/border)
$element.height(); // 80 (height excluding padding/border)
$element[0].scrollWidth; // 250 (full scrollable width - use native)
$element[0].scrollHeight; // 150 (full scrollable height - use native)
$element.offset().left; // 10 (left position relative to document)
$element.offset().top; // 20 (top position relative to document)
// Scroll (GETS/SETS)
$element.scrollTop(); // 50 (vertical scroll position)
$element.scrollLeft(); // 0 (horizontal scroll position)
$element.scrollTop(100); // Set scroll position - MUTATES
$element[0].scrollIntoView(); // Scroll element into view - MUTATES
$(window).scrollTop(100); // Scroll page - MUTATES
// Document Methods (VARIOUS RETURNS)
$(document).attr('title'); // "Page Title"
$(document).attr('title', 'New Title'); // Set page title - MUTATES
$('body'); // element
$('head'); // element
$('html'); // element
$(document.activeElement); // Currently focused element
$(document).is(':focus'); // true/false (document has focus)
// jQuery Specific Methods
$element.eq(0); // Get element at index 0
$element.get(0); // Get native DOM element at index 0
$element.index(); // Get index of element among siblings
$element.length; // Number of elements in jQuery object
$element.each(function(index, element) { // Iterate over elements
// this refers to native DOM element
// $(this) wraps it in jQuery
});
$element.is('.active'); // Check if element matches selector
$element.not('.exclude'); // Filter out elements matching selector
$element.filter('.include'); // Keep only elements matching selector
$element.find('.child'); // Find descendants matching selector
$element.closest('.parent'); // Find closest ancestor matching selector