19/10/2008 a las 08:00 por Shox
Desde mis inicios en jQuery, había visitado la web visualjquery como página de consulta y referencia para documentarme. Desde hace ya muchas versiones quedó inalterable a las nuevas funcionalidades que iban apareciendo, y tenia que visitar la no-tan-clara página de referencia oficial de jQuery.
Parece que por fin se han actualizado con las nuevas funcionalidades (versión 1.2.6) y ademas incluye un buscador instantaneo que por lo poco que he utilizado va genial.
VisualjQuery
29/06/2008 a las 07:28 por Shox
jQuery es un framework de JavaScript para facilitar, entre otros, el acceso a los elementos del DOM, los efectos y sobretodo las llamadas en AJAX. jQuery podría ser otro framework más como script.aculo.us, MooTools, YUI pero en cambio disponemos una gran potencia con una facilidad mucho mayor que sus competidores.
Primero de todo deberemos de incluir la libreria en nuestra web: por ejemplo
HTML:
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
Primero de todo vamos a seleccionar un elemento de nuestro HTML, y por ejemplo, esconderlo. Utilizaremos la función hide() que, efectivamente, esconde dicho elemento html, pero ahora nos fijaremos más en como acceder al árbol DOM de HTML.
JavaScript:
-
$("p").hide(); // Escondemos todas las p de nuestra web
-
-
$("#item").hide(); // Escondemos el elemento con id="item"
-
-
$(".miClase").hide(); // Escondemos los elementos con class="miClase"
-
-
$("p span").hide(); // Escondemos únicamente todos los span que haya dentro de los p
-
-
$("p span.miClase").hide(); // Escondemos los span con class="miClase" que haya dentro de p
-
-
$("p span#item").hide(); // Escondemos el span con id="item" que hay dentro de p
-
-
$("p > span").hide(); // Esconde los span que son hijos directos de p
-
-
$("p+div").hide(); //Esconde todos los div que esten precedidos de un p
-
-
$("p~div").hide(); //Esconde todo los div que hayan sido precedido por p
-
-
$("input[type=radio]").hide(); // Esconde todos los inputs que sean del tipo radio
-
-
$("a[href^=http://]").hide(); // Esconde todos los links que su href empiece por http://
-
-
$("a[href$=.com]").hide(); // Esconde todo los links que su href acabe por .com
-
-
$("a[href*=www]").hide(); // Esconde todo los links que en su href aparezca "www"
Como podemos ver, jQuery siempre (o casi siempre, ya lo veremos más adelante) actua sobre elementos de HTML, seleccionandolos en lo que llamaremos selector, y le aplicaremos funciones:
$(selector).funcion();
Ya veremos más adelantes que la selección de elementos del DOM es más potente aun, y que las funcionalidades, a parte de que se pueden unir, son casi infinitas.
jQuery
29/06/2008 a las 06:27 por Shox
Reciendtemente fue presentada la nueva versión de jQuery UI, donde principalmente se unificant y facilitan las cosas. Entremos un poco en detalle:
Se ha echo refactoring de los métodos utilizados, por ejemplo .dragable() unifica todas las funcionalidades de los drag&drop. Para ello se elimina la necesidad de ciertas extensiones que ahora vienen en el core de jQuery (como jquery.dimension.js) o jQuery UI (como ui.mouse.js). También se facilita la creación de generar nuevos plugins para jQuery UI.
Nuevos y mejores efectos. Si algo le faltaba a jQuery en efectos con los que competir con script.aculo.us. Ahora se soluciona añadiendo nuevos y mejores efectos, de los cuales, algunos no estan ni en el framework que comentaba. Personalmente me ha dejado impresionado el efecto de explsión en varios trozos. No dudeis en verlos en acción: jQuery UI en acción
29/05/2008 a las 11:45 por Shox
Google ha creado una nueva utilidad para los developers, que también va en beneficio de los usuarios finales. Se trata de Google AJAX Libraries API, una API que nos permite cargar desde el propio CDN de Google, las librerías más utilizadas.
Actualmente soporta jQuery, prototype, script.aculo.us, dojo y MooTools, pero están abiertos a peticiones para otros frameworks.
Ventajas
- No tenemos que hospedar la librería en cuestión
- Tendremos un CDN para estos archivos, mucho más rápido (se supone) que nuestro servidor
- Como el archivo será el mismo en diferentes webs que utilicen la API, el cache del navegador ya la tendrá guardada.
Inconvenientes
- No tenemos control sobre los archivos, por lo que si fallara el CDN (a parte de ser el fin del mundo) nuestra web no funcionaría correctamente
¿Como usarlo?
Hay dos modos para utilizarlo, utilizando la propia API de google, o llamando directamente los archivos:
-Llamando al archivo directamente, en versión comprimida y sin comprimir (por ejemplo con jQuery):
HTML:
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
HTML:
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js" type="text/javascript"></script>
-Utilizando la API de Google:
JavaScript:
-
google.load("jquery", "1.2", {uncompressed:true});
Google AJAX Libraries API