jueves, 18 de abril de 2013

Los selectores en Jquery


Los selectores son el modo con el cual se accede a los elementos incluídos en el DOM HTML, al igual que con CSS se modifican los estilos accediendo al elemento o elementos seleccionados.

En Jquery siempre para acceder a un selector/es hay que utilizar la siguiente sintaxis -> $("selector/es"), si ya conoces el funcionamiento de las Hojas de Estilo CSS, no tendrás problemas en entender el uso de selectores en Jquery.

A continuación vamos a ver distintas formas de acceder a los selectores  ...

$("div") -> Selecciona todos los divs del documento

$("#id") -> Selecciona el elemento con el id nombre "id"

$(".class") -> Selecciona todos los elementos que contengan la clase "class"

$("input[type='button']") -> Selecciona todos los input button, útil para acceder a los campos de formulario: submit, button, reset, text, password, email, radio, checkbox, file, ...

$("input[name='campo']") -> Seleccionar el input cuyo atributo name es igual a campo, eje.: <input type='text' name='campo'> 

$("ul li:eq(0)") -> selecciona el primer elemento li de las etiquetas ul, es una forma de indexar los elementos, al primer elemento siempre le corresponde el index 0.

$("ul li:first-child") -> selecciona el primer elemento li de las etiquetas ul

$("ul li:last-child") -> selecciona el último elemento li de las etiquetas ul

$("div p") -> Selecciona todos los párrafos descendientes de div

$("div, span") -> Selecciona todos los div y span del documento

$("div>a") -> Selecciona todos los links hijos directos de div

$("h1+p") -> Selecciona todos los párrafos inmediatamente precedidos por un h1 hermano

$("div~p") -> Selecciona todos los divs precedidos por un elemento párrafo

$("div:has(span)") -> Selecciona todos los divs que contienen un elemento span

$("div.clase") -> Selecciona todos los divs que tienen la clase "clase"

$("img[alt]") -> Selecciona todos los elementos img con el atributo "alt" activo

$("button[id*=boton]") -> Selecciona todos los botones con atributo "id" que contengan la palabra botón.

$("a[href$=.php]") -> Selecciona todos los links con atributo href terminados en .php

$("a[title^=ti]") -> Selecciona todos los links cuyo atributo title comienza por "ti"