Leccion 01 - Selectores

Lo primero que debemos saber ala hora de trabajar con JQUERY es seleccionar os elementos del árbol de documento sobre los que queremos trabajar.


nuestro script hace referencia a la librería JQUERY por medio de su mismo nombre jquery

o por medio de este símbolo $ si en nuestra pagina no estamos trabajando con ningún lenguaje que utilice el símbolo $ podemos trabajar tranquilamente .

Selectores básicos

Selector universal: selecciona todos los elementos de la página

1. jquery("*") 
2. $("*")

Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado 

1. jQuery("div")  
2. $("div")

Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) 

1. jQuery("div.entrada") 
2. $("div.entrada") 

Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado 

1. jQuery("div#cabecera")
2. $("div#cabecera")

Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas

1. jquery("p,div,a")
2. $("p,div,a")

Selectores de atributos

Selector de atributo: selecciona elementos que tengan un cierto atributo 

1. jquery("a[rel]") 
2. $("a[rel]") 

También se puede seleccionar aquellos que tengan un cierto valor para un atributo 

1. jquery("a[rel='nofollow']") 
2. $("a[rel='nofollow']") 

O que tengan un valor distinto del indicado 

1. jQuery("a[rel!='nofollow']")
2. $("a[rel!='nofollow']") 

Aquellos cuyo valor empieza por una cierta cadena 

1. jquery("a[href^='http://simplejquery.blogspot.com/']") 
2. $("a[href^='http://simplejquery.blogspot.com/']") 

Los que terminan con una cierta cadena 

1. jquery("a[href$='.com']")
2. $("a[href$='.com']")

Y los que contienen una cierta cadena 

1. jquery("a[href*='simple']")
2. $("a[href*='simple']") 

Por último, podemos hacer combinaciones de todo lo anterior 

1. jquery("a[rel='nofollow'][href]")
2. $("a[rel='nofollow'][href]") 

Selectores de Elementos

Pseudo clase botón: selecciona todos los botones

1. jquery(":button")
2. $(":button")

Pseudo clase checkbox: selecciona todos los checkboxes 

1. jquery(":checkbox") 
2. $(":checkbox")

Pseudo clase archivo: selecciona todos los widgets de tipo archivo 

1. jquery(":file") 
2. $(":file") 

Pseudo clase cabeceras: selecciona todas las cabeceras 

1. jquery(":header") 
2. $(":header") 

Pseudo clase imagen: selecciona todas las imágenes

1. jquery(":image")
2. $(":image")

Pseudo clase input: selecciona todos los elementos de tipo input 

1. jquery(":input")
2. $(":input")

Pseudo clase contraseña: selecciona todos los elementos password

1. jquery(":password")
2. $(":password") 

Pseudo clase radiobutton: selecciona todos los elementos radiobutton

1. jquery(":radio")
2. $(":radio")

Pseudo clase reset: selecciona todos los elementos reset 

1. jquery(":reset")
2. $(":reset")  

Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select 

1. jquery(":select")
2. $(":select")
3.  

Pseudo clase submit: selecciona todos los elementos submit 

1. jquery(":submit") 
2. $(":submit") 

Pseudo clase texto: selecciona todos las cajas de texto

1. jquery(":text")
2. $(":text")  

Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados 

1. jquery(":checked") 
2. $(":checked")  

Pseudo clase activo: selecciona todos los elementos que estén activos 

1. jquery("input:enabled") 
2. $("input:enabled") 

Pseudo clase inactivo: selecciona todos los elementos que no estén activos

1. jquery("input:disabled") 
2. $("input:disabled") 

Pseudo clase ocultos: selecciona todos los elementos ocultos

1. jquery(":hidden")
2. $(":hidden")  

Pseudo clase visible: selecciona todos los elementos visibles 

1. jquery(":visible")
2. $(":visible")   

Y una de la mas importantes para por no decir la MAS es la que hace referencia al id de un elemento en la pagina

1. jquery("#idDelElemento")
2. $("#idDelElemento")