Advertisement
  1. Code
  2. Roundups

20 métodos jQuery útiles que deberías utilizar

by
Read Time:14 minsLanguages:

Spanish (Español) translation by Vukica (you can also view the original English article)

Así que has estado jugando con jQuery por un tiempo, estás empezando a entenderlo, ¡y realmente te está gustando!  ¿Estás listo para llevar tus conocimientos de jQuery al nivel dos? Hoy, demostraré veinte funciones y características que probablemente no hayas visto antes.


1 después () / antes ()

A veces deseas insertar algo en el DOM, pero no tienes buenos ganchos para hacerlo; append () o prepend () no lo van a cortar y no deseas agregar un elemento o id adicional.  Estas dos funciones pueden ser las que necesites. Te permiten insertar elementos en el DOM justo antes o después de otro elemento, por lo que el nuevo elemento es hermano del anterior.

También puedes hacer esto si estás trabajando principalmente con el elemento que deseas insertar; simplemente usa las funciones insertAfter () o insertBefore.


2 change()

El método change() es un controlador de eventos, como click() o hover(). El evento de cambio es para áreas de texto, entradas de texto y cuadros de selección, y se activará cuando se cambie el valor del elemento de destino; ten en cuenta que esto es diferente de los controladores de eventos focusOut() o blur(), que se activan cuando el elemento pierde el foco, ya sea que su valor haya cambiado o no.

El evento change() es perfecto para la validación del lado del cliente; es mucho mejor que blur(), porque no volverás a validar campos si el usuario no cambia el valor.


3 Contexto

El contexto es tanto un parámetro como una propiedad en jQuery. Al recopilar elementos, puedes pasar un segundo parámetro a la función jQuery.  Este parámetro, el contexto, generalmente será un elemento DOM y limita los elementos devueltos al elemento que coincide con tu selector que son hijos del elemento de contexto. Eso puede sonar un poco confuso, así que mira este ejemplo:

context example

Entonces, ¿dónde sería útil esto? Un lugar podría estar dentro de una función de controlador de eventos. Si deseas obtener un elemento dentro del que se disparó el evento, puedes pasar esto como contexto:


4 datos () / removeData ()

¿Alguna vez has querido almacenar algo de información sobre un elemento? Puedes hacerlo fácilmente con el método data(). Para establecer un valor, puedes pasar dos parámetros (una clave y un valor) o solo uno (un objeto).

Para recuperar tus datos, simplemente llama al método con la clave de valor que desees.

Para obtener todos los datos que se corresponden con un elemento, llama a datos sin ningún parámetro; obtendrás un objeto con todas las claves y valores que te has dado a ese elemento. Si deseas eliminar un par clave/valor después de haberlo agregado a un elemento, simplemente llama a removeData(), pasando la clave correcta.


5 queue() / dequeue()

Las funciones queue() y dequeue() se ocupan de las animaciones. Una cola es una lista de animaciones que se ejecutarán en un elemento; por defecto, la cola de un elemento se llama 'fx'. Configuremos un escenario:

HTML

JavaScript

Entonces, esto es lo que está sucediendo: en la función animateBox, estamos configurando una cola de animaciones; observa que el último vuelve a llamar a la función, por lo que esta repetirá continuamente la cola.  Cuando hacemos clic en li # start, se llama a la función y comienza la cola. Cuando hacemos clic en li # reset, la animación actual finaliza y luego el div deja de animarse.  Lo que hemos hecho con jQuery es configurar la cola llamada 'fx' (recuerde, la cola predeterminada) en una matriz vacía; esencialmente, hemos vaciado la cola. ¿Y qué pasa cuando hacemos clic en li # agregar? Primero, llamamos a la función de queue en el div; esto agrega la función que le pasamos al final de queue; como no especificamos una cola como primer parámetro, se usa 'fx'.  En esa función, animamos el div, y luego llamamos a dequeue() en el div, lo que elimina esta función de la cola y continúa la cola; la cola seguirá repitiéndose, pero esta función no formará parte de ella.


6 delay()

