Jquery tips (Selectores)

JQuery es sin duda el framework javascript mas popular en la web, por esto en ocasiones es importante tener a la mano información que aunque es básica, nos ayudara a resolver varios problemas.

Empecemos con lo basico

$(" div");

Es lo mismo que

jQuery(" div");

selectores

// Selector por tag
$("body"); 

// Selector por id del elemento 
$("# id"); 

// Selector por clase del elemento 
$(".className"); 

// Selector usando pseudo-selector CSS :nth-child 
$(" div:nth-child( 2)"); 

// Selector de todos los elementos del documento html 
$("*"); 

// Selector de todos los elementos párrafo
$("p"); 

// Selector para párrafos spans y divs 
$("p, span, div"); 

// selector de párrafo con id 
$(" p# short");

// selector de div con clase
$(" div.option"); 

// Selector con elemento y pseudo-selector :first o :last
$(" p:first"); 
$(" p:last"); 


// Selector con elemento y pseudo-selector nth-child (nos permite seleccionar cualquier posición de una lista de elementos )
$(" p:nth-child( 1)"); // primero
$(" p:nth-child( 2)"); // segundo
$(" p:nth-child( 3)"); // tercero

// Selector con elemento y pseudo-selector nth-child con palabras clave even o odd
// even para seleccionar todos los pares 
// odd para seleccionar los impares
$(" p:nth-child( even)"); 
$(" p:nth-child( odd)"); 

// Selector con los paréntesis cuadrados para seleccionar cualquier elemento con un atributo llamado "xxx"
$("[xxx]"); 

// Selector para seleccionar todos los párrafos hijos pero solo después de cualquier elemento con clase "s"
$(".s ~p"); 

// Selector para los inputs de type definido ejemplo tipo "text"  
$(" input[ type = text]");

// Selector para todos los checkbox seleccionados usando el selector de atrubuto [] o el psudo-selector :checked, selector que tambein sirve para los radio buttons 
$(" input:checked"); 

// Selector poara seleccionar solo checkboxes 
$(" input[ type = checkbox]: checked"); 

// Selector para todos los elementos inputs contenidos en el elemento form
$("form input"); 

// Selector para todos los elementos a dentro de la tabla 
$("table tr td a"); 

Aqui terminan los tips de selectores.

También te podría gustar...