viernes, 12 de septiembre de 2014

Otros usos de la función $() - I

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. 

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.

No hay comentarios:

Publicar un comentario