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>
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.
No hay comentarios:
Publicar un comentario