Adding and Removing CSS Classes

The addClass() function appends a specified class to the selected elements. It is useful for applying styles defined in an external stylesheet.

$('.card').addClass('shadow rounded');

Conversely, removeClass() eliminates specific classes from the selection.

$('.card').removeClass('hidden');

Removing Elements from the DOM

To completely detach an element and its children from the document structure, use remove().

$('#obsolete-element').remove();

Modifying Styles and Properties

Direct CSS manipulation is achieved via css(). This method accepts property-value pairs.

$('#header').css('color', 'blue');

For boolean attributes like disabled, checked, or selected, utilize prop().

$('#input-field').prop('disabled', true);

Manipulating HTML Content

The html() method retrieves or sets the inner HTML of an element, allowing you to inject markup.

$('#status-message').html('<span class="success">Operation Complete</span>');

Moving and Cloning Elements

appendTo() transfers an existing element from its parent to a new target container.

$('.notification').appendTo('#alerts-container');

To duplicate an element rather than moving it, combine clone() with an insertion method.

$('.template').clone().appendTo('#grid-area');

Traversing the DOM Tree

Access the immediate ancestor of an element using parent().

$('.active-link').parent().css('border-left', '4px solid red');

To target all direct descendants, use the children() method.

$('#sidebar').children().css('margin-bottom', '10px');

Advanced Index-Based Selection

Select elements based on their position among siblings using :nth-child().

$('.list-item:nth-child(3)').addClass('highlight');

jQuery also provides specific filters for even and odd indexed elements.

$('.table-row:even').css('background-color', '#f2f2f2');
$('.table-row:odd').css('background-color', '#ffffff');