DesarrolloWeb.com > Manuales > Manual de jQuery

Otros usos de la función $()

14 de julio de 2009

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (5)

La función jQuery(), o con su abreviación $(), tiene otros usos interesantes cuando le enviamos parámetros distintos a los vistos en el artículo anterior.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En el pasado capítulo del manual de jQuery vimos unas primeras notas sobre el Core de jQuery y comenzamos a explicar la función jQuery(), que es la más importante en este framework Javascript. Ahora veremos como esta función, que también se puede acceder por medio del símbolo dólar $(), puede tener otras aplicaciones útiles, cuando recibe parámetros distintos a los que vimos anteriormente.

Función jQuery pasando un HTML

Una posibilidad de trabajar con la función jQuery es enviarle un string con un HTML. Esto crea esos elementos en la página y les coloca los contenidos que se indique en el string. Ojo, que el HTML tiene que estar bien formado para que funcione en cualquier navegador, esto es, que se coloquen etiquetas que se puedan meter en el BODY de la página y que todas las etiquetas tengan su cierre.

var nuevosElementos = $("<div>Elementos que creo en <b>tiempo de ejecución</b>.<h1>En ejecución...</h1></div>");

Esto nos creará en la variable nuevosElementos los elementos HTML que hemos especificado en el string. Luego podríamos hacer lo que queramos con ellos, como colocarlos en la página con el método appendTo(), por ejemplo de esta manera:

nuevosElementos.appendTo("body");

Nota: el método appendTo() no pertenece al Core, pero nos viene bien utilizarlo y así hacer algo con los elementos que acabamos de crear.

Veamos el código completo de una página que hace uso de este ejemplo:

<html>
<head>
   <title>función jquery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   var nuevosElementos = $("<div>Estos elementos ..</b>.<h1>Título...</h1></div>");
   nuevosElementos.appendTo("body");
});

</script>
</head>
<body>
<p>Esto es el cuerpo de la página, que tiene poca cosa...</p>
</body>
</html>

Ahora, dejamos el link para ver el ejemplo en una página aparte.

Función jQuery pasando elementos

Otro posible valor que se le puede enviar a la función jQuery es un elemento o una jerarquía de elementos del DOM, para extenderlos con las funcionalidades que aporta el framework para los elementos.

Por ejemplo:

var documento = $(document.body);
documento.css("background-color", "#ff8833");

Con la primera línea creamos una variable llamada documento, a la que asignamos el valor que devuelve el método $() enviando el parámetro document.body.

Nota: La variable document.body corresponde con un elemento del DOM de Javascript, que crea automáticamente el navegador y hace referencia al documento de la página.

Con ello obtenemos un objeto que es el cuerpo de la página (document.body) al que le hemos agregado todas las funcionalidades del framework jQuery para los elementos.

Así pues, en la línea siguiente, invocamos el método css() sobre la variable "documento", que es el propio documento de la página extendido. Por eso el método css(), que es de jQuery(), funciona sobre ese objeto.

Algo como esto no funcionaría porque estaríamos intentando lanzar un método de jQuery directamente sobre el objeto DOM sin haberlo extendido:

document.body.css("background-color", "#ff8833");

No funcionará porque no podemos llamar a un método jQuery sobre un objeto DOM, si es que no lo hemos extendido con la función $().

Nota: Esta función acepta documentos XML y objetos Window, aunque no son propiamente elementos del DOM.

Podemos ver ahora una página donde se encuentra este ejemplo en marcha.

Función jQuery pasando una función

En la función $() una última posibilidad es pasarle como parámetro una función y entonces lo que tenemos es una función callback que se invoca automáticamente cuando el DOM está listo.

Nota: Ya explicamos lo que era un callback en el artículo Callback de funciones jQuery

En esa función podemos colocar cualquier código, que se ejecutará sólo cuando el DOM está listo para recibir comandos que lo modifiquen. Con ello, esta función nos vale perfectamente para hacer cualquier cosa dentro de la página que afecte al DOM.

Ejemplo:

$(function (){
//Aquí puedo hacer cualquier cosa con el DOM
});

Este callback con la función jQuery $() sería una abreviatura de otro método que hemos visto repetidas veces a lo largo de este manual para definir acciones cuando el DOM está listo:

$(document).ready(function(){
//Aquí puedo hacer cualquier cosa con el DOM
});

Incluso podemos hacer varios callback, para agregar distintas acciones a realizar cuando el DOM está listo, las veces que queramos, igual que cuando definíamos el evento ready() sobre el objeto document.

Podemos ver el código de una página que hace uso de la función dólar, pasando por parámetro una función.

<html>
<head>
   <title>función jquery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>

$(function (){
   var documento = $("p");
   documento.css("background-color", "#ff8833");
});

$(function (){
   var documento = $("b");
   documento.css("color", "#fff");
});

//si colocase aquí este código, no funcionaría, porque el DOM no estaría listo para realizar acciones
//var documento = $("p");
//documento.css("background-color", "#ff8833");

</script>
</head>
<body>
<p><b>Párrafo</b>!!</p>
<p>Otro <b>párrafo</b></p>
</body>
</html>

Se puede ver en marcha en una página aparte.

Hasta aquí hemos visto todas las posibilidades que existen para trabajar con la función jQuery. Realmente a lo largo de este manual ya la habíamos utilizado muchas veces y en lo sucesivocontinuaremos usándola, ya que cualquier cosa que deseemos hacer en una página web va a depender en algún momento de invocar a $() en alguna de sus variantes.