Introducción a jQuery

18/11/2006
2:22 pm
unijimpe

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.

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.

HTML:

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

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

HTML:

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

Veamos algunos ejemplos de como accedes a elementos html.

JavaScript:

// todos los elementos de tipo 'e'
$('e');
// elementos de tipo 'e' descendientes de elementos de tipo 'f'
$('f e');
// elementos de tipo 'e' hijos de elementos de tipo 'f'
$('f> e');
// elementos con clase 'mycls'
$('.mycls');
// elementos con identificador 'contacts'
$('#contacts');
// elementos de tipo 'e' que contienen un atributo 'foo'
$('e[@foo]');
// elementos de tipo 'e' que contienen
// un atributo 'foo' con valor 'bar'
$('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.

JavaScript:

// añadir clases a un elemento
$('a').addClass('alt');
// quitar clases a un elemento
$('tr').removeClass('nclass');
// asignar reglas de estilo
$('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:

JavaScript:

# // al hacer click sobre la cabecera de una tabla
# // se disparará la función '$.sortableTable.onclickSort'
# $('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.

JavaScript:

$('tbody tr').hover(
function(e) {
$(this).addClass('over');
},
function(e) {
$(this).removeClass('over');
}
);

Posts Relacionados

General, HTML, Javascript

Total de Comentarios: 3

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/: [...]