Noviembre 9th, 2012

Selectores en jquery

Seleccionar todos los tags/elementos:

Todos los elementos ("*")

Seleccionar todos los elementos que estan en proceso de animación:
Extensiones jQuery

:animated Selector

Selecciona los elementos que tienen el atributo especificado con un valor ya sea igual a una cadena determinada o que comience con esa cadena seguida de un guión (-):

Atributo contiene prefijo seleccionado [name|="value"]

Seleccionar elementos que contengan el valor específico, aunque sea parte de una subcadena:

Atributo contiene palabra seleccionada [name*="value"]

Selecciona los elementos que tienen el atributo especificado con un valor que contenga una determinada palabra, delimitado por espacios:

Atributo contiene palabra seleccionada [name~="value"]

Seleccionar los elementos que finalicen con la palabra especificada:

Atributo finaliza con selector [name$="value"]

Selecciona los elementos que tienen el atributo especificado con un valor exactamente igual a un cierto valor:

Atributo igual a selector [name="valor"]

Seleccionar elementos que o bien no tienen el atributo especificado, o tienen el atributo especificado, pero no con un determinado valor:
Atributo, extensiones jQuery

Atributo no [nombre!="Valor"] Igual Selector

Selecciona los elementos que tienen el atributo especificado con un valor comenzando exactamente con una cadena dada:

Atributo comienza con selector de [nombre^="valor"]

Selecciona todos los elementos del botón y elementos de tipo botón:
Forma desuso, Extensiones jQuery

:button Selector

Selecciona todos los elementos de tipo checkbox:
Forma desuso, Extensiones jQuery

:checkbox Selector

Coincide con todos los elementos que están marcados:

:checked Selector

Selecciona todos los elementos secundarios directos especificados por “niño” de los elementos especificados por el “padre”:

Niño Selector ("padre > hijo")

Selecciona todos los elementos con la clase dada:

Selector de Clase (".clase")

Seleccione todos los elementos que contienen el texto especificado:

:contains() Selector

Selecciona todos los elementos que son descendientes de un ancestro determinado:

Descendiente Selector ("descendientes ancestro")

Selecciona todos los elementos que son discapacitados:

:disabled Selector

Selecciona todos los elementos con el nombre de etiqueta dado:

Elemento Selector ("elemento")

Seleccione todos los elementos que no tienen hijos (incluidos los nodos de texto):

:empty Selector

Selecciona todos los elementos que están habilitados:

:enabled Selector

Seleccione el elemento en el índice n en el juego completo:

:eq() Selector

Selecciona los elementos, incluso cero indexados. Ver también impar:
Extensiones Básicas filtro, jQuery

:even Selector

Selecciona todos los elementos del tipo de archivo:
Extensiones Básicas filtro, jQuery

:file Selector

Selecciona todos los elementos que forman el primer hijo de su padre:

:first-child Selector

Selecciona el primer elemento coincidente:
Extensiones Básicas filtro, jQuery

:first Selector

Selecciona el elemento si está actualmente enfocada:

:focus Selector

Seleccionar todos los elementos en un índice mayor que el índice en el juego completo:
Extensiones Básicas filtro, jQuery

:gt() Selector

Selecciona los elementos que tienen el atributo especificado, con cualquier valor:

Tiene un atributo con el texto [nombre], ej: input[type]

Selecciona los elementos que contienen al menos un elemento que coincida con el selector especificado:
Filtro de contenido, extensiones jQuery

:has() Selector

Selecciona todos los elementos que son cabeceras, como h1, h2, h3 y así sucesivamente:
Extensiones Básicas filtro, jQuery

:header Selector

Selecciona todos los elementos que están ocultos:
Extensiones jQuery, Visibilidad Filtro

:hidden Selector

Selecciona un solo elemento con el atributo id indicado:

Selector de ID ("#id")

Selecciona todos los elementos de imagen tipo:
Forma desuso, Extensiones jQuery

:image Selector

Selecciona todo input, textarea, select y elementos del botón:
Forma desuso, Extensiones jQuery

:input Selector

Selecciona todos los elementos que son el último hijo de su padre:

:last-child Selector

Selecciona el último elemento coincidente:
Extensiones Básicas filtro, jQuery

:last Selector

Seleccionar todos los elementos en un índice menor que el índice en el juego completo:
Extensiones Básicas filtro, jQuery

:lt() Selector

Seleccionar elementos que coincidan con todos los filtros de atributos:

Selector multiple de atributos [name="valor"][name2="valor2"]

Selecciona los resultados combinados de todos los selectores específicos:

Selector múltiple ("selector1, selector2, selectorN")

Selecciona todos los elementos siguientes que coinciden con “next” que son inmediatamente precedido por un hermano “prev”:

Selector adyacente siguiente ("prev + next")

Selecciona todos los elementos del mismo nivel que siguen después de la “prev” elemento, tienen el mismo padre, y que coincida con el filtro “hermanos” selector:

