Editor

Introducción

jQuery es una biblioteca de JavaScript que permite escribir instrucciones de manera más sencilla.

Por ejemplo, en JavaScript puro podríamos escribir:

document.getElementById("titulo").innerText = "México 2026";

Con jQuery podemos escribir algo más corto:

$("#titulo").text("México 2026");

jQuery usa mucho el símbolo:

$

Este símbolo sirve para seleccionar elementos de la página.

1. Estructura básica de ejemplo

ejemplo/
│
├── index.html
└── script.js

2. Archivo index.html

Este ejemplo usa Bootstrap y jQuery desde CDN.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mundial FIFA 2026</title>

  <!-- Bootstrap CSS -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">

    <div class="text-center mb-4">
      <h1 id="titulo" class="text-primary">Mundial FIFA 2026</h1>
      <p class="lead">Página interactiva usando Bootstrap y jQuery</p>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h2 class="card-title">Selección destacada</h2>
        <p id="equipo" class="card-text">
          Da clic en un botón para ver información de una selección.
        </p>

        <button id="btnMexico" class="btn btn-success">México</button>
        <button id="btnCanada" class="btn btn-danger">Canadá</button>
        <button id="btnEstadosUnidos" class="btn btn-primary">Estados Unidos</button>
      </div>
    </div>

    <div class="alert alert-info" id="mensaje">
      Selecciona un país anfitrión del Mundial 2026.
    </div>

    <button id="btnOcultar" class="btn btn-secondary">
      Ocultar / Mostrar mensaje
    </button>

  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <!-- Bootstrap JS -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
  </script>

  <!-- Archivo JS propio -->
  <script src="script.js"></script>

</body>
</html>

3. Archivo script.js

$(document).ready(function() {

  $("#btnMexico").click(function() {
    $("#equipo").text("México será uno de los países anfitriones del Mundial FIFA 2026.");
    $("#mensaje")
      .removeClass()
      .addClass("alert alert-success")
      .text("Has seleccionado a México.");
  });

  $("#btnCanada").click(function() {
    $("#equipo").text("Canadá también será sede de algunos partidos del Mundial FIFA 2026.");
    $("#mensaje")
      .removeClass()
      .addClass("alert alert-danger")
      .text("Has seleccionado a Canadá.");
  });

  $("#btnEstadosUnidos").click(function() {
    $("#equipo").text("Estados Unidos será el país con más sedes durante el Mundial FIFA 2026.");
    $("#mensaje")
      .removeClass()
      .addClass("alert alert-primary")
      .text("Has seleccionado a Estados Unidos.");
  });

  $("#btnOcultar").click(function() {
    $("#mensaje").toggle();
  });

});

4. Explicación

¿Qué hace esta parte?

$(document).ready(function() {

Indica que el código jQuery se ejecutará cuando la página ya haya cargado completamente.

Esto evita errores, porque si JavaScript intenta modificar un botón antes de que exista en la página, no funcionará correctamente.

¿Qué significa $("#btnMexico")?

$("#btnMexico")

Selecciona el elemento HTML que tiene:

id="btnMexico"

El símbolo # se usa para seleccionar elementos por su id.

¿Qué hace .click()?

$("#btnMexico").click(function() {

Indica que cuando el usuario haga clic en el botón de México, se ejecutarán las instrucciones que están dentro de la función.

¿Qué hace .text()?

$("#equipo").text("México será uno de los países anfitriones...");

Cambia el texto del elemento seleccionado.

¿Qué hacen .removeClass() y .addClass()?

$("#mensaje")
  .removeClass()
  .addClass("alert alert-success");

Primero elimina las clases actuales del elemento y después agrega nuevas clases de Bootstrap.

Esto permite cambiar el color del mensaje usando clases como:

alert-success
alert-danger
alert-primary

¿Qué hace .toggle()?

$("#mensaje").toggle();

Permite ocultar o mostrar un elemento.

Si el elemento está visible, lo oculta. Si está oculto, lo vuelve a mostrar.