jQuery: tutorial sobre selectores, sintaxis y mucho más

jQuery es una biblioteca de JavaScript desarrollada en 2006 por el informático John Resig y publicada bajo la licencia gratuita MIT (Massachusetts Institute of Technology). Esta biblioteca ofrece numerosas opciones para la manipulación de HTML y de CSS, para controlar eventos o para agilizar funcionalidades de AJAX. Estas pueden utilizarse de manera sencilla integrando jQuery en el código fuente HTML del proyecto web y controlándolo con ayuda de determinadas funciones. jQuery ya forma parte de muchos frameworks para aplicaciones web y de sistemas de gestión de contenidos como Joomla!, WordPress o MediaWiki y no solo destaca por su enorme funcionalidad, sino también por la gran comunidad y su continuo desarrollo, que son responsabilidad del equipo de jQuery.

¿Qué hay detrás de jQuery? Una introducción a las posibilidades de la biblioteca

jQuery facilita considerablemente la programación con JavaScript, el lenguaje dinámico de scripts. Toda la biblioteca jQuery consta de un único archivo JavaScript que contiene las funciones básicas DOM, AJAX, de eventos y de efectos. Con ello, la biblioteca presenta una amplia compilación de secciones de programas con cuya ayuda se pueden editar los elementos de los proyectos web. De esta manera, puedes elegir objetos, por ejemplo, y modificar su aspecto (color, posición, etc.), algo que en principio también es posible con JavaScript, aunque resulta algo más complejo llevarlo a cabo.

Además, con jQuery también puedes responder a las acciones de tus usuarios gracias a la programación controlada de los elementos de la página web. Los usuarios pueden suscitar acciones previamente definidas por medio del puntero del ratón o de la introducción de texto y reciben los contenidos o animaciones correspondientes. Los efectos gráficos, como los que tienen que ver con añadir textos, etc., se llevan a cabo rápidamente y tan solo insertando una única línea de código, de modo que jQuery facilita el trabajo con AJAX. La biblioteca optimiza la tecnología que recarga los contenidos actuales en un segundo plano, sobre todo porque ostenta una interfaz independiente de navegador. Con su ayuda, la técnica AJAX puede utilizarse y configurarse para todo tipo de navegadores y es incluso compatible con versiones de navegadores antiguas. En general, jQuery llena los diversos vacíos que hay entre las diferentes implementaciones de JavaScript de cada uno de los navegadores.             

Cómo ampliar la estructura de jQuery con plugins

El motivo de que jQuery sea una opción interesante para los proyectos web actuales reside principalmente en la sencilla capacidad de ampliación de esta biblioteca de JavaScript. Los miles de plugins que simplifican su programación y que convierten a jQuery en una biblioteca todavía más poderosa se pueden descargar, en su mayoría de manera gratuita, desde la página web oficial de jQuery. En este sentido, tanto su gran extensión como su amplia comunidad son muy importantes, puesto que tienen un papel decisivo en el desarrollo de dichas extensiones. Si la función deseada no está incluida en la versión estándar y tampoco está disponible como plugin, los desarrolladores con experiencia pueden intentar crear su propia extensión.

¿Cómo se integra la biblioteca de JavaScript?

Para poder usar jQuery en tu proyecto, el primer paso es integrar la biblioteca. A este respecto, tienes la posibilidad de alojar el archivo JavaScript en tu propio espacio web o bien establecer un enlace en un espacio web externo. Si optas por la primera opción, puedes descargar el archivo desde el centro de descargas de la página web de jQuery. En dicha página tienes la posibilidad de elegir la versión comprimida para las aplicaciones en vivo (compressed, production jQuery) y la edición no comprimida para desarrolladores (uncompressed, development jQuery). Para guardar localmente el archivo correspondiente, con el botón derecho del ratón haz clic en el enlace, elige “Guardar destino como” e introduce el destino deseado. Para terminar, escribe el enlace correspondiente en la etiqueta <head> de tu página web:  

<head>
    <script type="text/javascript" src="pfad_a_archivo_ jquery /jquery.js"></script>
</head>

Si, por el contrario, te decides por instalar el archivo de manera externa, debes adaptar la referencia en el header. Para poder utilizar el arhivo jQuery del servicio Google Hosted Libraries, introduce la siguiente dirección incluida la versión correspondiente como elemento fuente (src) en el siguiente enlace 3.0.0:

http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js

Así se construye la sintaxis de jQuery

Con el código jQuery puedes acceder a los elementos HTML de tu proyecto web. Puedes seleccionar estos elementos por medio de un selector orientado sintácticamente a selectores CSS. A esto le sigue, generalmente, una acción que describe de qué manera se debe modificar el elemento seleccionado. El símbolo del dólar ($) se antepone al selector y a la acción para distinguir el código como función jQuery. Esto ocurre para evitar confusiones cuando se utilizan diferentes bibliotecas. El símbolo $() actúa como abreviatura para la función de jQuery (). La sintaxis básica tiene la siguiente apariencia:

$(Selector).Acción()

