DOM Manipulation

Select elements using CSS selectors, DOM elements, or HTML strings.

// CSS selector
$('.class')
$('#id')
$('div.container > p')

// DOM element
$(document.body)
$(element)

// HTML string
$('
Content
')

// Collection from NodeList
$(document.querySelectorAll('p'))

Try It

Limit your search to a specific element for better performance and clarity.

// Search within specific container
const container = document.getElementById('container');
$('li', container).addClass('highlight');

// Equivalent to chaining
$('#container').find('li').addClass('highlight');

// Performance benefit: searches smaller subset
$('.item', containerEl).css('color', 'blue');

Try It

Navigate the DOM tree with chainable methods.

// Find descendants
$('#container').find('.item')

// Navigate up
$('.item').parent()
$('.item').closest('.container')
$('.item').parents('div')

// Siblings
$('.active').siblings()
$('.item').next()
$('.item').prev()

// Filtering
$('.items').filter('.active')
$('.items').not('.disabled')
$('.items').eq(2)  // Third element
$('.items').first()
$('.items').last()

Try It

Get and set element content, attributes, and values.

// Get/set HTML content
$('#box').html()              // Get
$('#box').html('New')  // Set

// Get/set text content
$('#box').text()
$('#box').text('Plain text')

// Get/set form values
$('input').val()
$('input').val('New value')

// Attributes
$('img').attr('src')
$('img').attr('src', 'new.jpg')
$('img').attr({ src: 'img.jpg', alt: 'Image' })

// Data attributes
$('#el').data('id')          // data-id
$('#el').data('id', '123')

Try It

Manipulate styles and CSS classes.

// Get/set CSS
$('#box').css('color')
$('#box').css('color', 'red')
$('#box').css({ color: 'red', fontSize: '16px' })

// Classes
$('#box').addClass('active')
$('#box').removeClass('active')
$('#box').toggleClass('active')
$('#box').hasClass('active')  // Returns boolean

// Visibility
$('#box').show()
$('#box').hide()
$('#box').toggle()

Try It

Insert, replace, and remove elements.

// Inserting content
$('#list').append('
New item
')
$('#list').prepend('
First item
')
$('#item').after('
After
')
$('#item').before('
Before
')

// Moving elements
$('
New
').appendTo('#list')

// Wrapping
$('.item').wrap('
')
$('.item').unwrap()

// Removing
$('#item').remove()
$('#list').empty()

// Cloning
$('#item').clone()

Try It

Attach, trigger, and manage events.

// Basic event binding
$('#btn').on('click', function(e) {
    console.log('Clicked!', this);
});

// Event delegation
$('#list').on('click', '.item', handler);

// One-time event
$('#btn').one('click', handler);

// Remove events
$('#btn').off('click');
$('#btn').off('click', specificHandler);

// Trigger events
$('#btn').trigger('click');

// Shorthand methods
$('#btn').click(handler);
$('#input').focus(handler);
$('#form').submit(handler);

// Hover (mouseenter + mouseleave)
$('#box').hover(enterFn, leaveFn);

Try It

Animate elements with built-in effects.

// Fade effects
$('#box').fadeIn(400)
$('#box').fadeOut(400)
$('#box').fadeToggle()
$('#box').fadeTo(400, 0.5)  // Fade to 50% opacity

// Slide effects
$('#box').slideDown(400)
$('#box').slideUp(400)
$('#box').slideToggle()

// Custom animation
$('#box').animate({
    opacity: 0.5,
    marginLeft: '100px'
}, 500)

// Chained animations with delay
$('#box')
    .fadeOut(200)
    .delay(500)
    .fadeIn(200)

Try It

Get and set element dimensions and position.

// Dimensions
$('#box').width()              // Content width
$('#box').width(200)           // Set width
$('#box').height()
$('#box').innerWidth()         // Including padding
$('#box').outerWidth()         // Including padding + border
$('#box').outerWidth(true)     // Including margin

// Position
$('#box').offset()             // { top, left } relative to document
$('#box').position()           // { top, left } relative to offset parent

// Scroll
$(window).scrollTop()
$(window).scrollTop(0)         // Scroll to top
$('#box').scrollLeft()

Try It

Iterate and work with element collections.

// Iterate
$('.items').each(function(index, element) {
    console.log(index, $(this).text());
});

// Map to values
const texts = $('.items').map(function() {
    return $(this).text();
}).toArray();

// Get raw elements
$('.items').get()     // All elements as array
$('.items').get(0)    // First element
$('.items')[0]        // Same as get(0)

// Index
$('.items').index($('.active'))  // Position of element

// Length
$('.items').length    // Number of elements