Chuleta de jQuery
Una referencia de jQuery imprimible y con búsqueda — selectores, manipulación del DOM, eventos, efectos, recorrido, AJAX y ayudantes de formularios. Gratis.
Selectores
14$('#id')
Seleccionar un elemento por su id
$('.class')
Seleccionar todos los elementos con una clase
$('div')
Seleccionar todos los elementos de un nombre de etiqueta
$('*')
Seleccionar todos los elementos de la página
$('[name="email"]')
Seleccionar por el valor de un atributo
$('a[href^="https"]')
Selector de atributo que empieza por
$('ul li:first')
Primer elemento coincidente
$('ul li:last')
Último elemento coincidente
$('tr:eq(2)')
Elemento en un índice de base cero
$('li:not(.done)')
Excluir elementos que coincidan con un selector
$(':checked')
Todas las casillas/radios marcados
$('div:visible')
Solo los elementos visibles actualmente
$('ul li')
Combinador de descendiente
$('ul > li')
Combinador de hijo directo
Document ready y DOM
10$(function () { /* ... */ });
Ejecutar código cuando el DOM esté listo
$(document).ready(fn)
Manejador explícito de document-ready
$(window).on('load', fn)
Ejecutar tras cargar todos los recursos
$(this)
Envolver el elemento de contexto actual
$(el)
Envolver un nodo DOM en bruto con jQuery
$('<div class="box"></div>')
Crear un elemento nuevo a partir de HTML
$('#box')[0]
Obtener el nodo DOM subyacente
$('#box').get(0)
Obtener el nodo DOM mediante .get()
$('.item').length
Contar los elementos coincidentes
$('#box').is(':visible')
Probar un selector contra el conjunto
Manipulación del DOM
12$('#box').html('<b>Hi</b>')
Establecer el HTML interno
$('#box').text('Hello')
Establecer el contenido de texto (escapado)
$('#name').val('Ada')
Establecer el valor de un campo de formulario
$('#list').append('<li>x</li>')
Insertar contenido al final
$('#list').prepend('<li>x</li>')
Insertar contenido al principio
$('#box').before('<hr>')
Insertar contenido antes del elemento
$('#box').after('<hr>')
Insertar contenido después del elemento
$('#box').remove()
Eliminar el elemento del DOM
$('#box').empty()
Eliminar todos los nodos hijos
$('#box').clone()
Crear una copia del elemento
$('#box').wrap('<div>')
Envolver el elemento en HTML nuevo
$('#box').replaceWith('<p>')
Reemplazar el elemento por completo
Atributos y CSS
13$('#img').attr('src')
Obtener el valor de un atributo
$('#img').attr('alt', 'Logo')
Establecer el valor de un atributo
$('#cb').prop('checked')
Obtener una propiedad del DOM (checked/disabled)
$('#cb').prop('checked', true)
Establecer una propiedad del DOM
$('#img').removeAttr('title')
Eliminar un atributo
$('.box').addClass('active')
Añadir una clase CSS
$('.box').removeClass('active')
Eliminar una clase CSS
$('.box').toggleClass('open')
Alternar una clase CSS
$('.box').hasClass('active')
Comprobar si una clase está presente
$('#box').css('color', 'red')
Establecer una sola propiedad CSS
$('#box').css({top: 0, left: 0})
Establecer varias propiedades CSS
$('#box').width()
Obtener el ancho calculado en píxeles
$('#box').height()
Obtener la altura calculada en píxeles
Eventos
12$('#btn').on('click', fn)
Asociar un manejador de eventos
$('#btn').off('click')
Desasociar manejadores de eventos
$('#btn').click(fn)
Manejador de clic abreviado
$('#form').submit(fn)
Manejar el envío de un formulario
$('#sel').change(fn)
Manejar los cambios de valor
$('#in').keyup(fn)
Manejar key-up en un campo
$('#list').on('click', '.item', fn)
Evento delegado para hijos dinámicos
$('#btn').trigger('click')
Disparar un evento programáticamente
$('#btn').one('click', fn)
Ejecutar un manejador como máximo una vez
e.preventDefault()
Detener la acción por defecto del navegador
e.stopPropagation()
Evitar que el evento se propague
e.target
El elemento que disparó el evento
Efectos y animación
12$('#box').show()
Mostrar un elemento oculto
$('#box').hide()
Ocultar un elemento
$('#box').toggle()
Alternar la visibilidad
$('#box').fadeIn(300)
Hacer aparecer un elemento con fundido
$('#box').fadeOut(300)
Hacer desaparecer un elemento con fundido
$('#box').fadeTo(300, 0.5)
Fundir hasta una opacidad determinada
$('#box').slideUp()
Deslizar un elemento hacia arriba (colapsar)
$('#box').slideDown()
Deslizar un elemento hacia abajo (expandir)
$('#box').slideToggle()
Alternar una animación de deslizamiento
$('#box').animate({left: 100})
Animar propiedades CSS
$('#box').stop()
Detener la animación actual
$('#box').delay(500).fadeIn()
Retrasar el siguiente efecto en cola
Recorrido
12$('#box').find('.item')
Encontrar descendientes que coincidan con un selector
$('#box').parent()
Obtener el padre directo
$('#box').parents('.row')
Obtener todos los ancestros que coincidan con un selector
$('#box').closest('.row')
Ancestro coincidente más cercano (o el propio)
$('#box').children()
Obtener los hijos directos
$('#box').siblings()
Obtener los elementos hermanos
$('#box').next()
Obtener el hermano siguiente
$('#box').prev()
Obtener el hermano anterior
$('.item').each(fn)
Iterar sobre cada elemento coincidente
$('.item').filter('.on')
Reducir el conjunto con un selector
$('.item').first()
Reducir el conjunto al primer elemento
$('.item').eq(1)
Reducir el conjunto a un índice
AJAX
11$.ajax({url: '/api', method: 'GET'})
Petición AJAX con control total
$.get('/api', fn)
Petición HTTP GET abreviada
$.post('/api', data, fn)
Petición HTTP POST abreviada
$.getJSON('/api.json', fn)
Petición GET que espera JSON
$('#box').load('/part.html')
Cargar HTML en un elemento
$.ajax({dataType: 'json'})
Establecer el tipo de respuesta esperado
$.ajax({data: {q: 'x'}})
Enviar parámetros de la petición
.done(function (res) {})
Ejecutar un callback en caso de éxito
.fail(function (err) {})
Ejecutar un callback en caso de fallo
.always(function () {})
Ejecutar un callback tras completarse
$.ajaxSetup({headers: {}})
Establecer valores por defecto para todas las peticiones
Formularios
10$('#form').serialize()
Codificar los datos del formulario como cadena de consulta
$('#form').serializeArray()
Codificar los datos del formulario como un array
$('#name').val()
Leer el valor de un campo
$('#name').val('Ada')
Escribir el valor de un campo
$(':input')
Seleccionar todos los elementos input del formulario
$('#cb').is(':checked')
Comprobar si una casilla está marcada
$('#sel option:selected')
Obtener la opción seleccionada
$('#in').focus()
Mover el foco a un campo
$('#form').on('submit', fn)
Manejar el evento submit del formulario
$('#in').prop('disabled', true)
Deshabilitar un control de formulario
Utilidades
11$.each(arr, fn)
Iterar sobre un array u objeto
$.map(arr, fn)
Construir un array nuevo a partir de cada elemento
$.grep(arr, fn)
Filtrar un array por un predicado
$.extend({}, a, b)
Fusionar objetos en un destino
$.trim(' hi ')
Recortar el espacio en blanco inicial/final
$.inArray(2, arr)
Encontrar el índice de un elemento en un array
$.isArray(x)
Comprobar si un valor es un array
$.isFunction(x)
Comprobar si un valor es una función
$.parseJSON(str)
Parsear una cadena JSON a un objeto
$.now()
Marca de tiempo actual en milisegundos
$.type(x)
Obtener el tipo interno de un valor
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.