Introducción a JQuery

jQuery es una de las librerías de JavaScript más utilizadas en la web a pesar de que casi cada día salen nuevos frameworks modernísimos con un montón de fantásticas características.

Entonces ¿por qué no usar alguno de estos maravillosos frameworks en lugar del viejuno jQuery?

Por un lado jQuery tiene una gran trayectoria, se usa en un montón de proyectos y es un producto muy maduro. También tiene una gran comunidad de gente detrás, miles de artículos de ayuda, y un montón de plugins para añadir nuevas funciones.

Por otro lado jQuery se puede usar como complemento a alguno de esos frameworks. Podemos usar, por ejemplo, solo la aprte de Ajax o las animaciones.

También debes tener en cuenta que muchos de estos frameworks se ponen de moda, se habla mucho sobre ellos y, casi de la noche a la mañana, desaparecen y son sustituidos por otro que es aún más fantástico.

¿Qué versión de jQuery debo usar?

Siempre es recomendable usar la última versión de jQuery. Sin embargo debes tener en cuenta que, desde la versión 2.0, las nuevas versiones pueden no funcionar en navegadores más viejos como Internet Explorer 6, 7 y 8, Opera 12.1x y Safari 5.1+. Si en tu proyecto tienes que dar soporte a estos navegadores quédate con la versión 1.12.

¿Cómo se usa jQuery?

Para usar jQuery basta con añadir un enlace a la versión jQuery que queramos usar. En este ejemplo estaríamos usando la versión 1.12.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-1.12.min.js"></script>        
    </body>
</html>

Se recomienda poner el enlace a jQuery dentro del cuerpo del documento HTML en lugar de en las etiquetas <head>.

En el ejemplo he usado el CDN que jQuery nos ofrece (https://code.jquery.com), pero podemos usar una propia copia en nuestro propio servidor. En el capítulo sobre recomendaciones comentaré algo más sobre este tema.

El primer ejemplo

Para publicar los ejemplos de esta serie voy a usar jsbin.com, que es una web que está muy bien para compartir código JavaScript.

Este primer ejemplo puedes encontrarlo en:

http://jsbin.com/luhucusonu/edit?html,js,console,output
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
    </head>
    <body>
        
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script>
        $( document ).ready(function() {
    console.log( "En marcha!" );
});
      </script>
      
    </body>
</html>

NOTA: El fichero jquery.js (sea la versión que sea) no deberías modificarlo nunca. Usa un fichero aparte para tu aplicación o incrusta el código JavaScript dentro del cuerpo del documento (como en este primer ejemplo).

Verás en muchas ocasiones que el código jQuery va dentro del bloque:

$( document ).ready(function() {
    // Bloque de código
});

La función $(document).ready() se usa para esperar a que todos los elementos del documento (o la página web) estén cargados. Podría suceder que la página no estuviese cargada del todo cuando se ejecutase el código JavaScript y si intentamos acceder, por ejemplo, a un div éste todavía no esté cargado en la página.

Usando $(document).ready() no tendremos este problema. De todos modos, ahora se tiende a colocar el código JavaScript justo antes de la etiqueta </body> y no suele ser necesario usar esta función.

NOTA: Si necesitas esperar a que se carguen todos los elementos de la página (scripts e imágenes) usa $(document).load() en lugar de $(document).ready().

$(document).ready() llamando a una función

La función que se encarga de esperar a que esté cargado el documento es:

$(document).ready()

A esta función le pasamos un parámetro que, en el ejemplo anterior, era una función anónima (una función sin nombre):

function() {
}
Pero también podemos usar una función “normal”:
<script>
function configurar() {
      console.log( "En marcha!" );
}
        
$(document).ready( configurar );
</script>

El DOM

Son las siglas de Document Object Model. Cuando se habla del DOM nos referimos a la estructura de un documento que puede ser HTML, XHTML o XML. JavaScript accede al documento a través del DOM.

Un elemento DOM es cada uno de los elementos del documento, por ejemplo una etiqueta DIV, una etiqueta A, el cuerpo del documento (etiqueta BODY), etc.

Así que ya sabes, si quieres parecer un experto no digas “seleccionamos un elemento de la página”. Mejor dí: “seleccionamos un elemento del DOM”.

La consola de mensajes

Si no conoces la consola de mensajes esto va a cambiar tu vida. Ya no es necesario que hagas un alert() cada vez que quieras ver el valor de un elemento o variable. Hoy en día todos los navegadores incluyen una consola a la que podemos lanzar mensajes. Es lo que he hecho en el ejemplo anterior con:

console.log("En marcha!");

La consola del navegador suele estar oculta. Para mostrarla deberás abrirla. Esto dependerá del navegador que uses. Por ejemplo en Firefox se puede abrir con CTRL+MAY+k. También podemos instalar alguna extensión estilo Web Developer Tools.

Seleccionar un elemento del DOM

En un próximo capítulo vamos a ver en más detalle las posibilidades que tenemos para seleccionar elementos del DOM. Por ahora vamos a ver cómo seleccionar un DIV con ID. Para seleccionar un elemento basta con usar la función $() de jQuery. Por ejemplo, para seleccionar un elemento cuyo ID sea saludo hacemos:

$(“#saludo”);

Debemos poner el # delante del ID del elemento. El nombre del elemento (con el #) deber ir dentro de comillas (dobles o sencillas).

En un ejemplo completo quedaría así (cuando se cargue la página el elemento #saludo se ocultará quedando la página en blando gracias a la función hide()):

    <body>
      <div id="saludo">Hola!</div>
        
      <script>        
        $(document).ready( function() {
          console.log( $("#saludo").hide() );
        } );
      </script>
    </body>

Esta ha sido una pequeña introducción para ir abriendo boca. En los próximos capítulos vamos a ver las distintas posibilidades para seleccionar elementos, cómo manipular y trabajar con estos elementos y algunos consejos sobre buenas prácticas en jQuery.

Autor:
Nivel: Principiante
Palabras clave:
Fecha publicado:
Fecha actualizado: 16-09-2016

Otros capítulos de la misma serie

Este capítulo es parte de la serie: JQuery.

Y muchos más en preparación.

Disponible en los planes: Laravel hero PHP a tope