Introducción a jQuery

JQuery es una librería javascript para manejar los elementos DOM o CSS de una página HTML. No es una extensa librería para manejar AJAX si no tiene funciones para ayudarnos a escribir javascript de forma mas sencilla. Este post esta basado en Introducción a Jquery de Choan Gálvez, licenciado bajo Creative Commons, si buscan una referencia mas completa puedes visitar el post original.

jquery.jpg

Conceptos Básicos

Primero explicaremos la idea básica de jQuery, esto es el uso de la función $ con lo cual se tiene acceso a los elementos DOM utilizando selectores CSS o, si lo preferimos, XPath.

Pero que significa esto?, bueno típicamente para acceder a un elemento del HTML que tenga como in por ejemplo myelem, se tiene que utilizar getElementById.

  1. <div id="myelem">texto de prueba</div>
  2. <script type="text/javascript">
  3.    myid = document.getElementById("myelem");
  4.    myid.style.color = "blue";

Pero si utilizamos jQuery ahora podemos acceder directamente al elemento utilizando la función $.

  1. <div id="myelem">texto de prueba</div>
  2. <script type="text/javascript">
  3.    $('#myelem').css({'color': 'blue'});

Veamos algunos ejemplos de como accedes a elementos html.

  1. // todos los elementos de tipo 'e'
  2. $('e');
  3. // elementos de tipo 'e' descendientes de elementos de tipo 'f'
  4. $('f e');
  5. // elementos de tipo 'e' hijos de elementos de tipo 'f'
  6. $('f > e');
  7. // elementos con clase 'mycls'
  8. $('.mycls');
  9. // elementos con identificador 'contacts'
  10. $('#contacts');
  11. // elementos de tipo 'e' que contienen  un atributo 'foo'
  12. $('e[@foo]');
  13. // elementos de tipo 'e' que contienen
  14. // un atributo 'foo' con valor 'bar'
  15. $('e[@foo="bar"]');

Manipulación de Elementos

Otra de las carácteristicas de jQuey es que podemos manipulas las propiedades de los elementos a los cuales hemos accedido.

  1. // añadir clases a un elemento
  2. $('a').addClass('alt');
  3. // quitar clases a un elemento
  4. $('tr').removeClass('nclass');
  5. // asignar reglas de estilo
  6. $('td').css({'border': '4px solid red', 'color': 'red'});

Manejadores de eventos

Los métodos bind y unbind nos permiten asignar y deasignar manejadores de eventos. En el módulo de eventos avanzados, disponemos de algunos extras, como click, unclick, oneclick. Por ejemplo:

  1. # // al hacer click sobre la cabecera de una tabla
  2. # // se disparará la función '$.sortableTable.onclickSort'
  3. # $('thead th').bind('click', $.sortableTable.onclickSort);

Adicionalmente se tiene otro método de nombre hover, acepta como parámetros dos funciones. La primera de ellas se ejecutará cuando el ratón se posicione sobre el elemento, la segunda, cuando salga de él.

  1. $('tbody tr').hover(
  2.    function(e) {
  3.       $(this).addClass('over');
  4.    },
  5.    function(e) {
  6.       $(this).removeClass('over');
  7.    }
  8. );

Comentarios Total 5 comentarios


Dizque » De tontos, tontetes y caraduras
Publicado: 07/12/2006 3:29 pm

[…] Últimamente me he encontrado con una cosita de los más interesante, vean ustedes este texto extraído de http://blog.unijimpe.net/introduccion-a-jquery/: […]

choan
Publicado: 07/12/2006 3:32 pm

Mi opinión sobre este artículo: De tontos, tontetes y caraduras.

Salud.

Yigly
Publicado: 14/12/2006 4:43 pm

Es lo q andaba buscando!, es muy bueno para los q recien comenzamos el proceso de aprendizaje de la tecnologia Ajax.

Tomas
Publicado: 05/11/2009 6:51 am

Muy buena la introduccion!!

Una correcion, donde dice “Pero que significa esto?, bueno típicamente para acceder a un elemento del HTML que tenga como in por ejemplo myelem, se tiene que utilizar getElementById.”

No deberia ir ID, en vez de IN?

Saludos

Damian
Publicado: 18/12/2009 9:37 am

Tengo un problema con los navegadores no se si sera por la versión de jQuery que tengo instalada pero la cosa que trato de hacer esto:
$(“#boton”).click(showHint);

Es un boton con el id=”boton” y una funcion que se ejectua al hacer click, me funciona solo en Internet Explorer y no en otros navegadores.
La versión de jQuery que tengo es jQuery 1.2.6.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)