La función jQuery

JQuery

Para incluir jQuery en tu proyecto lo único que necesitás es hacer una llamada en tu página al archivo jquery.js.

<script src="jquery.js"></script>

La función jQuery

Lo más importante es saber cómo seleccionar elementos HTML con jQuery. jQuery es una función a la que se le pueden pasar argumentos, del cual el más común es un string con un selector CSS. Estos selectores permiten indicar cuáles son los elementos HTML deseados para aplicarles un comportamiento.

Si queremos seleccionar todos los párrafos lo haríamos de la siguiente manera:

jQuery('p');

Por suerte, como jQuery utiliza los selectores de la misma forma que CSS, el llegar a los elementos es realmente simple, si ya tenemos conocimientos de CSS.

Para agilizar las cosas, cuando trabajamos con jQuery, existe una forma abreviada de llamar al método jQuery: utilizando el símbolo "$". Por lo tanto la anterior línea de código la haríamos de la siguiente forma:

$('p');

Para obtener la misma funcionalidad con JavaScript tendríamos que hacer lo siguiente:

document.getElementsByTagName('p');

Formas de selección:

Elemento: $('tag html') - ejemplo $('blockquote');

ID: $('#id') - ejemplo $('#contenedor');

Clase: $('.clase') - ejemplo $('.importante');

También podemos hacer una conjunción de varias de estas formas, para lograr un selector realmente complejo:

// selecciona el span marcado con clase actual,

// dentro de una etiqueta a

// dentro de un div con ID navegación

$('div#navegacion a span.actual');

Para asegurarnos que el código se ejecute una vez que la página esté correctamente cargada, podemos hacer uso del evento ready (esto nos puede evitar muchos problemas a futuro):

$( document ).ready(function() {

// código

});

Propiedades y atributos

Ahora que ya sabemos seleccionar elementos, es momento de hacer algo con ellos. Hay varias funciones que podemos aplicar y la forma de utilizarlas es agregándolas al final del elemento seleccionado. Por ejemplo, para cambiar el color del texto de los elementos "p", tenemos que hacer lo siguiente:

// todos los elementos p tendrán el texto en color rojo

$('p').css('color', 'red');

Si en cambio queremos modificar la clase de un elemento, podemos utilizar la función addClass() (removeClass nos permite quitar una clase):

$('a').addClass('importante');

Si queremos saber

...