jQuery esencial –Parte 1.
(Este posts está basado en una presentacion powerpoint hecha por Marc Grabanski)
jQuery es una biblioteca javascript diseñada para ocultar los penosos asuntos de incompatibilidades entre navegadores web al tiempo que entrega una solida y reutilizable API (Application Programming Interface).
Nota: Para usar jQuery es necesario saber lo básico de CSS (Cascade Style Sheets)
Evolución de las principales bibliotecas javascript
prototype javascript jquery javascript yui javascript mootools javascript scriptaculous javascript
Fuente: http://google.com/trends –compara cantidad de búsquedas en google
Filosofía tras jQuery
Simplificar la interacción entre HTML y javascript, es decir:
1.- Encontrar algo en HTML
2.- Hacer algo con él
Por ejemplo:
1.- Encontrar todos los elementos div
2.- Agregarles la clase foo
1 2 3 4 5 6 7 8 9 10 | La instrucción jQuery: $("div").addClass('foo'); # resultaría en: <html> <body> <div class="foo">Ejemplo</div> <div class="foo">jQuery</div> </body> </html> |
Método Factory de jQuery
Esencialmente lo que hace jQuery es proveer un objecto llamado jQuery() mediante el cual podemos acceder a todas las funciones que provee la biblioteca. Estas funciones son los métodos del objeto jQuery.
Nota: $() es un alias de jQuery().
Encontramos elementos HTML pasando los selectores CSS apropiados a $()
1 2 3 | $("#myId") $(".myClass") $("table") |
También podemos encadenar selectores:
1 | $("#myId .myClass, table") |
Aquí estamos llegando a todas las tablas que se encuentran dentro de todos los elementos con clase “myClass”. A su vez estos elementos con clases “myClass” deben estar dentro de un elemento con id “myId”.
Nota: Los identificadores id deben ser únicos en cada documento.
Ejemplos de selectores
La gran variedad de selectores con sus modificadores permiten llegar hasta el último rincón de un documento HTML.
1 2 3 4 5 | $("#content") toma el elemento con id "content" $("li:first") toma el primer item li $("tr:odd") toma las filas pares de una tabla $("a[target=_blank]") toma todos los links cuyo target es "_blank" $("form[id=^step]") toma todos los formularios cuyo id empieza con "step" |
Ejemplos en vivo de selectores en jQuery
Visita http://codylindley.com/jqueryselectors/
Más sobre el método Factory de jQuery
También podemos pasar a $() una función para ser ejecutada una vez que la página se haya cargado:
1 2 3 | $(function(){ alert("La página se ha cargado..."); }); |
Nota: Esto es esencialmente lo mismo que:
1 2 3 | $(document).ready(function(){ alert("La página se ha cargado..."); }); |
Esta útima forma es la más vista en Internet. Quizás porque explícitamente indica que se ejecutará cuando el DOM (Document Object Model) se haya cargado completamente –documento listo: $(document).ready(…)