Una línea de código esencial que debe incorporar cualquier descripción de jQuery en su documento HTML es el evento document ready. Este código garantiza que todos los comandos que contiene se ejecutarán después de que todos los elementos HTML se hayan cargado. Por una parte, se evitarán los mensajes de error cuando, por ejemplo, haya que ocultar algún elemento que todavía no se haya mostrado. Por otra, el evento document ready ofrece la posibilidad de insertar el código en la etiqueta <head>. A la estructura sintáctica de la línea de código mencionada le corresponde el siguiente patrón:

<script type="text/javascript">
    $(document).ready(function(){
        //código jQuery adicional
    });
</script>

Los selectores más importantes

Los selectores de jQuery son los componentes más importantes de la biblioteca de JavaScript y con ellos puedes adaptar los elementos más diversos de tu página web. Además, hay diferentes tipos de selectores que permiten encontrar y seleccionar unidades HTML en función de criterios como identificador, clase, tipo, etc. El selector element, utilizado con frecuencia, se encarga de clasificar cada acción en los elementos HTML a partir de su nombre. De esta manera, el siguiente código jQuery te permite, por ejemplo, definir que se oculten todos los elementos <p>, es decir, todos los bloques de texto, cuando el visitante de la página web haga clic en un botón:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });
</script>

Otro de los selectores importantes de jQuery es #id. Con él puedes destacar un único elemento en el documento HTML, que después y, por ejemplo, con JavaScript podrá modificarse tal y como se llevan a cabo las manipulaciones en CSS. En caso de que no se oculten todos los bloques de texto cuando el usuario haga clic en un botón, sino que solo ataña a uno en concreto, deberás insertar un valor id para este elemento <p> ((<p id="testblock">) y añadir el selector element en el ejemplo de código anterior por medio del selector #id:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#testblock").hide();
        });
    });
</script>

Un tercer selector sencillo es .class, que selecciona clases predefinidas y que se implementa también según el conocido método. Otros de los selectores más útiles son:

Selector Descripción
$("*") Selecciona todos los elementos
$(this) Selecciona el elemento actual
$("p:first") Selecciona el primer elemento <p>
$("ul li:first-child") Selecciona los primeros elementos de lista <li> de todas las listas <ul> existentes
$("[href]") Selecciona todos los elementos que contengan un atributo href
$("tr:even") Selecciona todas las líneas de tabla pares
$("tr:odd") Selecciona todas las líneas de tabla impares
$("p.intro") Selecciona todos los elementos <p> con la clase class="intro"

Posibilidad de responder a las acciones de los usuarios con jQuery

Los usuarios que visitan tu página o tu aplicación web interactúan de muchas maneras con tu proyecto, ya sea por medio de un clic de ratón, de una entrada de teclado, rellenando un formulario o agrandando una ventana. Estas acciones son también conocidas como eventos DOM y pueden definirse en jQuery como elementos desencadenantes de acciones.

Por ejemplo, puedes utilizar el movimiento del puntero del ratón como elemento desencadenante de una acción, lo que tendría lugar por medio de mouseenter() o mouseleave(). La primera función reacciona cuando el usuario desplaza el cursor del ratón sobre el elemento HTML seleccionado. La segunda, por su parte, entra en acción cuando el cursor del ratón se aleja del elemento. El siguiente código jQuery muestra al usuario una ventana de diálogo informativa cuando este señala con el puntero del ratón un bloque de texto: 

<script type="text/javascript">
    $(document).ready(function(){
        $("p").mouseenter(function(){
            alert("Has seleccionado un bloque de texto");
        });
    });
</script>

Otros elementos desencadenantes importantes son:

Elementos desencadenantes Descripción
focus() Se acciona al centrarse en un elemento (por clic de ratón o etiqueta)
blur() Se acciona al dejar de centrarse en un elemento
keydown() Se acciona cuando se mantiene una tecla pulsada
keyup() Se acciona cuando se suelta una tecla
change() Se acciona cuando tiene lugar una entrada de teclado o cuando se hace una selección
scroll() Se acciona cuando uno se desplaza por el elemento seleccionado
select() Se acciona cuando se marca un texto en el campo del formulario

Con ayuda de on() podrás, además, añadir más de un elemento desencadenante a un elemento seleccionado y combinar, así, diferentes acciones de manera sencilla. Con el siguiente código jQuery puedes hacer, por ejemplo, que el color de fondo de los elementos <p> varíe tanto cuando los usuarios lo seleccionen (blue), como cuando estos vuelvan a elegirlo (red) o a hacer clic en él (yellow): 

<script type="text/javascript">
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "blue");
         }, 
        mouseleave: function(){
             $(this).css("background-color", "red");
        }, 
        click: function(){
            $(this).css("background-color", "yellow");
        } 
    }); 
</script>

Para obtener información más detallada sobre la paleta de funciones de la biblioteca de JavaScript en su totalidad en combinación con la tecnología AJAX, es recomendable recurrir al manual de jQuery en inglés en w3schools.com, que pone a disposición una gran cantidad de ejemplos del código de la biblioteca de JavaScript. Hasta el momento jQuery no está disponible en español.        

¿Le ha resultado útil este artículo?