Publicidad

5 funciones de jQuery que sabías pero quizás no recordabas

Autor: | Categoría:

jQuery, o lo amas o lo amas. Te presento 5 funciones de jQuery que sabías pero quizás no recordabas.

Sabemos de sobra que jQuery es un lenguaje que pretende hacerle la vida más fácil a todos los que diseñamos o maquetamos o programamos. Pues bien, estas 5 funciones te pueden sacar de un apuro sin tener que romperte la cabeza con funciones rebuscada o que te pueden llevar mucho rato para encontrarles la lógica.

Cuando empiezas con la programación, al menos a mi, me pasaba que me complicaba la vida de mala manera para hacer cosas simples, todo es debido a que mi mente no tolera muy bien la programación y se hace la picha un lio XD.

Seleccionar todos los elementos que no tengan algo determinado:

Puedes invocar que los elementos que NO tengan un estilo, atributo, id, etc… determinado de esta manera tan simple.

  • Primer uno
  • Primer dos
  • Primer tres
  • Segon uno
  • Segon dos
  • Segon tres
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
     jQuery('#first > li').addClass('primero')
     jQuery('li:not(.primero)').addClass('segundo');
})
// ]]></script>

No hace falta ni usar if ni cosas raras que se te podrían pasar por la cabeza, tan fácil como una línea de código jQuery.

Invocar elementos que empiezan o acaban de una manera determinada:

Esto es muy útil para hacer por ejemplo que todos los links que apuntes a un mail tengan un estilo determinado diferente de los demás links sin tener que darles una clase concreta uno a uno.

  • Segon uno
  • Segon dos
  • Segon tres
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
     jQuery('a[href^=mailto:]').addClass('primero')
     jQuery('a[href$=.pdf]').addClass('segundo');
})
// ]]></script>

Esta es la que más me gusta, dar estilo a elementos alternos.

Siempre empezando por el segundo. Muy útil para hacer tablas más vistosas o diferenciar comentarios:

  • Primer uno
  • Primer segundo
  • Primer tres
  • Primer quatre
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
     jQuery('li:odd').addClass('primero')
})
// ]]></script>

Dar estilo sólo a los elementos que contengan algo determinado.

En este caso ‘segundo’ (cuidado, mayúsculas y minúsculas se diferencian). Por ejemplo para resaltar siempre un nombre o una calle:

  • Primer uno
  • Primer segundo
  • Primer tres
  • Primer quatre
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
     jQuery('li:contains(segundo)').addClass('primero')
})
// ]]></script>

Y por último, dar estilo a todo lo que venga después de, en este caso ‘Segundo’, del mismo nivel en el DOM

Si quieres que a partir de una palabra, div, celda o lo que sea tenga un estilo diferente, ésta es tu función:

  • Primer uno
  • Segundo
  • Tercero
  • Cuarto
esto es una prueba jQuery
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
     jQuery('li:contains(Segundo)').nextAll().addClass('primero')
})
// ]]></script>

Pues eso es todo, seguro que puedes emplear estas funciones en alguno de tus diseños y así ahorrar código y tiempo, ya que con una sola función puedes controlar muchos elementos distintos.


¿Sabes tu alguna que pueda ser parecida y pueda ayudar a maquetar más rápido? ¡Compártela!

Publicidad
Etiquetas: , , , ,
¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies