jQuery Cheatsheet

Selectors, DOM, events, AJAX & animations

Library
Contents
🎯

Selectors

$('#id')                  // by ID
$('.class')               // by class
$('div')                  // by tag
$('div.active')           // combined
$('ul > li')              // direct children
$('input[type="text"]')    // attribute
$(':first-child')         // pseudo
$(':checked')             // checked inputs
$(':visible')  $(':hidden')
$(':contains("text")')    // contains text
🏗️

DOM Manipulation

// Get / Set
$('#el').text()              // get text
$('#el').text('new text')    // set text
$('#el').html('<b>hi</b>')  // set HTML
$('input').val()            // get value
$('input').val('new')      // set value

// Attributes & CSS
$('#el').attr('href')
$('#el').attr('href', '#')
$('#el').css('color', 'red')
$('#el').addClass('active')
$('#el').removeClass('active')
$('#el').toggleClass('active')

// Insert / Remove
$('#el').append('<p>end</p>')
$('#el').prepend('<p>start</p>')
$('#el').after('<p>after</p>')
$('#el').remove()
$('#el').empty()
$('#el').clone()
📡

Events

$('#btn').click(function() { });
$('#btn').on('click', function(e) {
    e.preventDefault();
    $(this).text('Clicked!');
});

// Common events
.click()   .dblclick()   .hover()
.focus()   .blur()      .change()
.keydown() .keyup()     .submit()
.scroll()  .resize()

// Delegation
$('#list').on('click', 'li', function() { });

// Document ready
$(function() { /* DOM ready */ });
🌐

AJAX

$.ajax({
    url: '/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) { },
    error: function(xhr, status, err) { }
});

// Shorthand
$.get('/api/data', function(data) { });
$.post('/api/data', { name: 'Alice' });
$.getJSON('/api/data', function(json) { });
$('#result').load('/page.html #content');

// Promise style
$.ajax('/api/data')
    .done(function(data) { })
    .fail(function(err) { })
    .always(function() { });

Effects

$('#el').hide()        $('#el').show()
$('#el').toggle()
$('#el').fadeIn(400)   $('#el').fadeOut(400)
$('#el').fadeToggle()  $('#el').fadeTo(400, 0.5)
$('#el').slideDown()  $('#el').slideUp()
$('#el').slideToggle()

// Custom animation
$('#el').animate({
    opacity: 0.5,
    left: '+=50',
    height: 'toggle'
}, 1000);

$('#el').stop();       // stop animation
$('#el').delay(500).fadeIn();
🔍

Traversal

$('#el').parent()      $('#el').parents()
$('#el').children()    $('#el').find('.x')
$('#el').siblings()    $('#el').next()
$('#el').prev()        $('#el').closest('.x')
$('#el').first()       $('#el').last()
$('#el').eq(2)        // element at index
$('#el').filter('.active')
$('#el').not('.hidden')
$('li').each(function(i, el) {
    console.log(i, $(this).text());
});
🔧

Utilities

$.each(arr, function(i, val) { });
$.each(obj, function(key, val) { });
$.extend({}, defaults, options);  // merge
$.map(arr, function(val) { return val * 2; });
$.grep(arr, function(val) { return val > 5; });
$.inArray('a', arr)     // indexOf
$.isArray(x)            // check array
$.trim(str)             // trim whitespace
$.parseJSON(str)        // parse JSON