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.
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");
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.
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 $().
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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...