{"id":11332,"date":"2026-01-05T08:45:00","date_gmt":"2026-01-05T07:45:00","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=11332"},"modified":"2026-01-08T13:21:29","modified_gmt":"2026-01-08T12:21:29","slug":"jquery-explicado-facil","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/jquery-explicado-facil\/","title":{"rendered":"Qu\u00e9 es jQuery y para qu\u00e9 sirve explicado f\u00e1cil"},"content":{"rendered":"\n<p>Si has llegado aqu\u00ed buscando <strong>qu\u00e9 es jQuery<\/strong> y <strong>para qu\u00e9 sirve<\/strong>, est\u00e1s en el sitio correcto. jQuery es una <em>librer\u00eda de JavaScript<\/em> que se cre\u00f3 para hacer m\u00e1s f\u00e1cil lo t\u00edpico en una web: seleccionar elementos, reaccionar a clics y cambiar cosas en pantalla sin volverte loco con c\u00f3digo largo.<\/p>\n\n\n\n<p>\u00bfTe ha pasado que quieres que un bot\u00f3n abra un men\u00fa, que aparezca un mensaje o que un formulario avise si falta un campo? jQuery es como una <strong>caja de herramientas<\/strong> que te deja hacer eso con menos esfuerzo y con una forma de escribir bastante clara.<\/p>\n\n\n\n<p>Ahora bien, con JavaScript moderno muchas cosas ya se pueden hacer sin librer\u00edas, as\u00ed que la duda es normal: \u00bf<strong>sigue sirviendo jQuery<\/strong> hoy en d\u00eda? La respuesta corta es que s\u00ed, sobre todo porque est\u00e1 metido en much\u00edsimas webs ya hechas, en plantillas y en proyectos antiguos que a\u00fan funcionan y se mantienen.<\/p>\n\n\n\n<p>En este post vas a ver <strong>jQuery explicado f\u00e1cil<\/strong>, con ejemplos sencillos y sin tecnicismos raros, para que entiendas cu\u00e1ndo tiene sentido usarlo y qu\u00e9 puedes hacer con \u00e9l desde el minuto uno.<\/p>\n\n\n\n<p><strong><em>Tabla de Contenidos:<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-que-es-jquery\">Qu\u00e9 es jQuery<\/a><\/li><li><a href=\"#aioseo-para-que-sirve-jquery-en-una-web\">Para qu\u00e9 sirve jQuery en una web<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-como-se-usa-jquery-paso-a-paso\">C\u00f3mo se usa jQuery paso a paso<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-ejemplos-basicos-de-jquery-que-vas-a-usar-de-verdad\">Ejemplos b\u00e1sicos de jQuery que vas a usar de verdad<\/a><ul><li><a href=\"#aioseo-cambiar-texto-y-html\">Cambiar texto y HTML<\/a><\/li><li><a href=\"#aioseo-anadir-y-quitar-clases-css\">A\u00f1adir y quitar clases CSS<\/a><\/li><li><a href=\"#aioseo-mostrar-y-ocultar-elementos\">Mostrar y ocultar elementos<\/a><\/li><li><a href=\"#aioseo-un-clic-que-abre-y-cierra-un-menu\">Un clic que abre y cierra un men\u00fa<\/a><\/li><li><a href=\"#aioseo-validacion-simple-de-un-formulario\">Validaci\u00f3n simple de un formulario<\/a><\/li><li><a href=\"#aioseo-cambiar-atributos-tipicos\">Cambiar atributos t\u00edpicos<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-jquery-vs-javascript-puro\">jQuery vs JavaScript puro<\/a><ul><\/ul><\/li><li><a href=\"#aioseo-por-que-jquery-sigue-siendo-importante-hoy\">Por qu\u00e9 jQuery sigue siendo importante hoy<\/a><ul><li><a href=\"#aioseo-wordpress-y-proyectos-antiguos\">WordPress y proyectos antiguos<\/a><\/li><li><a href=\"#aioseo-mantenimiento-y-cambios-rapidos-en-webs-ya-hechas\">Mantenimiento y cambios r\u00e1pidos en webs ya hechas<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><li><a href=\"#aioseo-preguntas-frecuentes-sobre-jquery\">Preguntas Frecuentes sobre jQuery (FAQ)<\/a><\/li><\/ul><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-que-es-jquery\">Qu\u00e9 es jQuery<\/h2>\n\n\n\n<p><strong>jQuery es una librer\u00eda de JavaScript<\/strong> pensada para hacer m\u00e1s f\u00e1cil lo t\u00edpico en una web. Si JavaScript es como cocinar desde cero, jQuery es como tener una <strong>caja de herramientas<\/strong> con atajos para tareas comunes.<\/p>\n\n\n\n<p>Cuando alguien busca <em>qu\u00e9 es jQuery<\/em>, casi siempre quiere entender esto:<\/p>\n\n\n\n<ul>\n<li><strong>Seleccionar elementos del HTML<\/strong> (como un bot\u00f3n o un men\u00fa)<\/li>\n\n\n\n<li><strong>Cambiar cosas en pantalla<\/strong> (texto, clases CSS, visibilidad)<\/li>\n\n\n\n<li><strong>Reaccionar a acciones del usuario<\/strong> (clics, formularios, teclado)<\/li>\n<\/ul>\n\n\n\n<p>\u00bfPor qu\u00e9 se volvi\u00f3 tan popular? Durante a\u00f1os, lo que funcionaba en un navegador pod\u00eda fallar en otro. jQuery actuaba como un <strong>traductor entre navegadores<\/strong>, para que t\u00fa escribieras una sola vez y la web se comportara de forma parecida en todos.<\/p>\n\n\n\n<p>Hay otra pista r\u00e1pida para reconocerlo: el s\u00edmbolo <strong><code>$<\/code><\/strong>. Es como decir \u201cjQuery, ven aqu\u00ed\u201d. Con eso seleccionas algo y luego le aplicas acciones, muy parecido a c\u00f3mo apuntas elementos con CSS.<\/p>\n\n\n\n<p>Y la duda t\u00edpica: \u00bftiene sentido aprender jQuery hoy? S\u00ed, porque <strong>sigue apareciendo en much\u00edsimas webs reales<\/strong>, sobre todo en proyectos ya hechos, plantillas y sitios con WordPress. Saber lo b\u00e1sico te permite entender qu\u00e9 est\u00e1 pasando y hacer cambios sin liarte.<\/p>\n\n\n\n<!-- BLOQUE: MET\u00c1FORA JQUERY VS JS -->\n<div style=\"background-color: #f0f7fb; border: 1px solid #d1e7f5; border-radius: 10px; padding: 25px; margin: 30px 0; font-family: sans-serif;\">\n    <div style=\"text-align: center; margin-bottom: 20px;\">\n        <span style=\"display: inline-block; background-color: #0769AD; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; text-transform: uppercase; font-size: 0.9em;\">Concepto Clave<\/span>\n    <\/div>\n    <div style=\"display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;\">\n        <!-- Tarjeta JS -->\n        <div style=\"flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-bottom: 4px solid #f7df1e;\">\n            <div style=\"font-size: 3em; text-align: center; margin-bottom: 10px;\">\ud83d\udc68\u200d\ud83c\udf73<\/div>\n            <p style=\"text-align: center; font-weight: bold; font-size: 1.1em; margin: 0; color: #333;\">JavaScript Puro<\/p>\n            <p style=\"text-align: center; color: #666; font-size: 0.95em; line-height: 1.5;\">Es como <strong>cocinar desde cero<\/strong>. Tienes que cortar, pelar, medir y cocinar cada ingrediente. Tienes control total, pero tardas m\u00e1s.<\/p>\n        <\/div>\n        <!-- VS -->\n        <div style=\"display: flex; align-items: center; justify-content: center;\">\n            <span style=\"background: #333; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;\">VS<\/span>\n        <\/div>\n        <!-- Tarjeta jQuery -->\n        <div style=\"flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-bottom: 4px solid #0769AD;\">\n            <div style=\"font-size: 3em; text-align: center; margin-bottom: 10px;\">\ud83e\uddf0<\/div>\n            <p style=\"text-align: center; font-weight: bold; font-size: 1.1em; margin: 0; color: #0769AD;\">jQuery<\/p>\n            <p style=\"text-align: center; color: #666; font-size: 0.95em; line-height: 1.5;\">Es tu <strong>caja de herramientas<\/strong> o ingredientes precocinados. Abres el bote, mezclas y listo. Menos esfuerzo para el mismo resultado visual.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-para-que-sirve-jquery-en-una-web\">Para qu\u00e9 sirve jQuery en una web<\/h2>\n\n\n\n<p><strong>jQuery sirve<\/strong> para lo mismo que mucha gente quiere hacer cuando <em>\u201cempieza a tocar\u201d<\/em> una web: <strong>hacerla m\u00e1s din\u00e1mica<\/strong> sin tener que escribir un mont\u00f3n de JavaScript. Si tu p\u00e1gina fuese un escaparate, jQuery te ayuda a cambiar lo que se ve en el cristal sin tener que desmontar toda la tienda.<\/p>\n\n\n\n<p>Lo importante es entender que jQuery no sustituye a HTML o CSS. <strong>Se apoya en ellos<\/strong>. T\u00fa tienes la estructura (HTML), el estilo (CSS) y jQuery te da una forma sencilla de <strong>mover piezas<\/strong>, <strong>cambiar textos<\/strong>, <strong>activar comportamientos<\/strong> y <strong>reaccionar al usuario<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-manipular-el-dom-sin-liarte\">Manipular el DOM sin liarte<\/h3>\n\n\n\n<p>El <strong>DOM<\/strong> es, b\u00e1sicamente, el \u201cmapa\u201d de tu p\u00e1gina. Todo lo que ves (t\u00edtulos, botones, im\u00e1genes, formularios) est\u00e1 ah\u00ed.<\/p>\n\n\n\n<p>Con jQuery puedes hacer cambios t\u00edpicos como:<\/p>\n\n\n\n<ul>\n<li>Cambiar el texto de un elemento<\/li>\n\n\n\n<li>A\u00f1adir o quitar una clase CSS para cambiar el estilo<\/li>\n\n\n\n<li>Mostrar u ocultar un bloque (por ejemplo, un men\u00fa m\u00f3vil)<\/li>\n<\/ul>\n\n\n\n<p>Esto es muy \u00fatil cuando quieres una <strong>web que se sienta viva<\/strong>. Por ejemplo, que al pulsar \u201cVer m\u00e1s\u201d se despliegue contenido, o que un aviso se cierre sin recargar la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-gestionar-eventos-como-clicks-y-formularios\">Gestionar eventos como clicks y formularios<\/h3>\n\n\n\n<p>Un <em>evento<\/em> es cualquier cosa que hace el usuario: un click, escribir en un campo, mover el rat\u00f3n, enviar un formulario\u2026<\/p>\n\n\n\n<p>jQuery facilita mucho este punto, porque te deja decirlo de forma clara: \u201ccuando pase X, haz Y\u201d. Es el tipo de cosas que necesitas para:<\/p>\n\n\n\n<ul>\n<li>Abrir y cerrar un men\u00fa<\/li>\n\n\n\n<li>Cambiar el estado de un bot\u00f3n<\/li>\n\n\n\n<li>Validar un formulario antes de enviarlo<\/li>\n<\/ul>\n\n\n\n<p>\u00bfTe suena eso de \u201che pulsado y no pasa nada\u201d? Muchas veces lo que falta es justo ese evento bien configurado.<\/p>\n\n\n\n<!-- BLOQUE: GRID DE FUNCIONALIDADES -->\n<div style=\"display: grid; \n            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); \n            gap: 20px; \n            margin: 35px 0; \n            font-family: sans-serif;\">\n\n    <!-- Card 1 -->\n    <div style=\"background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; transition: transform 0.2s;\">\n        <div style=\"font-size: 2em; margin-bottom: 10px;\">\ud83c\udfd7\ufe0f<\/div>\n        <strong style=\"display: block; font-size: 1.1em; color: #333; margin-bottom: 8px;\">Manipular el DOM<\/strong>\n        <p style=\"color: #666; font-size: 0.95em; margin: 0; line-height: 1.5;\">Cambia textos, colores o estructuras HTML sin recargar la p\u00e1gina. Si quieres que un t\u00edtulo cambie al rojo, esto lo hace.<\/p>\n    <\/div>\n    <!-- Card 2 -->\n    <div style=\"background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;\">\n        <div style=\"font-size: 2em; margin-bottom: 10px;\">\ud83d\uddb1\ufe0f<\/div>\n        <strong style=\"display: block; font-size: 1.1em; color: #333; margin-bottom: 8px;\">Eventos (Clics)<\/strong>\n        <p style=\"color: #666; font-size: 0.95em; margin: 0; line-height: 1.5;\">Detecta cuando el usuario hace clic, pasa el rat\u00f3n por encima o escribe en un teclado para lanzar una acci\u00f3n.<\/p>\n    <\/div>\n    <!-- Card 3 -->\n    <div style=\"background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;\">\n        <div style=\"font-size: 2em; margin-bottom: 10px;\">\u2728<\/div>\n        <strong style=\"display: block; font-size: 1.1em; color: #333; margin-bottom: 8px;\">Efectos y Animaciones<\/strong>\n        <p style=\"color: #666; font-size: 0.95em; margin: 0; line-height: 1.5;\">Hacer aparecer (fadeIn) o desaparecer elementos suavemente, o desplegar men\u00fas (slideDown) con una sola l\u00ednea de c\u00f3digo.<\/p>\n    <\/div>\n    <!-- Card 4 -->\n    <div style=\"background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;\">\n        <div style=\"font-size: 2em; margin-bottom: 10px;\">\u26a1<\/div>\n        <strong style=\"display: block; font-size: 1.1em; color: #333; margin-bottom: 8px;\">AJAX<\/strong>\n        <p style=\"color: #666; font-size: 0.95em; margin: 0; line-height: 1.5;\">Carga datos nuevos (como comentarios o productos) sin tener que recargar toda la p\u00e1gina web.<\/p>\n    <\/div>\n<\/div>\n\n<!-- Media query para forzar 2x2 en pantallas de ordenador (\u2265768px) -->\n<style>\n@media (min-width: 768px) {\n    div[style*=\"grid-template-columns: repeat(auto-fit\"] {\n        grid-template-columns: repeat(2, 1fr) !important;\n    }\n}\n<\/style>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-animaciones-y-efectos-sencillos\">Animaciones y efectos sencillos<\/h3>\n\n\n\n<p>jQuery tambi\u00e9n sirve para meter <strong>efectos simples<\/strong> sin complicarte. No estamos hablando de animaciones de videojuego, sino de lo t\u00edpico que mejora la experiencia:<\/p>\n\n\n\n<ul>\n<li>Un bloque que aparece o desaparece con suavidad<\/li>\n\n\n\n<li>Un panel que se desliza<\/li>\n\n\n\n<li>Un mensaje que se oculta de forma limpia<\/li>\n<\/ul>\n\n\n\n<p>Esto ayuda a que el usuario entienda qu\u00e9 est\u00e1 pasando, porque los cambios no son tan bruscos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ajax-para-cargar-contenido-sin-recargar-la-pagina\">AJAX para cargar contenido sin recargar la p\u00e1gina<\/h3>\n\n\n\n<p>AJAX es una forma de <strong>pedir datos al servidor<\/strong> y actualizar una parte de la web sin recargar todo.<\/p>\n\n\n\n<p>Ejemplos muy comunes:<\/p>\n\n\n\n<ul>\n<li>Cargar m\u00e1s productos al bajar (scroll infinito)<\/li>\n\n\n\n<li>Actualizar comentarios<\/li>\n\n\n\n<li>Buscar resultados en tiempo real mientras escribes<\/li>\n<\/ul>\n\n\n\n<p>Hoy en d\u00eda se puede hacer con <strong>JavaScript moderno<\/strong>, pero jQuery lo hizo muy popular y todav\u00eda lo ver\u00e1s en proyectos reales. Si te encuentras c\u00f3digo antiguo, entender este punto te ahorra muchos sustos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-se-usa-jquery-paso-a-paso\">C\u00f3mo se usa jQuery paso a paso<\/h2>\n\n\n\n<p>Usar jQuery no es complicado, pero hay un orden l\u00f3gico. Si intentas usarlo \u201ca lo loco\u201d, es f\u00e1cil que te pase lo t\u00edpico: el bot\u00f3n no responde, el selector no encuentra nada o el c\u00f3digo se ejecuta antes de tiempo.<\/p>\n\n\n\n<p>La idea general es esta:<\/p>\n\n\n\n<ul>\n<li><strong>Cargas jQuery<\/strong><\/li>\n\n\n\n<li><strong>Seleccionas un elemento<\/strong><\/li>\n\n\n\n<li><strong>Le aplicas una acci\u00f3n<\/strong> (cambiar texto, a\u00f1adir clase, escuchar un clic, etc.)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-como-anadir-jquery-a-tu-web\">C\u00f3mo a\u00f1adir jQuery a tu web<\/h3>\n\n\n\n<p>Tienes dos formas habituales de incluir jQuery:<\/p>\n\n\n\n<ul>\n<li><strong>Con un CDN<\/strong>: lo enlazas desde una URL externa.<\/li>\n\n\n\n<li><strong>Con un archivo local<\/strong>: lo descargas y lo sirves desde tu propia web.<\/li>\n<\/ul>\n\n\n\n<p>Para empezar, el CDN suele ser m\u00e1s c\u00f3modo porque no tienes que guardar nada. Si la web es un proyecto \u201cserio\u201d o quieres m\u00e1s control, el archivo local puede darte m\u00e1s tranquilidad.<\/p>\n\n\n\n<p>Lo importante es este detalle: <strong>carga jQuery antes de tu script<\/strong>, porque si tu c\u00f3digo se ejecuta y jQuery todav\u00eda no est\u00e1 cargado, no funcionar\u00e1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-que-significa-el-simbolo\">Qu\u00e9 significa el s\u00edmbolo $<\/h3>\n\n\n\n<p>El s\u00edmbolo <strong><code>$<\/code><\/strong> es el atajo de jQuery. Piensa en \u00e9l como un mando a distancia: t\u00fa apuntas a algo y le dices qu\u00e9 hacer.<\/p>\n\n\n\n<p>Ejemplos de \u201capuntar\u201d:<\/p>\n\n\n\n<ul>\n<li><code>$(\"#menu\")<\/code> apunta al elemento con id <code>menu<\/code><\/li>\n\n\n\n<li><code>$(\".btn\")<\/code> apunta a todos los elementos con clase <code>btn<\/code><\/li>\n\n\n\n<li><code>$(\"p\")<\/code> apunta a todos los p\u00e1rrafos<\/li>\n<\/ul>\n\n\n\n<p>Si ya sabes un poco de CSS, esto te va a sonar, porque la forma de seleccionar es muy parecida.<\/p>\n\n\n\n<!-- BLOQUE: ANATOM\u00cdA DE SINTAXIS -->\n<div style=\"background-color: #2D2D2D; color: #fff; padding: 30px; border-radius: 10px; margin: 30px 0; font-family: 'Courier New', monospace; box-shadow: 0 10px 20px rgba(0,0,0,0.15);\">\n    <p style=\"margin: 0 0 15px 0; color: #aaa; font-family: sans-serif; text-transform: uppercase; font-size: 0.8em; letter-spacing: 1px;\">La F\u00f3rmula M\u00e1gica<\/p>\n    <div style=\"font-size: clamp(1.2rem, 4vw, 2rem); line-height: 1.4; text-align: center;\">\n        <span style=\"color: #FFD700; font-weight: bold; border-bottom: 2px solid #FFD700; padding-bottom: 2px; position: relative;\" title=\"Llama a jQuery\">$<\/span>\n        <span style=\"color: #fff;\">(<\/span>\n        <span style=\"color: #9cdcfe; border-bottom: 2px solid #9cdcfe; padding-bottom: 2px;\">\u00abselector\u00bb<\/span>\n        <span style=\"color: #fff;\">).<\/span>\n        <span style=\"color: #dcdcaa; border-bottom: 2px solid #dcdcaa; padding-bottom: 2px;\">acci\u00f3n<\/span>\n        <span style=\"color: #fff;\">();<\/span>\n    <\/div>\n    \n    <div style=\"display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; font-family: sans-serif; font-size: 0.9em;\">\n        <div style=\"flex: 1; min-width: 120px; border-left: 3px solid #FFD700; padding-left: 10px;\">\n            <strong style=\"color: #FFD700; display: block;\">$<\/strong>\n            <span style=\"color: #ccc;\">\u00ab\u00a1Oye jQuery!\u00bb<\/span>\n        <\/div>\n        <div style=\"flex: 1; min-width: 120px; border-left: 3px solid #9cdcfe; padding-left: 10px;\">\n            <strong style=\"color: #9cdcfe; display: block;\">Selector<\/strong>\n            <span style=\"color: #ccc;\">\u00abBusca este elemento\u00bb (ej: #menu)<\/span>\n        <\/div>\n        <div style=\"flex: 1; min-width: 120px; border-left: 3px solid #dcdcaa; padding-left: 10px;\">\n            <strong style=\"color: #dcdcaa; display: block;\">Acci\u00f3n<\/strong>\n            <span style=\"color: #ccc;\">\u00abHaz esto\u00bb (ej: .hide)<\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-selectores-basicos-con-ejemplos\">Selectores b\u00e1sicos con ejemplos<\/h3>\n\n\n\n<p>Los selectores son la base de todo. Si no apuntas bien, no hay nada que cambiar.<\/p>\n\n\n\n<p>Aqu\u00ed tienes los m\u00e1s usados, para tenerlos claros:<\/p>\n\n\n\n<ul>\n<li><strong>Por id<\/strong> <code>#<\/code><br>Perfecto cuando es un elemento \u00fanico, como un men\u00fa o un formulario.<\/li>\n\n\n\n<li><strong>Por clase<\/strong> <code>.<\/code><br>Ideal cuando hay varios, como varios botones o varias tarjetas.<\/li>\n\n\n\n<li><strong>Por etiqueta<\/strong> <code>div<\/code>, <code>a<\/code>, <code>input<\/code><br>\u00datil cuando quieres afectar a un tipo de elemento, pero con cuidado, porque puedes tocar \u201cdemasiado\u201d.<\/li>\n<\/ul>\n\n\n\n<p>Una regla pr\u00e1ctica: si te cuesta seleccionar algo, revisa el HTML y preg\u00fantate: \u201c\u00bfesto es \u00fanico o hay varios iguales?\u201d. Con eso ya sabes si usar id o clase.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-document-ready-para-evitar-errores\">Document ready para evitar errores<\/h3>\n\n\n\n<p>Este es el punto que m\u00e1s confunde al principio: tu script puede ejecutarse cuando el HTML a\u00fan no ha terminado de cargar. Entonces jQuery intenta buscar un elemento\u2026 y \u201cno lo encuentra\u201d, porque todav\u00eda no existe.<\/p>\n\n\n\n<p>Para evitarlo, se usa el patr\u00f3n de esperar a que la p\u00e1gina est\u00e9 lista antes de lanzar tu c\u00f3digo. Es como decir: \u201cprimero monta el escenario, y luego empieza la funci\u00f3n\u201d.<\/p>\n\n\n\n<p>Con eso, evitas muchos fallos tontos y el comportamiento es mucho m\u00e1s estable, sobre todo si tu web tiene bastantes elementos o scripts.<\/p>\n\n\n\n<style>\n        .jquery-container {\n            max-width: 1200px;\n            margin: 40px auto;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n            padding: 0 20px;\n        }\n\n        .jquery-hero-card {\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            border-radius: 20px;\n            padding: 40px;\n            margin-bottom: 40px;\n            box-shadow: 0 10px 40px rgba(55, 54, 61, 0.1);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .jquery-hero-card::before {\n            content: '';\n            position: absolute;\n            top: -50%;\n            right: -50%;\n            width: 200%;\n            height: 200%;\n            background: radial-gradient(circle, rgba(219, 116, 36, 0.1) 0%, transparent 70%);\n            animation: pulse 15s ease-in-out infinite;\n        }\n\n        @keyframes pulse {\n            0%, 100% { transform: scale(1) rotate(0deg); }\n            50% { transform: scale(1.1) rotate(180deg); }\n        }\n\n        .jquery-hero-content {\n            position: relative;\n            z-index: 1;\n        }\n\n        .jquery-title {\n            font-size: 28px;\n            font-weight: 700;\n            color: #37363d;\n            margin: 0 0 15px 0;\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }\n\n        .jquery-icon {\n            width: 50px;\n            height: 50px;\n            background: linear-gradient(135deg, #db7424 0%, #ff9f5a 100%);\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 28px;\n            box-shadow: 0 4px 15px rgba(219, 116, 36, 0.3);\n        }\n\n        .jquery-subtitle {\n            font-size: 16px;\n            color: #6c757d;\n            margin: 0;\n            line-height: 1.6;\n        }\n\n        .jquery-comparison-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 25px;\n            margin-bottom: 40px;\n        }\n\n        .jquery-card {\n            background: white;\n            border-radius: 16px;\n            padding: 30px;\n            box-shadow: 0 5px 20px rgba(55, 54, 61, 0.08);\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            border: 2px solid transparent;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .jquery-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, #db7424 0%, #ff9f5a 100%);\n            transform: scaleX(0);\n            transition: transform 0.3s ease;\n        }\n\n        .jquery-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 15px 40px rgba(55, 54, 61, 0.15);\n            border-color: #db7424;\n        }\n\n        .jquery-card:hover::before {\n            transform: scaleX(1);\n        }\n\n        .jquery-card-header {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 20px;\n        }\n\n        .jquery-card-icon {\n            width: 45px;\n            height: 45px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 22px;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            transition: all 0.3s ease;\n        }\n\n        .jquery-card:hover .jquery-card-icon {\n            transform: rotate(10deg) scale(1.1);\n            background: linear-gradient(135deg, #db7424 0%, #ff9f5a 100%);\n        }\n\n        .jquery-card-title {\n            font-size: 18px;\n            font-weight: 600;\n            color: #37363d;\n            margin: 0;\n        }\n\n        .jquery-card-content {\n            font-size: 14px;\n            color: #6c757d;\n            line-height: 1.6;\n            margin: 0;\n        }\n\n        .jquery-stats-container {\n            background: white;\n            border-radius: 16px;\n            padding: 35px;\n            box-shadow: 0 5px 20px rgba(55, 54, 61, 0.08);\n            margin-bottom: 40px;\n        }\n\n        .jquery-stats-title {\n            font-size: 20px;\n            font-weight: 600;\n            color: #37363d;\n            margin: 0 0 25px 0;\n            text-align: center;\n        }\n\n        .jquery-stat-item {\n            margin-bottom: 25px;\n        }\n\n        .jquery-stat-label {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 10px;\n            font-size: 14px;\n            color: #37363d;\n            font-weight: 500;\n        }\n\n        .jquery-stat-percentage {\n            font-size: 16px;\n            font-weight: 700;\n            color: #db7424;\n        }\n\n        .jquery-progress-bar {\n            height: 12px;\n            background: #f8f9fa;\n            border-radius: 20px;\n            overflow: hidden;\n            position: relative;\n        }\n\n        .jquery-progress-fill {\n            height: 100%;\n            background: linear-gradient(90deg, #db7424 0%, #ff9f5a 100%);\n            border-radius: 20px;\n            width: 0;\n            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .jquery-progress-fill::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n            animation: shimmer 2s infinite;\n        }\n\n        @keyframes shimmer {\n            0% { transform: translateX(-100%); }\n            100% { transform: translateX(100%); }\n        }\n\n        .jquery-usage-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 20px;\n            margin-bottom: 40px;\n        }\n\n        .jquery-usage-card {\n            background: white;\n            border-radius: 12px;\n            padding: 25px;\n            text-align: center;\n            box-shadow: 0 5px 20px rgba(55, 54, 61, 0.08);\n            transition: all 0.3s ease;\n            border: 2px solid transparent;\n        }\n\n        .jquery-usage-card:hover {\n            border-color: #db7424;\n            transform: scale(1.05);\n        }\n\n        .jquery-usage-icon {\n            font-size: 40px;\n            margin-bottom: 15px;\n            display: block;\n            transition: transform 0.3s ease;\n        }\n\n        .jquery-usage-card:hover .jquery-usage-icon {\n            transform: scale(1.2) rotateY(360deg);\n        }\n\n        .jquery-usage-number {\n            font-size: 32px;\n            font-weight: 700;\n            color: #db7424;\n            margin: 0 0 8px 0;\n        }\n\n        .jquery-usage-label {\n            font-size: 13px;\n            color: #6c757d;\n            margin: 0;\n            font-weight: 500;\n        }\n\n        .jquery-timeline {\n            background: white;\n            border-radius: 16px;\n            padding: 35px;\n            box-shadow: 0 5px 20px rgba(55, 54, 61, 0.08);\n            position: relative;\n        }\n\n        .jquery-timeline-title {\n            font-size: 20px;\n            font-weight: 600;\n            color: #37363d;\n            margin: 0 0 30px 0;\n            text-align: center;\n        }\n\n        .jquery-timeline-item {\n            display: flex;\n            gap: 20px;\n            margin-bottom: 30px;\n            position: relative;\n            padding-left: 40px;\n        }\n\n        .jquery-timeline-item::before {\n            content: '';\n            position: absolute;\n            left: 15px;\n            top: 35px;\n            bottom: -30px;\n            width: 2px;\n            background: linear-gradient(180deg, #db7424 0%, #e9ecef 100%);\n        }\n\n        .jquery-timeline-item:last-child::before {\n            display: none;\n        }\n\n        .jquery-timeline-dot {\n            position: absolute;\n            left: 7px;\n            top: 8px;\n            width: 18px;\n            height: 18px;\n            border-radius: 50%;\n            background: #db7424;\n            box-shadow: 0 0 0 4px rgba(219, 116, 36, 0.2);\n            transition: all 0.3s ease;\n        }\n\n        .jquery-timeline-item:hover .jquery-timeline-dot {\n            transform: scale(1.3);\n            box-shadow: 0 0 0 8px rgba(219, 116, 36, 0.3);\n        }\n\n        .jquery-timeline-content {\n            flex: 1;\n        }\n\n        .jquery-timeline-year {\n            font-size: 18px;\n            font-weight: 700;\n            color: #db7424;\n            margin: 0 0 8px 0;\n        }\n\n        .jquery-timeline-text {\n            font-size: 14px;\n            color: #6c757d;\n            margin: 0;\n            line-height: 1.6;\n        }\n\n        .jquery-code-comparison {\n            background: white;\n            border-radius: 16px;\n            padding: 35px;\n            box-shadow: 0 5px 20px rgba(55, 54, 61, 0.08);\n            margin-top: 40px;\n        }\n\n        .jquery-code-title {\n            font-size: 20px;\n            font-weight: 600;\n            color: #37363d;\n            margin: 0 0 25px 0;\n            text-align: center;\n        }\n\n        .jquery-code-tabs {\n            display: flex;\n            gap: 10px;\n            margin-bottom: 20px;\n            border-bottom: 2px solid #e9ecef;\n        }\n\n        .jquery-code-tab {\n            padding: 12px 24px;\n            background: transparent;\n            border: none;\n            font-size: 14px;\n            font-weight: 600;\n            color: #6c757d;\n            cursor: pointer;\n            border-bottom: 3px solid transparent;\n            transition: all 0.3s ease;\n            position: relative;\n            bottom: -2px;\n        }\n\n        .jquery-code-tab:hover {\n            color: #db7424;\n        }\n\n        .jquery-code-tab.active {\n            color: #db7424;\n            border-bottom-color: #db7424;\n        }\n\n        .jquery-code-block {\n            background: #f8f9fa;\n            border-radius: 12px;\n            padding: 25px;\n            font-family: 'Courier New', monospace;\n            font-size: 13px;\n            line-height: 1.6;\n            color: #37363d;\n            overflow-x: auto;\n            display: none;\n        }\n\n        .jquery-code-block.active {\n            display: block;\n            animation: fadeIn 0.3s ease;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .jquery-code-line {\n            margin: 5px 0;\n        }\n\n        .jquery-keyword {\n            color: #d73a49;\n            font-weight: 600;\n        }\n\n        .jquery-string {\n            color: #22863a;\n        }\n\n        .jquery-function {\n            color: #6f42c1;\n        }\n\n        .jquery-comment {\n            color: #6a737d;\n            font-style: italic;\n        }\n\n        @media (max-width: 768px) {\n            .jquery-hero-card {\n                padding: 25px;\n            }\n\n            .jquery-title {\n                font-size: 22px;\n            }\n\n            .jquery-comparison-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .jquery-usage-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n\n            .jquery-timeline-item {\n                padding-left: 30px;\n            }\n\n            .jquery-code-tabs {\n                flex-wrap: wrap;\n            }\n        }\n    <\/style>\n    <div class=\"jquery-container\">\n        <!-- Hero Card -->\n        <div class=\"jquery-hero-card\">\n            <div class=\"jquery-hero-content\">\n                <div class=\"jquery-title\">\n                    <div class=\"jquery-icon\">$<\/div>\n                    <span>jQuery: La Librer\u00eda que Cambi\u00f3 el Desarrollo Web<\/span>\n                <\/div>\n                <p class=\"jquery-subtitle\">\n                    Descubre c\u00f3mo jQuery simplifica JavaScript y por qu\u00e9 sigue siendo relevante en millones de sitios web activos\n                <\/p>\n            <\/div>\n        <\/div>\n        <!-- Comparison Cards -->\n        <div class=\"jquery-comparison-grid\">\n            <div class=\"jquery-card\">\n                <div class=\"jquery-card-header\">\n                    <div class=\"jquery-card-icon\">\ud83c\udfaf<\/div>\n                    <div class=\"jquery-card-title\">Selectores Simples<\/div>\n                <\/div>\n                <p class=\"jquery-card-content\">\n                    Selecciona elementos con la misma sintaxis de CSS. Un s\u00edmbolo $ y listo para trabajar.\n                <\/p>\n            <\/div>\n\n            <div class=\"jquery-card\">\n                <div class=\"jquery-card-header\">\n                    <div class=\"jquery-card-icon\">\u26a1<\/div>\n                    <div class=\"jquery-card-title\">C\u00f3digo Compacto<\/div>\n                <\/div>\n                <p class=\"jquery-card-content\">\n                    Escribe menos l\u00edneas para lograr lo mismo. Perfecto para cambios r\u00e1pidos y mantenimiento.\n                <\/p>\n            <\/div>\n\n            <div class=\"jquery-card\">\n                <div class=\"jquery-card-header\">\n                    <div class=\"jquery-card-icon\">\ud83d\udd04<\/div>\n                    <div class=\"jquery-card-title\">Compatibilidad<\/div>\n                <\/div>\n                <p class=\"jquery-card-content\">\n                    Funciona igual en todos los navegadores sin preocuparte por diferencias entre ellos.\n                <\/p>\n            <\/div>\n\n            <div class=\"jquery-card\">\n                <div class=\"jquery-card-header\">\n                    <div class=\"jquery-card-icon\">\ud83c\udfa8<\/div>\n                    <div class=\"jquery-card-title\">Efectos Visuales<\/div>\n                <\/div>\n                <p class=\"jquery-card-content\">\n                    Animaciones y transiciones suaves con funciones predefinidas listas para usar.\n                <\/p>\n            <\/div>\n        <\/div>\n        <!-- Usage Statistics -->\n        <div class=\"jquery-usage-grid\">\n            <div class=\"jquery-usage-card\">\n                <span class=\"jquery-usage-icon\">\ud83c\udf10<\/span>\n                <div class=\"jquery-usage-number\" data-target=\"77\">0<\/div>\n                <p class=\"jquery-usage-label\">Millones de webs lo usan<\/p>\n            <\/div>\n\n            <div class=\"jquery-usage-card\">\n                <span class=\"jquery-usage-icon\">\ud83d\udcca<\/span>\n                <div class=\"jquery-usage-number\" data-target=\"95\">0<\/div>\n                <p class=\"jquery-usage-label\">% de top 1M webs<\/p>\n            <\/div>\n\n            <div class=\"jquery-usage-card\">\n                <span class=\"jquery-usage-icon\">\u2b50<\/span>\n                <div class=\"jquery-usage-number\" data-target=\"58\">0<\/div>\n                <p class=\"jquery-usage-label\">K estrellas GitHub<\/p>\n            <\/div>\n\n            <div class=\"jquery-usage-card\">\n                <span class=\"jquery-usage-icon\">\ud83d\udcc5<\/span>\n                <div class=\"jquery-usage-number\" data-target=\"18\">0<\/div>\n                <p class=\"jquery-usage-label\">A\u00f1os de historia<\/p>\n            <\/div>\n        <\/div>\n        <!-- Stats Container -->\n        <div class=\"jquery-stats-container\">\n            <div class=\"jquery-stats-title\">Popularidad y Adopci\u00f3n en Proyectos Web<\/div>\n            \n            <div class=\"jquery-stat-item\">\n                <div class=\"jquery-stat-label\">\n                    <span>WordPress (plugins y temas)<\/span>\n                    <span class=\"jquery-stat-percentage\">94%<\/span>\n                <\/div>\n                <div class=\"jquery-progress-bar\">\n                    <div class=\"jquery-progress-fill\" data-width=\"94\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-stat-item\">\n                <div class=\"jquery-stat-label\">\n                    <span>Webs corporativas existentes<\/span>\n                    <span class=\"jquery-stat-percentage\">82%<\/span>\n                <\/div>\n                <div class=\"jquery-progress-bar\">\n                    <div class=\"jquery-progress-fill\" data-width=\"82\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-stat-item\">\n                <div class=\"jquery-stat-label\">\n                    <span>Proyectos e-commerce legacy<\/span>\n                    <span class=\"jquery-stat-percentage\">78%<\/span>\n                <\/div>\n                <div class=\"jquery-progress-bar\">\n                    <div class=\"jquery-progress-fill\" data-width=\"78\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-stat-item\">\n                <div class=\"jquery-stat-label\">\n                    <span>Nuevos proyectos front-end<\/span>\n                    <span class=\"jquery-stat-percentage\">23%<\/span>\n                <\/div>\n                <div class=\"jquery-progress-bar\">\n                    <div class=\"jquery-progress-fill\" data-width=\"23\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Timeline -->\n        <div class=\"jquery-timeline\">\n            <div class=\"jquery-timeline-title\">Evoluci\u00f3n de jQuery en el Desarrollo Web<\/div>\n            \n            <div class=\"jquery-timeline-item\">\n                <div class=\"jquery-timeline-dot\"><\/div>\n                <div class=\"jquery-timeline-content\">\n                    <div class=\"jquery-timeline-year\">2006<\/div>\n                    <p class=\"jquery-timeline-text\">\n                        John Resig lanza jQuery para simplificar JavaScript y resolver incompatibilidades entre navegadores.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-timeline-item\">\n                <div class=\"jquery-timeline-dot\"><\/div>\n                <div class=\"jquery-timeline-content\">\n                    <div class=\"jquery-timeline-year\">2010-2014<\/div>\n                    <p class=\"jquery-timeline-text\">\n                        jQuery alcanza su pico de adopci\u00f3n. Se convierte en el est\u00e1ndar de facto para desarrollo web interactivo.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-timeline-item\">\n                <div class=\"jquery-timeline-dot\"><\/div>\n                <div class=\"jquery-timeline-content\">\n                    <div class=\"jquery-timeline-year\">2015-2019<\/div>\n                    <p class=\"jquery-timeline-text\">\n                        Surgen frameworks modernos como React y Vue. JavaScript nativo mejora significativamente.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"jquery-timeline-item\">\n                <div class=\"jquery-timeline-dot\"><\/div>\n                <div class=\"jquery-timeline-content\">\n                    <div class=\"jquery-timeline-year\">2020-Hoy<\/div>\n                    <p class=\"jquery-timeline-text\">\n                        jQuery sigue presente en millones de webs. Esencial para mantenimiento y proyectos legacy.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Code Comparison -->\n        <div class=\"jquery-code-comparison\">\n            <div class=\"jquery-code-title\">Comparaci\u00f3n de C\u00f3digo: jQuery vs JavaScript<\/div>\n            \n            <div class=\"jquery-code-tabs\">\n                <button class=\"jquery-code-tab active\" data-tab=\"tab1\">Cambiar Texto<\/button>\n                <button class=\"jquery-code-tab\" data-tab=\"tab2\">A\u00f1adir Clase<\/button>\n                <button class=\"jquery-code-tab\" data-tab=\"tab3\">Evento Click<\/button>\n            <\/div>\n\n            <div class=\"jquery-code-block active\" data-content=\"tab1\">\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con jQuery (3 l\u00edneas)<\/span><\/div>\n                <div class=\"jquery-code-line\">$(<span class=\"jquery-string\">\u00ab#mensaje\u00bb<\/span>).<span class=\"jquery-function\">text<\/span>(<span class=\"jquery-string\">\u00ab\u00a1Hola mundo!\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">&nbsp;<\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con JavaScript puro (4 l\u00edneas)<\/span><\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-keyword\">const<\/span> elemento = document.<span class=\"jquery-function\">querySelector<\/span>(<span class=\"jquery-string\">\u00ab#mensaje\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">elemento.textContent = <span class=\"jquery-string\">\u00ab\u00a1Hola mundo!\u00bb<\/span>;<\/div>\n            <\/div>\n\n            <div class=\"jquery-code-block\" data-content=\"tab2\">\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con jQuery (1 l\u00ednea)<\/span><\/div>\n                <div class=\"jquery-code-line\">$(<span class=\"jquery-string\">\u00ab#menu\u00bb<\/span>).<span class=\"jquery-function\">toggleClass<\/span>(<span class=\"jquery-string\">\u00ababierto\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">&nbsp;<\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con JavaScript puro (2 l\u00edneas)<\/span><\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-keyword\">const<\/span> menu = document.<span class=\"jquery-function\">querySelector<\/span>(<span class=\"jquery-string\">\u00ab#menu\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">menu.classList.<span class=\"jquery-function\">toggle<\/span>(<span class=\"jquery-string\">\u00ababierto\u00bb<\/span>);<\/div>\n            <\/div>\n\n            <div class=\"jquery-code-block\" data-content=\"tab3\">\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con jQuery (3 l\u00edneas)<\/span><\/div>\n                <div class=\"jquery-code-line\">$(<span class=\"jquery-string\">\u00ab#boton\u00bb<\/span>).<span class=\"jquery-function\">on<\/span>(<span class=\"jquery-string\">\u00abclick\u00bb<\/span>, <span class=\"jquery-keyword\">function<\/span>() {<\/div>\n                <div class=\"jquery-code-line\">  <span class=\"jquery-function\">alert<\/span>(<span class=\"jquery-string\">\u00ab\u00a1Click!\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">});<\/div>\n                <div class=\"jquery-code-line\">&nbsp;<\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-comment\">\/\/ Con JavaScript puro (4 l\u00edneas)<\/span><\/div>\n                <div class=\"jquery-code-line\"><span class=\"jquery-keyword\">const<\/span> boton = document.<span class=\"jquery-function\">querySelector<\/span>(<span class=\"jquery-string\">\u00ab#boton\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">boton.<span class=\"jquery-function\">addEventListener<\/span>(<span class=\"jquery-string\">\u00abclick\u00bb<\/span>, <span class=\"jquery-keyword\">function<\/span>() {<\/div>\n                <div class=\"jquery-code-line\">  <span class=\"jquery-function\">alert<\/span>(<span class=\"jquery-string\">\u00ab\u00a1Click!\u00bb<\/span>);<\/div>\n                <div class=\"jquery-code-line\">});<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <script>\n        \/\/ Animate progress bars on load\n        window.addEventListener('load', function() {\n            const progressBars = document.querySelectorAll('.jquery-progress-fill');\n            \n            setTimeout(function() {\n                progressBars.forEach(function(bar) {\n                    const width = bar.getAttribute('data-width');\n                    bar.style.width = width + '%';\n                });\n            }, 300);\n\n            \/\/ Animate usage numbers\n            const usageNumbers = document.querySelectorAll('.jquery-usage-number');\n            \n            usageNumbers.forEach(function(element) {\n                const target = parseInt(element.getAttribute('data-target'));\n                let current = 0;\n                const increment = target \/ 50;\n                \n                const timer = setInterval(function() {\n                    current += increment;\n                    if (current >= target) {\n                        element.textContent = target + (target < 100 ? 'M' : target < 1000 ? '' : 'K');\n                        clearInterval(timer);\n                    } else {\n                        element.textContent = Math.floor(current) + (target < 100 ? 'M' : target < 1000 ? '' : 'K');\n                    }\n                }, 30);\n            });\n        });\n\n        \/\/ Code tabs functionality\n        const tabs = document.querySelectorAll('.jquery-code-tab');\n        const codeBlocks = document.querySelectorAll('.jquery-code-block');\n\n        tabs.forEach(function(tab) {\n            tab.addEventListener('click', function() {\n                const targetTab = this.getAttribute('data-tab');\n                \n                \/\/ Remove active class from all tabs and blocks\n                tabs.forEach(function(t) { t.classList.remove('active'); });\n                codeBlocks.forEach(function(block) { block.classList.remove('active'); });\n                \n                \/\/ Add active class to clicked tab and corresponding block\n                this.classList.add('active');\n                const targetBlock = document.querySelector('[data-content=\"' + targetTab + '\"]');\n                if (targetBlock) {\n                    targetBlock.classList.add('active');\n                }\n            });\n        });\n        \/\/ Hover effect on timeline items\n        const timelineItems = document.querySelectorAll('.jquery-timeline-item');\n        \n        timelineItems.forEach(function(item) {\n            item.addEventListener('mouseenter', function() {\n                this.style.transform = 'translateX(5px)';\n                this.style.transition = 'transform 0.3s ease';\n            });\n            \n            item.addEventListener('mouseleave', function() {\n                this.style.transform = 'translateX(0)';\n            });\n        });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ejemplos-basicos-de-jquery-que-vas-a-usar-de-verdad\">Ejemplos b\u00e1sicos de jQuery que vas a usar de verdad<\/h2>\n\n\n\n<p>La teor\u00eda est\u00e1 bien, pero jQuery se entiende de verdad cuando ves <strong>cosas t\u00edpicas<\/strong> que pasan en una web real. Aqu\u00ed tienes ejemplos sencillos, de los que te vas a encontrar mil veces en men\u00fas, avisos, formularios y botones.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Nota r\u00e1pida: en los ejemplos uso <code>#id<\/code> porque es m\u00e1s f\u00e1cil de seguir. En una web real tambi\u00e9n usar\u00e1s clases cuando haya varios elementos iguales.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-cambiar-texto-y-html\">Cambiar texto y HTML<\/h3>\n\n\n\n<p>Cuando quieres actualizar un mensaje, un contador o un aviso, esto es de lo m\u00e1s com\u00fan.<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">text-html.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#mensaje\"<\/span>).<span style=\"color: #61afef;\">text<\/span>(<span style=\"color: #d19a66;\">\"Texto nuevo\"<\/span>);     <span style=\"color: #5c6370;\">\/\/ cambia solo el texto<\/span><br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#mensaje\"<\/span>).<span style=\"color: #61afef;\">html<\/span>(<span style=\"color: #d19a66;\">\"&lt;strong&gt;Hola&lt;\/strong&gt;\"<\/span>); <span style=\"color: #5c6370;\">\/\/ permite HTML dentro<\/span>\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Piensa en esto como cambiar el cartel de una tienda. La tienda es la misma, pero el mensaje del escaparate cambia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-anadir-y-quitar-clases-css\">A\u00f1adir y quitar clases CSS<\/h3>\n\n\n\n<p>Esto es clave para \u201cactivar\u201d estados: un bot\u00f3n seleccionado, un men\u00fa abierto, un error en un input\u2026<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">clases-css.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">addClass<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);<br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">removeClass<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);<br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">toggleClass<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Aqu\u00ed jQuery no hace el estilo por s\u00ed mismo. El estilo lo pone tu CSS. jQuery solo pone y quita la etiqueta de \u201cabierto\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-mostrar-y-ocultar-elementos\">Mostrar y ocultar elementos<\/h3>\n\n\n\n<p>Para desplegables, avisos o detalles que no quieres ense\u00f1ar de golpe, esto va perfecto.<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">visibilidad.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>).<span style=\"color: #61afef;\">hide<\/span>();   <span style=\"color: #5c6370;\">\/\/ oculta<\/span><br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>).<span style=\"color: #61afef;\">show<\/span>();   <span style=\"color: #5c6370;\">\/\/ muestra<\/span><br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>).<span style=\"color: #61afef;\">toggle<\/span>(); <span style=\"color: #5c6370;\">\/\/ alterna entre mostrar y ocultar<\/span>\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Si quieres que sea m\u00e1s suave, puedes usar variantes con efecto:<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">animaciones.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#panel\"<\/span>).<span style=\"color: #61afef;\">slideToggle<\/span>();<br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#mensaje\"<\/span>).<span style=\"color: #61afef;\">fadeIn<\/span>();\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-un-clic-que-abre-y-cierra-un-menu\">Un clic que abre y cierra un men\u00fa<\/h3>\n\n\n\n<p>Este es el cl\u00e1sico de los cl\u00e1sicos. Pulsas un bot\u00f3n y se abre el men\u00fa.<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">menu-click.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#btnMenu\"<\/span>).<span style=\"color: #61afef;\">on<\/span>(<span style=\"color: #d19a66;\">\"click\"<\/span>, <span style=\"color: #56b6c2;\">function<\/span> () {<br>\n        &nbsp;&nbsp;<span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">toggleClass<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);<br>\n        });\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Y luego, en CSS, t\u00fa defines qu\u00e9 significa \u201cabierto\u201d (por ejemplo, que el men\u00fa se vea). Esa separaci\u00f3n es sana: <strong>jQuery controla el comportamiento<\/strong> y <strong>CSS controla el aspecto<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-validacion-simple-de-un-formulario\">Validaci\u00f3n simple de un formulario<\/h3>\n\n\n\n<p>No es una validaci\u00f3n \u201cperfecta\u201d, pero s\u00ed un ejemplo real: evitar enviar si el campo est\u00e1 vac\u00edo.<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">validacion.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#formContacto\"<\/span>).<span style=\"color: #61afef;\">on<\/span>(<span style=\"color: #d19a66;\">\"submit\"<\/span>, <span style=\"color: #56b6c2;\">function<\/span> (<span style=\"color: #e5c07b;\">e<\/span>) {<br>\n        &nbsp;&nbsp;<span style=\"color: #e5c07b;\">var<\/span> nombre = <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#nombre\"<\/span>).<span style=\"color: #61afef;\">val<\/span>().<span style=\"color: #61afef;\">trim<\/span>();<br>\n        <br>\n        &nbsp;&nbsp;<span style=\"color: #c678dd;\">if<\/span> (!nombre) {<br>\n        &nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #e5c07b;\">e<\/span>.<span style=\"color: #61afef;\">preventDefault<\/span>(); <span style=\"color: #5c6370;\">\/\/ frena el env\u00edo<\/span><br>\n        &nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#error\"<\/span>).<span style=\"color: #61afef;\">text<\/span>(<span style=\"color: #d19a66;\">\"Escribe tu nombre para continuar.\"<\/span>).<span style=\"color: #61afef;\">show<\/span>();<br>\n        &nbsp;&nbsp;}<br>\n        });\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Esto mejora la experiencia porque el usuario entiende el problema al instante, sin esperar a que recargue la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-cambiar-atributos-tipicos\">Cambiar atributos t\u00edpicos<\/h3>\n\n\n\n<p>Otro caso real es cambiar el <code>src<\/code> de una imagen, o desactivar un bot\u00f3n.<\/p>\n\n\n\n<div style=\"background: #282c34; border-radius: 6px; padding: 15px; margin: 25px 0; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden;\">\n    <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; margin-right: 6px;\"><\/span>\n        <span style=\"width: 10px; height: 10px; border-radius: 50%; background: #27c93f;\"><\/span>\n        <span style=\"margin-left: 15px; color: #666; font-size: 0.8em; font-family: sans-serif;\">atributos.js<\/span>\n    <\/div>\n    <div style=\"margin-top: 20px; line-height: 1.5;\">\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#foto\"<\/span>).<span style=\"color: #61afef;\">attr<\/span>(<span style=\"color: #d19a66;\">\"src\"<\/span>, <span style=\"color: #d19a66;\">\"imagen-nueva.jpg\"<\/span>);<br>\n        <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#btnComprar\"<\/span>).<span style=\"color: #61afef;\">prop<\/span>(<span style=\"color: #d19a66;\">\"disabled\"<\/span>, <span style=\"color: #d19a66;\">true<\/span>);\n    <\/div>\n    <div style=\"position: absolute; top: 40px; right: 15px; color: #5c6370; cursor: pointer; font-size: 0.8em; font-family: sans-serif;\">Copiar<\/div>\n<\/div>\n\n\n\n<p>Esto se usa mucho para cosas como galer\u00edas, carruseles simples o botones que se desactivan mientras se procesa algo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-jquery-vs-javascript-puro\">jQuery vs JavaScript puro<\/h2>\n\n\n\n<p>Es normal que te hagas esta pregunta: si hoy JavaScript ha mejorado tanto, \u00bfpara qu\u00e9 usar jQuery? La respuesta real es que <strong>depende del proyecto<\/strong>. jQuery sigue siendo c\u00f3modo en webs ya hechas, pero en proyectos nuevos muchas cosas se resuelven bien con JavaScript nativo.<\/p>\n\n\n\n<p>Para verlo claro, nada mejor que comparar lo t\u00edpico.<\/p>\n\n\n\n<!-- BLOQUE: COMPARATIVA DE C\u00d3DIGO -->\n<div style=\"margin: 40px 0; font-family: sans-serif;\">\n    <p style=\"background-color: #333; color: white; padding: 10px 20px; border-radius: 8px 8px 0 0; margin: 0; font-weight: bold; text-align: center;\">\u2694\ufe0f La Batalla del C\u00f3digo: Ocultar un elemento<\/p>\n    <div style=\"display: flex; flex-wrap: wrap; border: 1px solid #ccc; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden;\">\n        \n        <!-- Columna jQuery -->\n        <div style=\"flex: 1; min-width: 300px; border-right: 1px solid #eee; background: #fafafa;\">\n            <div style=\"padding: 10px; background: #0769AD; color: white; text-align: center; font-size: 0.9em;\">Con jQuery<\/div>\n            <div style=\"padding: 20px; font-family: 'Courier New', monospace; color: #333;\">\n                <span style=\"color: #999;\">\/\/ Corto y legible<\/span><br><br>\n                <span style=\"color: #0769AD; font-weight: bold;\">$<\/span>(<span style=\"color: #a11;\">\"#aviso\"<\/span>).<span style=\"color: #d005b8;\">hide<\/span>();\n            <\/div>\n            <div style=\"padding: 15px; border-top: 1px solid #e0e0e0; font-size: 0.9em; color: #555; background: white;\">\n                \u2705 F\u00e1cil de leer y escribir.<br>\n                \u2705 Funciona igual en todos los navegadores.\n            <\/div>\n        <\/div>\n\n        <!-- Columna Vanilla JS -->\n        <div style=\"flex: 1; min-width: 300px; background: #fafafa;\">\n            <div style=\"padding: 10px; background: #f7df1e; color: #333; text-align: center; font-size: 0.9em; font-weight: bold;\">Con JavaScript Moderno<\/div>\n            <div style=\"padding: 20px; font-family: 'Courier New', monospace; color: #333;\">\n                <span style=\"color: #999;\">\/\/ M\u00e1s est\u00e1ndar<\/span><br><br>\n                <span style=\"color: #000080;\">document<\/span>.<span style=\"color: #d005b8;\">querySelector<\/span>(<span style=\"color: #a11;\">\"#aviso\"<\/span>).<span style=\"color: #000080;\">style<\/span>.display = <span style=\"color: #a11;\">\"none\"<\/span>;\n            <\/div>\n             <div style=\"padding: 15px; border-top: 1px solid #e0e0e0; font-size: 0.9em; color: #555; background: white;\">\n                \u2705 No necesitas cargar librer\u00edas externas.<br>\n                \u2705 Es el est\u00e1ndar actual de la web.\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-1-al-hacer-clic-cambiar-un-texto\">Ejemplo 1 al hacer clic cambiar un texto<\/h3>\n\n\n\n<div style=\"display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0; font-family: sans-serif; align-items: stretch;\">\n\n    <!-- Columna Izquierda: jQuery -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #4caf50; font-size: 1.1em;\">Con jQuery<\/span>\n            <span style=\"color: #777; font-size: 0.9em; margin-left: 10px;\">(M\u00e1s corto y directo)<\/span>\n        <\/div>\n        \n        <!-- Terminal jQuery -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.85rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 15px; line-height: 1.5;\">\n                <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#btn\"<\/span>).<span style=\"color: #61afef;\">on<\/span>(<span style=\"color: #d19a66;\">\"click\"<\/span>, <span style=\"color: #56b6c2;\">function<\/span> () {<br>\n                &nbsp;&nbsp;<span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#mensaje\"<\/span>).<span style=\"color: #61afef;\">text<\/span>(<span style=\"color: #d19a66;\">\"Perfecto, jQuery funciona.\"<\/span>);<br>\n                });\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Columna Derecha: JavaScript Puro -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #ff9800; font-size: 1.1em;\">Con JavaScript Puro<\/span>\n            <span style=\"color: #777; font-size: 0.9em; margin-left: 10px;\">(Est\u00e1ndar y moderno)<\/span>\n        <\/div>\n\n        <!-- Terminal JavaScript -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.85rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 15px; line-height: 1.5;\">\n                <span style=\"color: #e5c07b;\">document<\/span>.<span style=\"color: #61afef;\">querySelector<\/span>(<span style=\"color: #d19a66;\">\"#btn\"<\/span>).<span style=\"color: #61afef;\">addEventListener<\/span>(<span style=\"color: #d19a66;\">\"click\"<\/span>, <span style=\"color: #56b6c2;\">function<\/span> () {<br>\n                &nbsp;&nbsp;<span style=\"color: #e5c07b;\">document<\/span>.<span style=\"color: #61afef;\">querySelector<\/span>(<span style=\"color: #d19a66;\">\"#mensaje\"<\/span>).<span style=\"color: #61afef;\">textContent<\/span> = <span style=\"color: #d19a66;\">\"Perfecto, JavaScript funciona.\"<\/span>;<br>\n                });\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- Texto de cierre de la secci\u00f3n -->\n<div style=\"background: #fff8e1; border-left: 4px solid #ffc107; padding: 15px; margin-top: 10px; border-radius: 4px; font-size: 0.95em; color: #555;\">\n    \ud83d\udca1 <strong>Lo importante aqu\u00ed:<\/strong> No se trata de cu\u00e1l es \"mejor\", sino que entiendas la idea: seleccionas un elemento y reaccionas a un evento. jQuery te lo deja m\u00e1s compacto, JavaScript nativo ya no es tan inc\u00f3modo como antes.\n<\/div>\n\n\n\n<p>Si quieres entender bien qu\u00e9 es un evento (clics, formularios, teclado) y por qu\u00e9 tanto jQuery como JavaScript \u201creaccionan\u201d a ellos, esta gu\u00eda de MDN lo explica muy claro.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Learn_web_development\/Core\/Scripting\/Events\">Gu\u00eda de eventos en MDN<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-2-anadir-o-quitar-una-clase\">Ejemplo 2 a\u00f1adir o quitar una clase<\/h3>\n\n\n\n<div style=\"display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0; font-family: sans-serif; align-items: stretch;\">\n\n    <!-- Columna Izquierda: jQuery -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #4caf50; font-size: 1.1em;\">Con jQuery<\/span>\n        <\/div>\n        \n        <!-- Terminal jQuery -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 20px; line-height: 1.5;\">\n                <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">toggleClass<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Columna Derecha: JavaScript Puro -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #ff9800; font-size: 1.1em;\">Con JavaScript Puro<\/span>\n        <\/div>\n\n        <!-- Terminal JavaScript -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.9rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 20px; line-height: 1.5;\">\n                <span style=\"color: #e5c07b;\">document<\/span>.<span style=\"color: #61afef;\">querySelector<\/span>(<span style=\"color: #d19a66;\">\"#menu\"<\/span>).<span style=\"color: #61afef;\">classList<\/span>.<span style=\"color: #61afef;\">toggle<\/span>(<span style=\"color: #d19a66;\">\"abierto\"<\/span>);\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n\n<p>Aqu\u00ed se ve algo muy claro: para tareas peque\u00f1as como esta, JavaScript moderno ya te da un camino muy directo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-3-mostrar-u-ocultar-un-elemento\">Ejemplo 3 mostrar u ocultar un elemento<\/h3>\n\n\n\n<div style=\"display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0; font-family: sans-serif; align-items: stretch;\">\n\n    <!-- Columna Izquierda: jQuery -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #4caf50; font-size: 1.1em;\">Con jQuery<\/span>\n        <\/div>\n        \n        <!-- Terminal jQuery -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.85rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 15px; line-height: 1.5;\">\n                <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>).<span style=\"color: #61afef;\">hide<\/span>();<br>\n                <span style=\"color: #c678dd;\">$<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>).<span style=\"color: #61afef;\">show<\/span>();\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Columna Derecha: JavaScript Puro -->\n    <div style=\"flex: 1; min-width: 300px; display: flex; flex-direction: column;\">\n        <div style=\"margin-bottom: 10px;\">\n            <span style=\"font-weight: bold; color: #ff9800; font-size: 1.1em;\">Con JavaScript Puro<\/span>\n            <span style=\"color: #777; font-size: 0.9em; margin-left: 10px;\">(Modificando estilos)<\/span>\n        <\/div>\n\n        <!-- Terminal JavaScript -->\n        <div style=\"background: #282c34; border-radius: 6px; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; color: #abb2bf; font-size: 0.85rem; position: relative; overflow: hidden; flex-grow: 1; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n            <div style=\"position: absolute; top: 0; left: 0; right: 0; height: 25px; background: #21252b; border-bottom: 1px solid #181a1f; display: flex; align-items: center; padding-left: 10px;\">\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; margin-right: 5px;\"><\/span>\n                <span style=\"width: 8px; height: 8px; border-radius: 50%; background: #27c93f;\"><\/span>\n            <\/div>\n            <div style=\"margin-top: 15px; line-height: 1.5;\">\n                <span style=\"color: #e5c07b;\">const<\/span> aviso = <span style=\"color: #e5c07b;\">document<\/span>.<span style=\"color: #61afef;\">querySelector<\/span>(<span style=\"color: #d19a66;\">\"#aviso\"<\/span>);<br>\n                aviso.<span style=\"color: #abb2bf;\">style<\/span>.<span style=\"color: #abb2bf;\">display<\/span> = <span style=\"color: #d19a66;\">\"none\"<\/span>; <span style=\"color: #5c6370;\">\/\/ ocultar<\/span><br>\n                aviso.<span style=\"color: #abb2bf;\">style<\/span>.<span style=\"color: #abb2bf;\">display<\/span> = <span style=\"color: #d19a66;\">\"\"<\/span>; <span style=\"color: #5c6370;\">\/\/ mostrar<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- Texto de cierre de la secci\u00f3n -->\n<div style=\"background: #e8f5e9; border-left: 4px solid #4caf50; padding: 15px; margin-top: 10px; border-radius: 4px; font-size: 0.95em; color: #555;\">\n    \ud83d\udcdd <strong>Nota:<\/strong> En este caso, jQuery es m\u00e1s \u201cc\u00f3modo\u201d porque te da funciones ya hechas. En JavaScript puro puedes hacerlo, pero tienes que decidir c\u00f3mo lo ocultas (con <code>display<\/code>, con una clase CSS, etc.).\n<\/div>\n\n\n\n<div style=\"overflow-x: auto; margin: 30px 0; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);\">\n    <table style=\"width: 100%; border-collapse: collapse; font-family: sans-serif; min-width: 600px;\">\n        <thead>\n            <tr style=\"background: #2c3e50; color: white;\">\n                <th style=\"padding: 15px; text-align: left; font-weight: 600;\">Tarea<\/th>\n                <th style=\"padding: 15px; text-align: left; font-weight: 600; color: #4fc3f7;\">jQuery (El Atajo)<\/th>\n                <th style=\"padding: 15px; text-align: left; font-weight: 600; color: #ffca28;\">JavaScript Puro (Nativo)<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            <tr style=\"background: white; border-bottom: 1px solid #eee;\">\n                <td style=\"padding: 15px; font-weight: bold; color: #555;\">Ocultar elemento<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #f1f8e9; color: #333;\">$(\"#aviso\").hide();<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #fff3e0; color: #333;\">document.querySelector(\"#aviso\").style.display = \"none\";<\/td>\n            <\/tr>\n            <tr style=\"background: #fafafa; border-bottom: 1px solid #eee;\">\n                <td style=\"padding: 15px; font-weight: bold; color: #555;\">A\u00f1adir clase<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #f1f8e9; color: #333;\">$(\"#menu\").addClass(\"abierto\");<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #fff3e0; color: #333;\">document.querySelector(\"#menu\").classList.add(\"abierto\");<\/td>\n            <\/tr>\n            <tr style=\"background: white;\">\n                <td style=\"padding: 15px; font-weight: bold; color: #555;\">Evento Click<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #f1f8e9; color: #333;\">$(\"#btn\").on(\"click\", fn);<\/td>\n                <td style=\"padding: 15px; font-family: monospace; background: #fff3e0; color: #333;\">document.querySelector(\"#btn\").addEventListener(\"click\", fn);<\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n    <div style=\"background: #eceff1; padding: 10px 15px; font-size: 0.85em; color: #666; text-align: center;\">\n        \ud83d\udca1 <strong>Nota:<\/strong> JavaScript moderno ha mejorado mucho, pero jQuery sigue siendo m\u00e1s corto en muchos casos.\n    <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-entonces-cuando-conviene-usar-cada-uno\">Entonces cu\u00e1ndo conviene usar cada uno<\/h3>\n\n\n\n<p><strong>jQuery te conviene<\/strong> si:<\/p>\n\n\n\n<ul>\n<li>Est\u00e1s trabajando en una web existente que ya lo usa y no quieres mezclar estilos.<\/li>\n\n\n\n<li>El proyecto es antiguo y hay plugins o scripts que dependen de jQuery.<\/li>\n\n\n\n<li>Quieres hacer cambios r\u00e1pidos sin reescribir partes del c\u00f3digo.<\/li>\n<\/ul>\n\n\n\n<p><strong>JavaScript puro te conviene<\/strong> si:<\/p>\n\n\n\n<ul>\n<li>Est\u00e1s empezando un proyecto nuevo y quieres depender de menos cosas externas.<\/li>\n\n\n\n<li>Solo necesitas interacciones b\u00e1sicas (clics, clases, cambios de texto).<\/li>\n\n\n\n<li>Buscas rendimiento y simplicidad en la carga de la web.<\/li>\n<\/ul>\n\n\n\n<p>Una pregunta \u00fatil para decidir es esta: \u00bfvoy a usar jQuery de verdad o solo lo estoy a\u00f1adiendo para hacer dos cosas peque\u00f1as? Si es lo segundo, probablemente JavaScript nativo te vale. Si el proyecto ya est\u00e1 montado con jQuery, lo normal es seguir con jQuery para mantener coherencia y evitar l\u00edos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-por-que-jquery-sigue-siendo-importante-hoy\">Por qu\u00e9 jQuery sigue siendo importante hoy<\/h2>\n\n\n\n<p>Aunque hoy se hable mucho de <a href=\"https:\/\/www.loading.es\/blog\/frameworks-php-2025\/\">frameworks modernos<\/a>, la realidad es que internet est\u00e1 lleno de webs que no se han hecho ayer. Y ah\u00ed es donde jQuery sigue teniendo peso. No porque sea \u201clo \u00faltimo\u201d, sino porque <strong>est\u00e1 en muchos sitios donde vas a acabar trabajando<\/strong>, aunque sea para hacer un cambio peque\u00f1o.<\/p>\n\n\n\n<p>Piensa en jQuery como en una carretera antigua que sigue en uso. Puede que hoy existan autopistas nuevas, pero esa carretera conecta pueblos donde vive mucha gente. Con las webs pasa igual: hay proyectos que funcionan, generan negocio y no se van a rehacer desde cero solo por estar a la moda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-wordpress-y-proyectos-antiguos\">WordPress y proyectos antiguos<\/h3>\n\n\n\n<p>Si alguna vez has tocado WordPress, esto te sonar\u00e1. Durante a\u00f1os, muchos temas y plugins han usado jQuery para cosas como:<\/p>\n\n\n\n<ul>\n<li>Men\u00fas desplegables<\/li>\n\n\n\n<li>Popups y avisos de cookies<\/li>\n\n\n\n<li>Carruseles sencillos<\/li>\n\n\n\n<li>Validaci\u00f3n de formularios<\/li>\n\n\n\n<li>Efectos de mostrar y ocultar contenido<\/li>\n<\/ul>\n\n\n\n<p>Eso significa que, aunque t\u00fa no lo elijas, <strong>te lo puedes encontrar<\/strong>. Y cuando te lo encuentras, saber lo b\u00e1sico marca la diferencia entre \u201cno entiendo nada\u201d y \u201cvale, aqu\u00ed est\u00e1n escuchando un clic y cambiando una clase\u201d.<\/p>\n\n\n\n<p>Todo esto lo encontrar\u00e1s funcionando en el <strong><a href=\"https:\/\/www.loading.es\/hosting\/index.html\">hosting WordPress<\/a><\/strong> en el que tengas alojado tu proyecto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-mantenimiento-y-cambios-rapidos-en-webs-ya-hechas\">Mantenimiento y cambios r\u00e1pidos en webs ya hechas<\/h3>\n\n\n\n<p>En proyectos reales, muchas veces no te piden \u201crehacer una web\u201d. Te piden cosas como:<\/p>\n\n\n\n<ul>\n<li>\u201cEl bot\u00f3n no abre el men\u00fa en m\u00f3vil\u201d<\/li>\n\n\n\n<li>\u201cEste aviso deber\u00eda cerrarse\u201d<\/li>\n\n\n\n<li>\u201cEste formulario deber\u00eda mostrar un mensaje si falta un campo\u201d<\/li>\n\n\n\n<li>\u201cQueremos que este bloque se despliegue al pulsar\u201d<\/li>\n<\/ul>\n\n\n\n<p>En ese tipo de tareas, jQuery suele ser pr\u00e1ctico porque ya est\u00e1 instalado y el patr\u00f3n de trabajo es r\u00e1pido: seleccionas el elemento, enganchas el evento y cambias el DOM.<\/p>\n\n\n\n<p>Adem\u00e1s, cuando un <strong>proyecto ya usa jQuery<\/strong>, lo m\u00e1s sensato suele ser <strong>no mezclar demasiadas formas distintas<\/strong> de hacer lo mismo. Si el sitio est\u00e1 construido con jQuery, mantener esa coherencia hace que el c\u00f3digo sea m\u00e1s f\u00e1cil de entender para ti y para cualquiera que llegue despu\u00e9s.<\/p>\n\n\n\n<!-- BLOQUE: DIAGRAMA DE DECISI\u00d3N -->\n<div style=\"background: #fff; border: 2px solid #f0f0f0; border-radius: 12px; padding: 30px; margin: 40px 0; font-family: sans-serif;\">\n    <h3 style=\"margin-top: 0; text-align: center; color: #333;\">\ud83e\udd14 \u00bfDeber\u00eda usar jQuery en 2026?<\/h3>   \n    <div style=\"display: flex; flex-direction: column; gap: 15px;\">\n        \n        <!-- Caso 1 -->\n        <div style=\"display: flex; align-items: center; background: #f9f9f9; padding: 15px; border-radius: 8px; border-left: 5px solid #28a745;\">\n            <div style=\"font-size: 1.5em; margin-right: 15px;\">\ud83d\udcbb<\/div>\n            <div>\n                <strong style=\"color: #333;\">\u00bfTrabajas en una web antigua o WordPress?<\/strong>\n                <p style=\"margin: 5px 0 0 0; font-size: 0.9em; color: #555;\">Seguramente ya est\u00e1 cargado. <strong>\u00dasalo<\/strong>, no reinventes la rueda.<\/p>\n            <\/div>\n             <div style=\"margin-left: auto; background: #d4edda; color: #155724; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 0.8em;\">S\u00cd, \u00daSALO<\/div>\n        <\/div>\n\n        <!-- Caso 2 -->\n        <div style=\"display: flex; align-items: center; background: #f9f9f9; padding: 15px; border-radius: 8px; border-left: 5px solid #dc3545;\">\n            <div style=\"font-size: 1.5em; margin-right: 15px;\">\ud83d\ude80<\/div>\n            <div>\n                <strong style=\"color: #333;\">\u00bfEmpiezas un proyecto nuevo desde cero?<\/strong>\n                <p style=\"margin: 5px 0 0 0; font-size: 0.9em; color: #555;\">JavaScript moderno es muy potente hoy en d\u00eda.<\/p>\n            <\/div>\n             <div style=\"margin-left: auto; background: #f8d7da; color: #721c24; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 0.8em;\">MEJOR NATIVO<\/div>\n        <\/div>\n\n        <!-- Caso 3 -->\n        <div style=\"display: flex; align-items: center; background: #f9f9f9; padding: 15px; border-radius: 8px; border-left: 5px solid #ffc107;\">\n            <div style=\"font-size: 1.5em; margin-right: 15px;\">\ud83c\udf93<\/div>\n            <div>\n                <strong style=\"color: #333;\">\u00bfEst\u00e1s aprendiendo a programar?<\/strong>\n                <p style=\"margin: 5px 0 0 0; font-size: 0.9em; color: #555;\">Aprende primero lo b\u00e1sico, luego mira JS nativo.<\/p>\n            <\/div>\n             <div style=\"margin-left: auto; background: #fff3cd; color: #856404; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 0.8em;\">SABER NO OCUPA LUGAR<\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Ahora ya tienes claro <strong>qu\u00e9 es jQuery<\/strong> y <strong>para qu\u00e9 sirve<\/strong>. Es una librer\u00eda de JavaScript que facilita tareas muy comunes en una web, como <strong>seleccionar elementos<\/strong>, <strong>responder a clics<\/strong>, <strong>cambiar el contenido<\/strong> o <strong>mostrar y ocultar bloques<\/strong> sin tener que escribir tanto c\u00f3digo.<\/p>\n\n\n\n<p>Tambi\u00e9n has visto la parte importante: hoy <strong>JavaScript nativo<\/strong> es m\u00e1s potente y c\u00f3modo, as\u00ed que jQuery no siempre es la primera opci\u00f3n en proyectos nuevos. Aun as\u00ed, jQuery sigue siendo relevante porque <strong>vive en miles de webs reales<\/strong>, sobre todo en proyectos antiguos, plantillas y entornos como WordPress. Y cuando tienes que hacer cambios r\u00e1pidos o mantener un sitio ya montado, <strong>entender jQuery te da ventaja<\/strong>.<\/p>\n\n\n\n<p>Si est\u00e1s empezando, qu\u00e9date con esta idea pr\u00e1ctica: <strong>aprende lo b\u00e1sico de jQuery<\/strong> para no perderte cuando te lo encuentres, y a la vez ve cogiendo soltura con JavaScript moderno. Es como aprender a conducir en ciudad y en carretera. <strong>No siempre vas a usar lo mismo<\/strong>, pero saber las dos cosas te hace m\u00e1s flexible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-preguntas-frecuentes-sobre-jquery\">Preguntas Frecuentes sobre jQuery (FAQ)<\/h2>\n\n\n\n<!-- BLOQUE: PREGUNTAS FRECUENTES (FAQ) -->\n\n        <!-- Pregunta 1 -->\n    <details style=\"border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;\">\n        <summary style=\"font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none;\">\n            <span>\u00bfEs gratis usar jQuery en mi web?<\/span>\n            <span style=\"font-size: 1.5em; line-height: 0; color: #0769AD; margin-left: 10px;\">+<\/span>\n        <\/summary>\n        <div style=\"margin-top: 15px; color: inherit; opacity: 0.9; line-height: 1.6;\">\n            S\u00ed, totalmente. jQuery es software de c\u00f3digo abierto (Open Source) bajo la licencia MIT. Puedes usarlo gratis tanto en proyectos personales como en sitios web comerciales sin pagar nada.\n        <\/div>\n    <\/details>\n\n    <!-- Pregunta 2 -->\n    <details style=\"border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;\">\n        <summary style=\"font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none;\">\n            <span>\u00bfjQuery hace que mi web cargue m\u00e1s lenta?<\/span>\n            <span style=\"font-size: 1.5em; line-height: 0; color: #0769AD; margin-left: 10px;\">+<\/span>\n        <\/summary>\n        <div style=\"margin-top: 15px; color: inherit; opacity: 0.9; line-height: 1.6;\">\n            Depende. La librer\u00eda pesa muy poco (alrededor de 30kb comprimida), por lo que en la mayor\u00eda de webs la diferencia es imperceptible. Sin embargo, si solo necesitas hacer una cosa muy simple (como abrir un men\u00fa), usar JavaScript nativo es m\u00e1s ligero porque no requiere cargar ning\u00fan archivo extra.\n        <\/div>\n    <\/details>\n\n    <!-- Pregunta 3 -->\n    <details style=\"border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;\">\n        <summary style=\"font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none;\">\n            <span>\u00bfPuedo usar jQuery junto con React o Vue?<\/span>\n            <span style=\"font-size: 1.5em; line-height: 0; color: #0769AD; margin-left: 10px;\">+<\/span>\n        <\/summary>\n        <div style=\"margin-top: 15px; color: inherit; opacity: 0.9; line-height: 1.6;\">\n            T\u00e9cnicamente s\u00ed, pero <strong>no se recomienda<\/strong>. React y Vue gestionan el DOM (la estructura de la web) de una forma muy espec\u00edfica. Si usas jQuery para modificar cosas por tu cuenta, puedes romper la aplicaci\u00f3n. En esos entornos modernos, es mejor no usar jQuery.\n        <\/div>\n    <\/details>\n\n    <!-- Pregunta 4 -->\n    <details style=\"border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;\">\n        <summary style=\"font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none;\">\n            <span>\u00bfCu\u00e1l es la diferencia entre jQuery y AJAX?<\/span>\n            <span style=\"font-size: 1.5em; line-height: 0; color: #0769AD; margin-left: 10px;\">+<\/span>\n        <\/summary>\n        <div style=\"margin-top: 15px; color: inherit; opacity: 0.9; line-height: 1.6;\">\n            Es una confusi\u00f3n com\u00fan. <strong>AJAX<\/strong> es la t\u00e9cnica para cargar datos sin recargar la p\u00e1gina. <strong>jQuery<\/strong> es la herramienta que hace que usar AJAX sea muy f\u00e1cil. No son rivales; jQuery contiene funciones para hacer AJAX.\n        <\/div>\n    <\/details>\n\n    <!-- Pregunta 5 -->\n    <details style=\"border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;\">\n        <summary style=\"font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none;\">\n            <span>\u00bfC\u00f3mo s\u00e9 si una web est\u00e1 usando jQuery?<\/span>\n            <span style=\"font-size: 1.5em; line-height: 0; color: #0769AD; margin-left: 10px;\">+<\/span>\n        <\/summary>\n        <div style=\"margin-top: 15px; color: inherit; opacity: 0.9; line-height: 1.6;\">\n            La forma m\u00e1s r\u00e1pida es abrir la consola del navegador (F12), ir a la pesta\u00f1a \"Console\" y escribir el s\u00edmbolo <code>$<\/code> o <code>jQuery<\/code>. Si no sale un error y ves una funci\u00f3n como respuesta, la web lo tiene instalado.\n        <\/div>\n    <\/details>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"wQ1JLQjHfy\"><a href=\"https:\/\/www.loading.es\/blog\/a-href-enlaces-web\/\">A href: C\u00f3mo Incluir Enlaces en tu Web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abA href: C\u00f3mo Incluir Enlaces en tu Web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/a-href-enlaces-web\/embed\/#?secret=mVVw47u8zC#?secret=wQ1JLQjHfy\" data-secret=\"wQ1JLQjHfy\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ZNvAH42LgU\"><a href=\"https:\/\/www.loading.es\/blog\/como-disenar-pagina-inicio-perfecta\/\">C\u00f3mo dise\u00f1ar una p\u00e1gina de inicio perfecta para tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo dise\u00f1ar una p\u00e1gina de inicio perfecta para tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/como-disenar-pagina-inicio-perfecta\/embed\/#?secret=T5f8wApWS5#?secret=ZNvAH42LgU\" data-secret=\"ZNvAH42LgU\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"vdsS63WWaD\"><a href=\"https:\/\/www.loading.es\/blog\/alternativas-wix\/\">Alternativas a Wix para crear tu web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abAlternativas a Wix para crear tu web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/alternativas-wix\/embed\/#?secret=1lPfItPPlp#?secret=vdsS63WWaD\" data-secret=\"vdsS63WWaD\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfEs gratis usar jQuery en mi web?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"S\u00ed, totalmente. jQuery es software de c\u00f3digo abierto (Open Source) bajo la licencia MIT. Puedes usarlo gratis tanto en proyectos personales como en sitios web comerciales sin pagar nada.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfjQuery hace que mi web cargue m\u00e1s lenta?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Depende. La librer\u00eda pesa muy poco (alrededor de 30kb comprimida), por lo que en la mayor\u00eda de webs la diferencia es imperceptible. Sin embargo, si solo necesitas hacer una cosa muy simple (como abrir un men\u00fa), usar JavaScript nativo es m\u00e1s ligero porque no requiere cargar ning\u00fan archivo extra.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfPuedo usar jQuery junto con React o Vue?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"T\u00e9cnicamente s\u00ed, pero no se recomienda. React y Vue gestionan el DOM (la estructura de la web) de una forma muy espec\u00edfica. Si usas jQuery para modificar cosas por tu cuenta, puedes romper la aplicaci\u00f3n. En esos entornos modernos, es mejor no usar jQuery.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfCu\u00e1l es la diferencia entre jQuery y AJAX?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Es una confusi\u00f3n com\u00fan. AJAX es la t\u00e9cnica para cargar datos sin recargar la p\u00e1gina. jQuery es la herramienta que hace que usar AJAX sea muy f\u00e1cil. No son rivales; jQuery contiene funciones para hacer AJAX.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfC\u00f3mo s\u00e9 si una web est\u00e1 usando jQuery?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"La forma m\u00e1s r\u00e1pida es abrir la consola del navegador (F12), ir a la pesta\u00f1a 'Console' y escribir el s\u00edmbolo $ o jQuery. Si no sale un error y ves una funci\u00f3n como respuesta, la web lo tiene instalado.\"\n      }\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Si has llegado aqu\u00ed buscando qu\u00e9 es jQuery y para qu\u00e9 sirve, est\u00e1s en el sitio correcto. jQuery es una librer\u00eda de JavaScript que se cre\u00f3 para hacer m\u00e1s f\u00e1cil lo t\u00edpico en una web: seleccionar elementos, reaccionar a clics y cambiar cosas en pantalla sin volverte loco con c\u00f3digo largo.<\/p>\n<p>\u00bfTe ha pasado que quieres que un bot\u00f3n abra un men\u00fa, que aparezca un mensaje o que un formulario avise si falta un campo? jQuery es como una caja de herramientas que te deja hacer eso con menos esfuerzo y con una forma de escribir bastante clara.<\/p>\n","protected":false},"author":2,"featured_media":11334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[229],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11332"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=11332"}],"version-history":[{"count":5,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11332\/revisions"}],"predecessor-version":[{"id":11349,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/11332\/revisions\/11349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/11334"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=11332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=11332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=11332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}