Llegamos al final de esta terna de artículos destinados a conocer un poco más como manipular el DOM. Primero aprendimos a cómo usar selectores básicos, luego a usar estos selectores con JavaScript para acceder a elementos del DOM, y ahora, para finalizar, vamos a ver otra forma de realizar estas acciones utilizando jQuery.

¿Qué es jQuery?

JavaScript nos brinda una librería que se llama jQuery, la cual se enfoca en simplificarnos la interacción con el DOM (Document Objet Model) y facilitar el uso de JS en nuestras aplicaciones web. Hoy en día, estas aplicaciones evolucionan rápidamente y cada vez son más complejas, desarrollarlas nos puede llevar mucho tiempo y utilizar este tipo de librerías nos ahorra no solo tiempo, sino también dinero. Por ejemplo, con frecuencia un desarrollador se encuentra con una tarea que tuvo que enfrentar otro desarrollador, y es en este tipo de tareas comunes en donde se enfoco jQuery, brindándonos distintos métodos que podemos ejecutar con una sola y simple línea, en vez de escribir muchas líneas de código. 

¿Como funciona?

jQuery posee la siguiente sintaxis, "$('selector').metodo()", donde el signo $ hace referencia a jQuery, el selector determinara el o los elementos que queremos seleccionar, y el método será la acción que jQuery realizara sobre nuestros elementos. Para poder empezar a utilizarlo, debemos incluirlo en nuestro proyecto de la siguiente manera.

< script src="/assets/libs/jquery-3.min.js" charset="utf-8">< /script>

Y tomaremos el siguiente código html como plantilla de ejemplo para ejemplificar algunas de las funciones a lo largo del articulo 

< body>    
    < h1 class="titulo" id="id-titulo">Titulo: jQuery y DOM< /h1>
    < h2 class="descripcion" id="id-descripcion">Descripcion: Practica< /h2>
    < p class="contenido" id="id-contenido">Contenido: Algunos metodos< /p>
    < form id="id-form">
      < legend class="listado" id="id-listado">Listado< /legend>
      < ul class="contenido">
        < li>Primero< /li>
        < li>Segundo< /li>
        < li>Tercero< /li>      
      < /ul>
    < /form>
    < button type="text" id="id-boton">Enviar< /button>
< /body> 

Esta librería soporta gran parte de los selectores CSS3, los cuales vimos con anterioridad en un articulo sobre selectores básicos y nos van a ser de mucha ayuda. Vamos a ver a continuación, algunos de los métodos mas comunmente utilizados por los desarrolladores cuando queremos seleccionar un elemento, que suele ser por su id ( '#id' ), por su clase ( '.clase' ) o por su nombre de etiqueta html ( 'elem' ). 

• $('li')  -> Selecciona todos los elementos li del documento mediante el nombre del elemento.
• $('#id-contenido') -> Selecciona el unico elemento cuyo valir de id sea id-contenido.
• $('.descripcion') -> Selecciona todos los elementos que tengan la clase descripcion

Entonces, ahora podemos utilizar cualquiera de estas tres sintaxis para comenzar nuestra declaracion del metodo jQuery. Vamos a ver algunos ejemplos.

El metodo .text() nos puede devolver el contenido del elemento asi como tambien establecerle uno enviandole en sus parametros el texto que queramos. 

• $('#id-titulo').text(); -> Nos devolvera como resultado "Titulo: jQuery y DOM"
• $('#id-titulo').text("Modificando el titulo"); -> Establece un nuevo contenido al titulo enviado por los parametros.

El metodo .length() nos devuelve la cantidad de elementos que existen en el documento y el metodo .hide() oculta elementos.

• $('li').length(); -> Nos devolvera el valor 3 ya que existen 3 elementos li en el documento.
• $('.listado').hide(); -> Ocultara el elemento que posee la clase listado, en este caso es el elemento legend.

Con el metodo .addClass() podemos agregar una clase a uno o mas elementos mientras que con el metodo .removeClass() podemos eliminar una clase de uno o mas elementos del documento.

• $('.descripcion').addClass('otra-clase'); -> Le agregara la clase "otra-clase" a todos los elementos que tengan la clase descripcion.
• $('#id-titulo').removeClass('.titulo'); -> Le eliminara la clase titulo al elemento que tiene tenga id-titulo como su id.

Con el metodo .attr() podemos agregar un atributo a uno o mas elementos del documento, mientras que con .removeAttr() se lo podemos eliminar.

• $('ul').attr('id','id-contenido'); -> Le agregara el atributo id con el valor id-contenido a todos los elementos ul. 
• $('#id-boton').removeAttr('type'); -> Eliminara el atributo type del boton.

Con los metodos .insertBefore() y .insertAfter() podemos insertar codigo antes o despues de uno o mas elementos respectivamente.

• $('<p>Antes</p>').insertBefore($('form')); -> Insertara inmediatamente antes de cada elemento form un elemento p con el contenido Antes.
• $('<p>Despues</p>').insertAfter($('form')); -> Insertara inmediatamente despues de cada elemento form un elemento p con el contenido Despues.

Con el metodo .remove() es posible eliminar el contenido que se desee, y existen tambien otros metodos con algunas diferencias como el .detach() y el .empty() es posible eliminar contenido del documento.

• $('.descripcion').remove(); -> Eliminara todos los elementos que tengan la clase descriocion.

Tambien es posible tanto establecer como consultar que estilos posee un elemento con los metodos .css(), .heigth(), .width(), y de forma similar con los metodos outerHeight(), y outerWidth().

• $('form').css("background-color","blue"); -> Le establecera a todos los elementos form, un fondo azul.
• $('.titulo').heigth(); -> Retornara como valor la altura del elemento que tiene la clase titulo.
• $('.titulo').width(); -> Retornara como valor el ancho del elemento que tiene la clase titulo.
• $('#id-titulo').css('font-size'); -> Retornara el valor del tamaño de la fuente del elemento cuyo id es id-titulo.

Muchas gracias por tomarte el tiempo de leer este artículo, y si bien existen una gran cantidad de métodos más que no veremos en éste, espero que te hayan sido de utilidad a la hora de encarar tu proyecto.