Cuando estás poniendo en cola una cadena de animaciones, puedes usar el método delay() para pausar la animación por un período de tiempo; pasar ese tiempo como parámetro en milisegundos.


7 bind(), unbind(), live(), y die()

¿Sabías que cuando agregas un evento de clic a un elemento como este? . .

. . . ¿Realmente estás usando un contenedor para el método bind()? Para usar el método bind() en sí, puedes pasar el tipo de evento como primer parámetro y luego la función como segundo.

Si usas muchos eventos, puedes categorizarlos con espacios de nombres; simplemente agrega un punto después del nombre del evento y agrega tu espacio de nombres.

También puedes asignar la misma función a varios eventos al mismo tiempo, separándolos con espacios. Entonces, si deseas hacer un efecto de desplazamiento, puedes comenzar de esta manera:

También puedes pasar datos a la función si lo deseas, agregando un tercer parámetro (en la segunda posición).

Tarde o temprano, te encontrarás insertando un elemento en el DOM a través de un controlador de eventos; sin embargo, encontrarás que los controladores de eventos que has creado con bind (o sus envoltorios) no funcionan para los elementos insertados. En casos como este, deberás utilizar el método live() (o delegate); esto agregará los controladores de eventos a los elementos insertados apropiados.

Para eliminar los controladores de eventos creados con bind(), usa el método unbind(). Si no te pasa ningún parámetro, eliminarás todos los controladores; puedes pasar el tipo de evento para eliminar solo los controladores de eventos de ese tipo; para eliminar eventos de un espacio de nombres específico, agregar el espacio de nombres o usarlo solo.  Si solo deseas eliminar una determinada función, pasa su nombre como segundo parámetro.

Ten en cuenta que puede bind/unbind funciones que hayas pasado de forma anónima; esto solo funciona con el nombre de las funciones. Si está tratando de desvincular un evento desde dentro de la función llamada por el evento, simplemente pasa unbind() el objeto de evento.

No puedes usar unbind() para eventos en vivo; en su lugar, usa el die(). Sin parámetros, eliminará todos los eventos en vivo de la colección de elementos; también puedes pasarlo solo el tipo de evento, el tipo de evento y la función.

¡Y ahora, puedes manejar eventos de jQuery con destreza y poder!

También debes revisar el método delegate(), ya que puedes haber beneficios de rendimiento sustanciales al usarlo en live ().


8 eq()

Si estás buscando un elemento específico dentro de un conjunto de elementos, puedes pasar el índice del elemento al método eq() y obtener un solo elemento jQuery. Pasa un índice negativo para contar hacia atrás desde el final de la serie.

También puede usar:eq() en tus selectores; por lo que el ejemplo anterior podría haberse hecho así:


9 get()

Al obtener una colección de elementos, jQuery los devuelva como un objeto jQuery, por lo que tienes acceso a todos los métodos. Si solo deseas los elementos DOM sin procesar, puedes usar el método get().

Puedes especificar un índice para obtener solo un elemento.


10 grep()

Si no estás familiarizado con los shells de Unix/Linix, es posible que no hayas escuchado el término grep. En una terminal, es una utilidad de búsqueda de texto; pero aquí en jQuery, lo usamos para filtrar una matriz de elementos.  No es un método de una colección jQuery; pasa la matriz como primer parámetro y la función de filtrado como segundo parámetro. Esa función de filtro toma dos parámetros en sí misma: un elemento de la matriz y su índice.  Esa función de filtro debe realizar su trabajo y devolver un valor verdadero o falso. Sé predeterminado, se mantendrán todos los elementos que devuelvan verdadero. Puedes agregar un tercer parámetro, un booleano, para invertir los resultados y mantener los elementos que devuelven falso.

Jeffrey Way hizo un gran consejo rápido sobre el $.grep no hace mucho; ¡Compruébalo para ver cómo se usa!


11 pseudo-selectores

Sizzle, el motor de selección de CSS dentro de jQuery, ofrece bastantes pseudo-selectores para facilitar la tarea de seleccionar los elementos que deseas. Mira estos interesantes:

Hay más, por supuesto, pero estos son los únicos.


