Me pone programar

Más que me pone, digamos que me gusta y disfruto con ello

Me pone programar

Blog personal sobre PHP, JavaScript, CSS, Estándares, Flash i demás temas interesantes del mundo de la informática e Internet

Que es jQuery. Parte I

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:
  1. <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:
  1. $("p").hide(); // Escondemos todas las p de nuestra web
  2.  
  3. $("#item").hide(); // Escondemos el elemento con id="item"
  4.  
  5. $(".miClase").hide(); // Escondemos los elementos con class="miClase"
  6.  
  7. $("p span").hide(); // Escondemos únicamente todos los span que haya dentro de los p
  8.  
  9. $("p span.miClase").hide(); // Escondemos los span con class="miClase" que haya dentro de p
  10.  
  11. $("p span#item").hide(); // Escondemos el span con id="item" que hay dentro de p
  12.  
  13. $("p > span").hide(); // Esconde los span que son hijos directos de p
  14.  
  15. $("p+div").hide(); //Esconde todos los div que esten precedidos de un p
  16.  
  17. $("p~div").hide(); //Esconde todo los div que hayan sido precedido por p
  18.  
  19. $("input[type=radio]").hide(); // Esconde todos los inputs que sean del tipo radio
  20.  
  21. $("a[href^=http://]").hide(); // Esconde todos los links que su href empiece por http://
  22.  
  23. $("a[href$=.com]").hide(); // Esconde todo los links que su href acabe por .com
  24.  
  25. $("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

Categorías: JavaScript, jQuery
Tags: ,
Comentarios: 34 comentarios »

jQuery UI 1.5

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

Categorías: AJAX, JavaScript, jQuery
Tags: ,
Comentarios: 413 comentarios »