Como sabemos el eslogan de jQuery es “Escribe menos, haz más”. Hay métodos muy usadas y básicas de jQuery para que todo desarrollador debe conocer.

Son métodos que parte del selector principal $([Selector]).

Métodos de manipulación del DOM:

  • .append(html) : agrega elementos HTML al final de un elemento hijo del selector.
  • .prepend(html) : agrega elementos HTML al comienzo de un elemento hijo del selector.
  • .siblings() : selecciona lo elementos hermanos del selector.
  • .children() : selecciona los elementos hijos del selector.
  • .before(html) : agrega elementos al comienzo fuera y a nivel del selector.
  • .after(html) : agrega elementos al final fuera y a nivel del selector.
  • .appendTo(selector) : mueve un elemento después del SELECTOR que se le pasa como argumento.
  • .html(html) : recupera o asigna un elemento HTML al selector.
  • .text(texto) : recupera o asigna un TEXTO al selector.
  • .eq(posición) : recupera el elemento en la posición de un array o objeto manteniendo como un objeto jQuery lo devuelto.
  • .css([propiedad, valor]) : recupera o asigna una propiedad CSS al selector.
  • .attr([atributo, valor]) : recupera o asigna un atributo html al selector.
  • .addClass(nombreClase) : asigna una clase al selector.
  • .removeClass([nombreClase]) : borra la  clase como parámetro al selector, si no se le pasa nada borra todas las clases asociadas al selector.
  • .toggleClass(nombreClase) : agrega o quita la clase, dependiendo si tiene o no la clase.

Recordar un selector en JQUERY puede tener el formato como si de un selector CSS se tratara.

nota

Métodos de interacción para Efectos:

  • .show([slow | fast]) : muestra un elemento oculto con una animación ‘slow’ lento o ‘fast’ rápido.
  • .hidden([slow | fast]) : oculta un elemento oculto con una animación ‘slow’ lento o ‘fast’ rápido.
  • .toggle([slow | fast]) : Muestra o oculta el elemento  según el estado que se encuentre.
  • .slideUp([slow | fast]) : pliega (oculta) el elemento animadamente.
  • .slideDown([slow | fast]) : despliega el elemento (muestra) animadamente.
  • .toggleSlide([slow | fast]) : pliega o despliega el elemento con una animación ‘slow’ lento o ‘fast’ rápido.
  • .fadeIn([slow | fast]) : muestra transparente sin escala con una animación ‘slow’ lento o ‘fast’ rápido.
  • .fadeOut([slow | fast]) : oculta transparente sin escala con una animación ‘slow’ lento o ‘fast’ rápido.
  • .fadeTo( [slow | fast], [transparencia]) : oculta o muestra un elemento con una transparencia de 0 a 1, donde 1 se muestra completo y 0 transparente total.
  • .animate([{css:valor}], “slow/fast/100/900”) : método para animar un elemento con las propiedades CSS que se le pase en el primer parametro cuando pase el tiempo del segundo parametro

Métodos Asíncronos para AJAX:

  • .load([rutaEnlace]) : carga la ruta del enlace y lo muestra en el elemento HTML asignado por el método.
  • $.get(rutaEnlace, [{dato: valor}], [function]) : hace un petición asíncrono de tipo GET a una ruta especifica por el primer parámetro, el segundo parámetro los datos a enviar y el tercer parámetro es la función que trata los datos devueltos por la petición AJAX.
  • $.post(rutaEnlace, [{dato: valor}], [function] ) : hace un petición asíncrono de tipo POST a una ruta especifica por el primer parámetro, el segundo parámetro los datos a enviar y el tercer parámetro es la función que trata los datos devueltos por la petición AJAX.
  • $.ajax({dataObject}) : método para hacer peticiones ajax en cualquier formato y tipo GET o POST.