Hermanos Siguiente Selector ("prev ~ hemanos")

Selecciona todos los elementos que no coinciden con el selector dado:

:not() Selector

Selecciona todos los elementos que constituyen el enésimo hijo de su padre:

:nth-child () Selector

Selecciona elementos extraños, cero indexados. Ver también incluso:
Extensiones Básicas filtro, jQuery

:odd Selector

Selecciona todos los elementos que son el único hijo de su padre:

:only-child Selector

Seleccionar todos los elementos que son los padres de otro elemento, incluidos los nodos de texto:
Filtro de contenido, extensiones jQuery

:parent Selector

Selecciona todos los elementos de tipo contraseña:
Forma desuso, Extensiones jQuery

:password Selector

Selecciona todos los elementos de la radio tipo:
Forma desuso, Extensiones jQuery

:radio Selector

Selecciona todos los elementos de reposición tipo:
Forma desuso, Extensiones jQuery

:reset Selector

Selecciona todos los elementos que están seleccionados:
Forma, Extensiones jQuery

:selected Selector

Selecciona todos los elementos de tipo a presentar:
Forma desuso, Extensiones jQuery

:submit Selector

Selecciona todos los elementos de tipo text:
Forma desuso, Extensiones jQuery

:text Selector

Selecciona todos los elementos que son visibles:
Extensiones jQuery, Visibilidad Filtro

:visible Selector

Octubre 1st, 2012

Ocultar y mostrar elementos con jquery

En jquery, cuando intentamos ocultar y hacer aparecer elementos de nuestro html con un click, a veces caemos en el error de crear una función que haga un $().hide(), y a través de una variable global detectar que nuestro elemento está oculto y hacer un $().show().
jquery nos proporciona un método para realizar este gesto en una sola función:

$().slideToggle()

slideToggle nos permite realizar nuestro ocultar/mostrar definiendo nuestro gesto en un solo click:

<a onclick="$('#div_mostrar_ocultar').slideToggle()">
      Mostrar/Ocultar
</a>
<div id="div_mostrar_ocultar">Mostrado</div>

Link | slideToggle

Febrero 6th, 2009

Esquinas Redondeadas

Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas.

Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones:

    border-radius (estándar css)
    -moz-border-radius (cuando se trataba de mozilla,
         aunque desde la versión 3.0 ya lo hacemos
         con la instrucción anterior)
    -webkit-border-radius (safari y chrome)

El problema de hacerlo de este modo, es el de siempre, el maldito Internet Explorer, que ni en su versión 8 implementa estos estándares.
Una solución para tener las esquinas redondeadas en todos los navegadores, incluido Internet Explorer es usar JQuery Corners.
jQuery Corners es un plugin que nos permite realizar esquinas redondeadas de una manera bastante sencilla, sin imágenes o maquetación adicional y engorrosa en el código. Simplemente se define una clase y se aplica a un elemento HTML. Veamos como hacerlo:


- Primero descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas y :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>



- Luego define la clase la cuál creará las esquinas redondeadas de la siguiente forma:

<script type="text/javascript">
<!--
$(document).ready( function(){
$('.redondas').corners();
});
// -->
</script>



- Y por último simplemente aplica la clase a cualquier elemento HTML, como por ejemplo a un típico selector DIV:

<div class="redondas">
Contenedor con esquinas redondeadas.
</div>

Esta es la forma más básica de usar el script aunque posee varias opciones de configuración, como puede ser el radio de curvatura general o para cada una de las esquinas o también podemos aplicar el script a botones de un formulario. Todas estas las podemos consultar en el sitio oficial de jQuery Corners
Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Links | jQueryjQuery Corners

Diciembre 10th, 2008

Hacer miniaturas de Imágenes

Miniaturas

Quien no ha tenido alguna vez que crear una miniatura (Thumbnails), de sus imágenes automáticamente. Una opción puede ser añadirle el tamaño por css, o en la misma etiqueta <img, pero las imagenes se verían mal, puesto que están redimensionadas a tamaño completo.

Una opción muy buena, sin usar php y sin hacerlo manualmente, sería usar JQuery u JThumbs. Mediante el siguiente script tendremos las deseadas miniaturas:

<script type="text/javascript">
    $(document).ready(function() {
        // aquí realmente hacemos la miniatura
        $("a.thumb, img.thumb").jThumb();
        // Posicionar imagen (opcional)
        $("a.thumb img, img.thumb").jThumbImg();
    });
</script>

Lo unico que necesitamos es en enlace previo a nuestro framework favorito jquery:

<script type="text/javascript" src="jquery.js"></script>

Ventajas:

  • No sobrecargamos el servidor con otro script php.
  • Es un proceso automático.

Desventajas

  • La imagen carga entera (aunque visualmente satisfactoria).

Descarga | JQueryJThumb