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: ,

Deja tu comentario

Nota: Comentarios moderados. En breve será publicado el tuyo.