jQuery xdiseñadores

Estilos

Obtener y establecer un valor

Con jQuery es posible con el mismo método escribir (setter) que leer (getter) un valor

$('h1').html('hola mundo');

escribimos hola mundo en la etiqueta h1.

$('h1').html();

Leemos el contenido de la etiqueta h1 (ver ejemplo getters)

Estilos CSS

Con jQuery es muy fácil modificar las propiedades CSS de los elementos, empleamos parejas de palabra clave y valor.

$('h1').css('fontSize', '1.2em');

o también:

$('h1').css({
'fontSize' : '1.2em',
'color' : 'red'
});

Tambien pueden usarse valoeres relativos

$('h2').css({
'fontSize' : '+=15px',
'paddingTop' : '+=20px'
});

ver ejemplo estilos

Atributos

Para modificar los atriburtos se hace similar a los CSS, con un conjunto de palabras clave, valor.

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
'title' : 'all titles are the same too',
'href' : 'somethingNew.html'
});

Tambien opuedes leer un atributo,

$('a').attr('href');

ver el ejemplo atributos

Manipular elementos

Mover

El método $.fn.insertAfter, coloca a los elementos seleccionados después del elemento que se haya pasado como argumento; el método $.fn.after coloca al elemento pasado como argumento después del elemento
seleccionado. Otros métodos similares son: $.fn.insertBefore y $.fn.before; $.fn.appendTo y $.fn.append; y $.fn.prependTo y $.fn.prepend.

$('#primero').appendTo('#segundo');

Clonar

Si queremos mover y mantener el elemento original usaremos el método $.fn.clone.

$('#primero').clone().appendTo('#segundo');

Crear

Igualmente podemos crear nuevos elementos:

var $nuevo = $('<p>Nuevo elemento</p>');
$nuevo.appendTo('#segundo');

ver el ejemplo clonar