Selectors, DOM, events, AJAX & animations
Library$('#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// 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()$('#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({
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() { });$('#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();$('#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());
});$.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