Mootools y el DOM, tercera parte

11 de September, 2007

En ésta tercera parte (y en la cuarta dentro de unos días) veremos algunas herramientas que, si bien no son tan importantes como las anteriormente explicadas, vale la pena tenerlas a mano.

appendText(texto)

Nos permite agregar solo texto a un elemento. Si intentamos insertar HTML con appendText no sera interpretado, es pasado a entidades HTML para ser mostrado como texto.

1

<div id="elemento">Elemento</div>
1

$('elemento').appendText(' con mucho texto');

Resultado:

1

<div id="elemento">Elemento con mucho texto</div>

Y si intentamos insertar HTML:

1

$('elemento').appendText(' con algunos <tags></tags>');

Resultado:

1

<div id="elemento">Elemento con algunos &lt;tags&gt;&lt;/tags&gt;</div>

hasClass(nombreClase)

Devuelve true si nuestro elemento contiene la clase indicada o false en caso contrario.

1

<div id="elemento" class="casa">Elemento</div>
1
2
3
4
5

var resultado = $('elemento').hasClass('departamento');
//resultado es false
 
var resultado = $('elemento').hasClass('casa');
//resultado es true

addClass(nombreClase)

Agrega una clase a un elemento.

1

<div id="elemento">Elemento</div>
1

$('elemento').addClass('casa');

Resultado:

1

<div id="elemento" class="casa">Elemento</div>
1

$('elemento').addClass('departamento');

Resultado:

1

<div id="elemento" class="casa departamento">Elemento</div>

removeClass(nombreClase)

Quita una clase de un elemento.

1

<div id="elemento" class="casa departamento">Elemento</div>
1

$('elemento').removeClass('casa');

Resultado:

1

<div id="elemento" class="departamento">Elemento</div>
1

$('elemento').removeClass('departamento');

Resultado:

1

<div id="elemento" class="">Elemento</div>

toggleClass(nombreClase)

Si la clase indicada está presente en nuestro elemento, la quita, de lo contrario, la agrega.

1

<div id="elemento">Elemento</div>
1

$('elemento').toggleClass('casa');

Resultado:

1

<div id="elemento" class="casa">Elemento</div>
1

$('elemento').toggleClass('casa');

Resultado:

1

<div id="elemento" class="">Elemento</div>

setStyle(propiedad, valor)

Nos permite cambiar una propiedad css.

1

<div id="elemento">Elemento</div>
1

$('elemento').setStyle('background-color', '#cccccc');

Resultado:

1

<div id="elemento" style="background-color:#cccccc">Elemento</div>

setStyles(objeto o string)

Nos permite cambiar varias propiedades css en un solo paso. Se puede indicar un objeto con los estilos y sus correspondientes valores o bien todos los estilos en un string. En este ultimo caso, se sobrescriben los estilos que posee el elemento.

1

<div id="elemento" style="width:300px">Elemento</div>
1
2
3
4
5

$('elemento').setStyles(
{
     'background-color': '#ccc',
     'color': '#333',
});

Resultado:

1

<div id="elemento" style="width: 300px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51);">Elemento</div>

Si hubieramos utilizado un string:

1

$('elemento').setStyles('background-color:#ccc;color:#333');

Resultado:

1
2

<div id="elemento" style="background-color: rgb(204, 204, 204); color: rgb(51, 51, 51);">Elemento</div>
<!-- La propiedad width fue borrada -->

setOpacity(valor)

Cambia la opacidad de un elemento, acepta valores de 0 a 1. Si el valor elegido es 0, también se pasa la propiedad visibility a hidden, si es mayor a 0, dicha propiedad se pasa a visible.

1
2

$('elemento').setOpacity(0.3);
//30% de opacidad

getStyle(propiedad)

Devuelve el valor de la propiedad CSS indicada.

1

<div id="elemento" style="width:300px">Elemento</div>
1
2

var width = $('elemento').getStye('width');
//width vale "300px"

getStyles(propiedad, otra propiedad, mas propiedades)

Devuelve todas las propiedades CSS indicadas en forma de objeto.

1

<div id="elemento" style="width:300px;height:100px">Elemento</div>
1
2
3
4

var estilos = $('elemento').getStyes('width', 'height');
//estilos es {width: "300px", height: "100px"}
//estilos.width es 300px
//estilos.height es 100px

Hasta aquí la tercera parte. No hay mas ejemplos que los que aquí pudieron ver porque no lo creo necesario, me parece que el funcionamiento de cada método explicado es bastante sencillo y se puede comprender fácilmente con estos ejemplos planos. En unos días terminamos con la clase Element (por fin!) en la cuarta y última parte de esta serie de artículos.

Popularity: 3% [?]

Otros artículos

Suscríbete para seguir el blog Escrito por Archivado en Mootools en español
6 comentarios »

6 comentarios en “Mootools y el DOM, tercera parte”

  1. ImZyos! Dijo:
    September 12, 2007 a las 12:19 am

    Priceless

  2. noth Dijo:
    September 12, 2007 a las 4:46 am

    Interesante, yo siempre he usado jquery, y estoy muy contento con los resultados que obtengo, pero cada vez se oye más sobre mootools, por lo que veo es muy similar

    Ahora con todos estos apuntes tuyos, no tengo porque no probarlo jeje

    Estaría bien saber si existe un comparativa entre jquery y mootools

    Un saludo

  3. hanok Dijo:
    September 12, 2007 a las 6:03 am

    Gracias por el tutorial!

  4. Arcadio Dijo:
    September 12, 2007 a las 10:13 am

    muy buenos ejemplos….¡¡¡

  5. Federico Dijo:
    September 12, 2007 a las 9:06 pm

    Gracias por los comentarios! La verdad es que pensé que nadie iba a leer este articulo, se hizo tan largo que… :-D

    noth, sinceramente no conozco ningún buen articulo que hable de las principales diferencias entre mootools y jquery. Yo casi no use jquery por lo que mucho no puedo decir, lo único que vi(y no me gusto) es su código fuente. Si lo comparas con el de Mootools me entenderás.

    Por lo demás, mootools se me hizo adictiva y no pude abandonarla para probar otras :p

    Saludos!

  6. Introducción a MooTools Dijo:
    May 7, 2008 a las 4:36 am

    [...] Manipulación de clases y estilos CSS. [...]

Deja tu comentario

XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

El blog funciona con Wordpress y Simpla theme