Cheatsheets

⚙️ Inclusión en el proyecto

<!-- CDN (recomendado para proyectos rápidos) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Esperar a que el DOM esté listo -->
<script>
  $(document).ready(function() {
    // tu código aquí
  });

  // Forma abreviada
  $(function() {
    // tu código aquí
  });
</script>

🎯 Selectores

$("p")                      // Por etiqueta
$("#mi-id")                 // Por ID
$(".mi-clase")              // Por clase
$("ul li")                  // Descendiente
$("input[type='text']")     // Por atributo
$("li:first")               // Primer elemento
$("li:last")                // Último elemento
$("li:eq(2)")               // Por índice (base 0)
$("p:not(.activo)")         // Negación

📄 Manipulación del DOM

$("#titulo").text("Hola")           // Obtener/set texto plano
$("#caja").html("<b>Negrita</b>")   // Obtener/set HTML interno
$("input").val()                    // Obtener valor de un input
$("input").val("nuevo valor")       // Set valor de un input

$("#caja").append("<p>Al final</p>")    // Insertar al final (dentro)
$("#caja").prepend("<p>Al inicio</p>")  // Insertar al inicio (dentro)
$("#caja").after("<p>Después</p>")      // Insertar después (fuera)
$("#caja").before("<p>Antes</p>")       // Insertar antes (fuera)
$("#caja").remove()                     // Eliminar elemento
$("#caja").empty()                      // Vaciar contenido

🎨 CSS y clases

$("p").css("color", "red")                      // Aplicar estilo
$("p").css({ color: "red", fontSize: "16px" })  // Múltiples estilos
$("div").addClass("activo")                     // Añadir clase
$("div").removeClass("activo")                  // Quitar clase
$("div").toggleClass("activo")                  // Alternar clase
$("div").hasClass("activo")                     // Comprobar clase → true/false

👁️ Mostrar y ocultar

$("#caja").hide()               // Ocultar
$("#caja").show()               // Mostrar
$("#caja").toggle()             // Alternar visibilidad
$("#caja").fadeIn(400)          // Aparecer con fade (ms)
$("#caja").fadeOut(400)         // Desaparecer con fade
$("#caja").fadeToggle()         // Alternar fade
$("#caja").slideDown()          // Desplegar con slide
$("#caja").slideUp()            // Recoger con slide
$("#caja").slideToggle()        // Alternar slide

🖱️ Eventos

$("button").click(function() { ... })         // Clic
$("input").change(function() { ... })         // Cambio de valor
$("input").keyup(function(e) { ... })         // Tecla soltada
$("form").submit(function(e) {                // Envío de formulario
  e.preventDefault();                         // Evitar recarga
});
$("div").hover(
  function() { ... },   // mouseenter
  function() { ... }    // mouseleave
);

// Forma recomendada (funciona con elementos dinámicos)
$(document).on("click", ".mi-clase", function() { ... });

🔁 Iteración

$("li").each(function(index, element) {
  console.log(index, $(element).text());
});

🌐 AJAX

// GET
$.get("/api/datos", function(data) {
  console.log(data);
});

// POST
$.post("/api/guardar", { nombre: "Ana" }, function(res) {
  console.log(res);
});

// Completo y flexible
$.ajax({
  url: "/api/datos",
  method: "GET",
  success: function(data) { console.log(data); },
  error: function(err) { console.error(err); }
});

🔗 Encadenamiento (chaining)

// jQuery permite encadenar métodos en una sola línea
$("#caja")
  .addClass("activo")
  .css("color", "blue")
  .fadeIn(300)
  .text("¡Listo!");

Tip: Anteponer $ convierte cualquier elemento en un objeto jQuery: $(this), $(element), $(".clase").