Archivo de la etiqueta: javascript

27 Nov

Jquery Tips (Metodos)

Codigo Fuente

Después de aprender a seleccionar con jquery los elementos del documento html por medio de los selectores anteriormente comentados, esa importante saber que hacer con estos, por lo cual vamos a ver como aplicar métodos a un elemento seleccionado.

Ejemplos de aplicación de métodos con jquery 


// Aplica propiedad CSS al elemento seleccionado 
$(". className"). css(" border", "1px solid red"); 

// Aplica CSS de un elemento usando un objeto
$(". className"). css({" border": "1px solid red"}); 

// Aplica dos CSS a los objetos seleccionados 
// (notese que este ejemplo usa una notación de objeto para el caso de las propiedades que 
// se desean establecer por medio del método CSS de jquery, por esta razon se 
// puede usar para aplicar mas de una propiedad) 
$(". className"). css({ "color": "red", "font-weight": "bold" });

// Esconde la segunda fila de la tabla
$(" table tr:nth-child( 2)"). hide(); 

// Convierte la lista < ul id = "list" > en una lista ordenable 
$(" ul# list"). sortable(); 

// Selecciona todos  los elementos y los filtra usando el metodo "is" 
$("*"). is(" p"); 

// El metodo "is" es usado con la variable "this" dentro de los callback para poder indetificar su tipo
$(this). is("div"); 

// Selecciona un elemento y con el metodo "parent" selecciona el elemento padre 
$("p#short"). parent();

// Selecciona todos los inputs si estos tienen como padre el elemento "form"  
$(" input"). parent(). is(" form"); 

// Selecciona y aplica el estilo CSS, limpia la cola, hace una nueva seleccion y aplica nuevo CSS, en otras palabras los elementos 

quedan con fuente de color azul y los elementos quedan con fuente de color rojo 
$(" p"). css(" color", "blue"). end(). add(" b"). css(" color", "red"); 

// si se hace sin el metodo "end" entre los elementos ambos quedan con fuente de color rojo.
$(" p"). css(" color", "blue"). add(" b"). css(" color", "red");
27 Nov

Jquery tips (Selectores)

Codigo Fuente

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.