12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

A veces deseas asegurarte de que el parámetro que se pasó a una función sea del tipo actual; estas funciones facilitan la realización. Los tres primeros se explican por sí mismos:

El siguiente no es tan obvio; isPlainObject() devolverá verdadero si el parámetro pasado fue creado como un objeto literal, o con un nuevo Object().


13 makeArray()

Cuando creas una colección de elementos DOM con jQuery, se te devuelve un objeto jQuery; en algunas situaciones, es posible que prefieras que sea una matriz o elementos DOM regulares; la función makeArray() puedes hacer precisamente eso.


14 map()

El método map() es remotamente similar a grep(). Como era de esperar, se necesita un parámetro, una función. Esa función puede tener dos parámetros: el índice del elemento actual y el elemento en sí.  Esto es lo que sucede: la función que pase se ejecutará una vez para cada elemento de la colección; cualquier valor devuelto por esa función ocupa el lugar del elemento para el que se ejecutó en la colección.


15 parseJSON()

Si estás utilizando $ post o $.get, y en otras situaciones en las que trabaja con cadenas JSON, encontrarás útil la función parseJSON. Es bueno que esta función use el analizador JSON incorporado en el navegador si tiene uno (que obviamente será más rápido).


16 proxy()

Si tienes una función como propiedad de un objeto, y esa función usa otras propiedades del objeto, no puedes llamar a esa función desde otras funciones y obtener los resultados correctos. Sé que fue confuso, así que veamos un ejemplo rápido:

Por sí mismo, person.meet() alertará correctamente; pero cuando es llamado por el controlador de eventos, alertará "¡Hola! Mi nombre no está definido". Esto se debe a que la función no se llama en el contexto correcto. Para solucionar esto, podemos usar la función proxy():

El primer parámetro de la función proxy es el método a ejecutar; el segundo es el contexto en el que deberíamos ejecutarlo. Alternativamente, podemos pasar el contexto primero y el nombre del método como una cadena en segundo lugar. Ahora encontrarás que la función alerta correctamente.

¿Prefieres un consejo rápido en video sobre $.proxy?


17 replaceAll() / replaceWith()

Si deseas reemplazar elementos DOM por otros, aquí te mostramos cómo hacerlo. Podemos llamar a replaceAll() en los elementos que hemos recopilado o creado, pasando un selector para los elementos que nos gustaría reemplazar.  En este ejemplo, todos los elementos con la clase de error se reemplazarán con el intervalo que hemos creado.

El método replaceWith() simplemente invierte los selectores; busca los que deseas reemplazar primero:

También puedes pasar estas funciones de dos métodos que devolverán elementos o cadenas HTML.


18 serialize() / serializeArray()

El método serialize() es lo que se debe usar para codificar los valores en un formulario en una cadena.

HTML

JavaScript

Puedes usar serializeArray() para convertir los valores del formulario en una matriz de objetos en lugar de una cadena:


19 siblings()

Probablemente puedas adivinar lo que hace el método siblings(); devolverá una colección de los hermanos de los elementos que estén en tus colecciones originales:


20 wrap() / wrapAll() / wrapInner()

Estas tres funciones facilitan el envolver elementos en otros elementos. En primer lugar, mencionaré que los tres toman un parámetro: un elemento (que es una cadena HTML, un selector de CSS, un objeto jQuery o un elemento DOM) o una función que devuelve un elemento. El método wrap() envuelve cada elemento de la colección con el elemento asignado:

WrapAll() envolverá un elemento alrededor de todos los elementos de la colección; esto significa que los elementos de la colección se moverán a un nuevo lugar en el DOM; se alinearán en el lugar del primer elemento de la colección y estarán envueltos allí:

HTML, antes:

JavaScript

HTML, después:

Finalmente, la función wrapInner envuelve todo dentro de cada elemento en la recopilación con el elemento dado:

HTML, antes:

JavaScript

HTML, después:


Conclusión

Bueno, ahora tienes más de veinte nuevas funciones de jQuery con las que jugar en tu próximo proyecto; diviértete con ellos!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.