Ahora que hemos cubierto la gama de funciones disponibles para nosotros con jQuery, podemos examinar cómo poner la biblioteca en acción. Para empezar, necesitamos una copia de jQuery.
El sitio oficial de jQuery (http://jquery.com/) siempre tiene la versión más actualizada y estable de la biblioteca, que se puede descargar directamente desde la página principal del sitio. Varias versiones de jQuery pueden estar disponibles en cualquier momento; la versión más apropiada para nosotros como desarrolladores de sitios será la última versión sin comprimir de la biblioteca. Esta puede ser reemplazada por una versión comprimida en entornos de producción.
Como la popularidad de jQuery ha crecido, las empresas han vuelto al archivo libremente disponible a través de sus redes de distribución de contenido (CDN).
Lo más notable es que Google (http://code.google.com/apis/ajaxlibs/documentation/) y Microsoft (http://www.asp.net/ajax/cdn) ofrecen el archivo en poderosos servidores de baja latencia distribuidos en todo el mundo para una descarga rápida independientemente de la ubicación del usuario.
Mientras que una copia CDNhosted de jQuery tiene ventajas de velocidad debido a la distribución del servidor y el almacenamiento en caché, el uso de una copia local puede ser conveniente durante el desarrollo. A lo largo de este libro usaremos una copia del archivo almacenado en nuestro propio sistema, que nos permitirá ejecutar nuestro código, ya sea que esté conectado a Internet o no.
Descargando jQuery
No se requiere instalación. Para usar jQuery, solo necesitamos una copia pública del archivo, si esa copia está en un sitio externo o el nuestro. Como JavaScript es un lenguaje interpretado, no hay ninguna compilación o fase de construcción para la cual preocuparse. Siempre que necesitamos una página para tener jQuery disponible, simplemente nos referiremos a la ubicación del archivo desde un elemento <script> en el documento HTML.El sitio oficial de jQuery (http://jquery.com/) siempre tiene la versión más actualizada y estable de la biblioteca, que se puede descargar directamente desde la página principal del sitio. Varias versiones de jQuery pueden estar disponibles en cualquier momento; la versión más apropiada para nosotros como desarrolladores de sitios será la última versión sin comprimir de la biblioteca. Esta puede ser reemplazada por una versión comprimida en entornos de producción.
Como la popularidad de jQuery ha crecido, las empresas han vuelto al archivo libremente disponible a través de sus redes de distribución de contenido (CDN).
Lo más notable es que Google (http://code.google.com/apis/ajaxlibs/documentation/) y Microsoft (http://www.asp.net/ajax/cdn) ofrecen el archivo en poderosos servidores de baja latencia distribuidos en todo el mundo para una descarga rápida independientemente de la ubicación del usuario.
Mientras que una copia CDNhosted de jQuery tiene ventajas de velocidad debido a la distribución del servidor y el almacenamiento en caché, el uso de una copia local puede ser conveniente durante el desarrollo. A lo largo de este libro usaremos una copia del archivo almacenado en nuestro propio sistema, que nos permitirá ejecutar nuestro código, ya sea que esté conectado a Internet o no.
Configurando jQuery En Un Documento HTML
Hay tres piezas para la mayoría de los ejemplos de uso de jQuery: el documento HTML, archivos de estilo CSS y archivos JavaScript para actuar en él. Para nuestro primer ejemplo, utilizaremos una página con un extracto de uno de nuestro artículos que tiene varias clases aplicadas a partes de la misma. Esta página incluye una referencia a la última versión de la librería jQuery, que hemos descargado, renombrada jquery.js, y esta ubicada en nuestro directorio de proyectos local, de la siguiente manera:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Textos con fondo y sin fondo</title>
<link rel="stylesheet" href="01.css">
<script src="jquery.js"></script>
<script src="01.js"></script>
</head>
<body>
<h1>Texto Con Fondo y Sin Fondo</h1>
<div>Por Miguel Santisteban</div>
<div class="chapter" id="chapter-1">
<p>
Este es un texto sin fondo
</p>
<div class="poem">
<h3 class="poem-title">Texto Con Fondo</h3>
<div class="poem-stanza">
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
</div>
</div>
<p>Texto Sin Fondo
</p>
<div class="poem">
<h3 class="poem-title">TEXTO CON FONDO 2</h3>
<div class="poem-stanza">
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
<div>
Texto Con Fondo
</div>
</div>
</div>
</div>
</body>
</html>
Inmediatamente después del preámbulo HTML normal, se carga la hoja de estilo. Para este ejemplo, utilizaremos lo siguiente:Rutas de los Archivos
El diseño real de los archivos en el servidor no importa. Las referencias de un archivo a otro solo necesitan ser ajustados para coincidir con la organización que elegimos.
En la mayoría de los ejemplos de este site, usaremos caminos relativos para referenciar archivos (../images/foo.png) en lugar de caminos absolutos (/ images / foo.png).
Esto permitirá que el código se ejecute localmente sin la necesidad de un servidor web.
body {
background-color: #fff;
color: #000;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin-bottom: .2em;
}
.poem {
margin: 0 2em;
}
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
margin: 0.5em 0;
padding: 0.5em;
}
Después de que se hace referencia a la hoja de estilo, se incluyen los archivos JavaScript. Es importante que la etiqueta de script para la biblioteca jQuery se coloque antes de la etiqueta para nuestros scripts personalizados; de lo contrario, el marco jQuery no estará disponible cuando nuestro código intente hacer referencia a él.
A lo largo del resto de este tutorial, sólo se imprimirán las partes relevantes de los archivos HTML y CSS. Los archivos en su totalidad estaran disponibles en el link de descarga suministrado al final de cada Artículo.
Ahora tenemos una página que se parece a la siguiente captura de pantalla:
Usaremos jQuery para aplicar un nuevo estilo al texto.
Este ejemplo es para demostrar un uso simple de jQuery. En situaciones del mundo real, este tipo de estilo podría ser realizado únicamente con CSS.
Adicionando nuestro código jQuery:
Nuestro código personalizado aparecerá en el segundo, actualmente vacío, archivo JavaScript que incluimos desde el HTML usando <script src = "01.js"> </ script>. Para este ejemplo, sólo necesitamos tres líneas de código, de la siguiente manera:$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
}); Encontrando el Texto a utilizar por jQuery:
La operación fundamental en jQuery es seleccionar una parte del documento. Esto se hace con la función $ (). Normalmente, se necesita una cadena como parámetro, que puede contener cualquier expresión del selector CSS. En este caso, queremos encontrar todos los elementos <div> en el documento que tienen la clase de "poem" aplicada a ellos, por lo que el selector es muy simple. Sin embargo, cubriremos opciones mucho más sofisticadas a lo largo del Tutorial. Pasaremos por muchas formas de localizar partes de un documento en los próximos tutoriales.
Cuandoes llamada la función $ (), esta devuelve una nueva instancia de objeto jQuery, que es el bloque básico con el que trabajaremos a partir de ahora. Este objeto encapsula cero o más elementos DOM, y nos permite interactuar con ellos de muchas maneras diferentes. En este caso, deseamos modificar la apariencia de estas partes de la página, y lo lograremos cambiando las clases aplicadas al texto.
Inyectando la nueva clase
El método .addClass (), como la mayoría de los métodos de jQuery, se denomina auto-descriptivo; esta aplica una clase CSS a la parte de la página que hemos seleccionado. Su único parámetro es el nombre de la clase a añadir. Este método y su contraparte, .removeClass (), nos permitirán observar fácilmente jQuery en acción mientras exploramos las diferentes expresiones selectoras disponibles para nosotros. Por ahora, nuestro ejemplo simplemente agrega la clase highlight, que nuestra hoja de estilo ha definido como texto en cursiva con un fondo gris y un borde.
Tenga en cuenta que no es necesario iterar(insistir) para agregar la clase a todas las estrofas del texto. Como hemos comentado, jQuery utiliza iteración implícita dentro de métodos como .addClass(), por lo que una sola llamada de función es todo lo que se necesita para alterar todas las partes seleccionadas del documento.
Ejecutando el Código
Tomados juntos, $ () y .addClass () son suficientes para lograr nuestro objetivo de cambiar la apariencia del texto. Sin embargo, si esta línea de código se inserta solo en el encabezado del documento, no tendrá ningún efecto. El código JavaScript generalmente se ejecuta tan pronto como se encuentra en el navegador, y en el momento en que se está procesando el encabezado, no hay ningún código HTML disponible para el estilo. Debemos retrasar la ejecución del código hasta que el DOM esté disponible para nuestro uso.
Con la construcción $ (document) .ready (), jQuery nos permite programar llamadas de función para disparar una vez que se carga el DOM, sin necesariamente esperar a que las imágenes se procesen completamente. Si bien esta programación de eventos es posible sin la ayuda de jQuery, $(document) .ready() proporciona una solución de navegación cruzada especialmente elegante que:
- Utiliza las implementaciones de DOM nativas del navegador cuando están disponibles y agrega un controlador de eventos window.onload como red de seguridad.
- Permite múltiples llamadas a $(document) .ready() y las ejecuta en el orden en que se les llama
- Ejecuta las funciones pasadas por $ (document) .ready () incluso si se agregan después de que el evento del navegador ya haya ocurrido
- Gestiona la programación de eventos de forma asincrónica para permitir que los scripts lo retrasen si es necesario
- Simula un preparado evento DOM en algunos navegadores más antiguos comprobando repetidamente la existencia de un método DOM que normalmente se encuentra disponible al mismo tiempo que el DOM
function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
El método también puede aceptar una función anónima (a veces también llamada función lambda), de la siguiente manera:
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});Este lenguaje de función anónimo es conveniente en el código jQuery para los métodos que toman una función como un argumento cuando esa función no es reutilizable. Además, el cierre que crea puede ser una herramienta avanzada y poderosa. Sin embargo, también puede tener consecuencias no deseadas y ramificaciones en el uso de la memoria, si no se trata con cuidado.
El Producto Final
Ahora que nuestro JavaScript está en su lugar, la página se ve similar a la siguiente captura de pantalla:
Simple JavaScript vs jQuery
Incluso una tarea tan simple como esto puede ser complicada sin jQuery a nuestra disposición. En JavaScript, podemos agregar la clase resaltada como se muestra en el siguiente fragmento de código:
window.load = function (){
var divs = document.getElementsByTagName('div');
for(var i = 0; i < div.lenght; i++){
if (hasclass(divs[i], 'poem-stanza')
&& !hasclass(divs[~i], 'highlight') ){
divs[i].className + = 'highlight';
}
}
function hasclass (elem, cs){
var reClass = new RegExp('' + '');
return reClass.test('' + elem.ClassName + '');
}
};
A pesar de su longitud, esta solución no maneja muchas de las situaciones que jQuery cuida por nosotros, como las siguientes:
• Respetar adecuadamente a otros controladores de eventos window.onload,
• Actuar tan pronto como el DOM esté listo,
• Optimización de la recuperación de elementos y otras tareas con métodos DOM modernos.
Podemos ver que nuestro código basado en jQuery es más fácil de escribir, más fácil de leer y más rápido de ejecutar que su simple JavaScript equivalente.
• Respetar adecuadamente a otros controladores de eventos window.onload,
• Actuar tan pronto como el DOM esté listo,
• Optimización de la recuperación de elementos y otras tareas con métodos DOM modernos.
Podemos ver que nuestro código basado en jQuery es más fácil de escribir, más fácil de leer y más rápido de ejecutar que su simple JavaScript equivalente.
Post A Comment:
0 comments: