miércoles, 8 de julio de 2009

jQuery Introducción

jQuery es una biblioteca o Framework de JavaScript, creada por John Resig, que nos facilita a los desarrolladores WEB la manera de interactuar con los documentos HTML.

En este artículo intentaré explicar alguna de sus principales características, y lo haré de la forma más práctica posible (usando ejemplos), que a mi entender es lo más productivo, y como es mi blog, jejejejej, ¡Así se hará!.

jQuery, Principales Características:

  • Selección de elementos.
  • Manipulación de elementos DOM.
  • Manejo de Eventos.
  • Manipulación de CSS (Hojas de estilo).
  • Desarrollo de Efectos y Animaciones.
  • Interacción con la Tecnología AJAX.
  • Soporte de Extensiones.
  • Compatibilidad con los navegadores más populares (Internet Explorer 6+, Firefox 2.0+, Safari 2.0.2+, Google Chrome y Opera 9+).

Por cierto, Microsoft añadirá de serie a jQuery en el IDE de Visual Studio y la usará junto con los Frameworks ASP.NET AJAX y ASP.NET MVC.

Como Adicionar jQuery a tu Página WEB

jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes del DOM, por lo que adicionar jQuery a una página es muy sencillo:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server/>"

<script src="scripts/jquery.js" type="text/javascript" </script>

</head>

DOM, Selector de Elementos

Lo primero, antes de comenzar, es tener en cuenta 2 aspectos que serán usados:

  1. La función $() (un alias de jQuery()) recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la expresión.
  2. La función $() siempre devuelve un arreglo.

Entremos en materia, y como prometí hagámoslo sobre ejemplos:

Ejemplo

Descripción

$("#txtNombre")

Devolverá el elemento con id="txtNombre"

$("div")

Devolverá un arreglo con todos los elementos div de la página.

$(".grisClaro")

Devolverá un arreglo con todos los elementos, que su estilo CSS (cssClass) sea grisClaro.

$(".grisClaro.rojoTexto")

Devolverá un arreglo con todos los elementos, que tengan ambos estilos CSS: grisClaro y rojoTexto.

$("div.grisClaro")

Devolverá todos los div con cssClass = grisClaro.

$("span, div, .grisClaro")

Pueden combinarse varias selecciones separándolas por coma. Devolverá la unión de los resultados individuales. Todos los span + los div + cssClass grisClaro.

$("#divMain input")

Devolverá todos los input que están dentro de el elemento con id = divMain.

 $("*")

Devolverá todos los elemento incluidos en el head y body de la página.

Una vez obtenidos los nodos o elementos, se les puede aplicar cualquiera de las funciones que facilita la librería, veamos un ejemplo:

$("#txtNombre").css("border","3px solid blue");

Hasta aquí lo básico de los selectores, en realidad el poder de los selectores con jQuery abarca mucho más, pero el objetivo de este post es solo dar una idea general, y que sirva para enganchar a más de uno a este fantástico Framework JavaScript.

De todas formas, los invito a que escriban algún comentario a modo de ejemplo, que sirva para enriquecer aun más este post.

Una ves llegado a este punto es indispensable hablar sobre los filtros jQuery, me comprometo a publicar en breve sobre este y otros temas de jQuery.

Les invito además a que profundicen sobre selectores en jQuery Selectors y Ejemplos en acción. Y para los mas exigentes no dejen de leerse jQuery in Action.

Próximos blogs sobre jQuery:

3 comentarios:

  1. Muy buena la tabla donde defines los métodos más usados para obtener los elementos salvo un par de cosillas:
    1.- CssClass es propio y exclusivo de .Net no así jQuery, podrías agregar otros casos como class (css) o className (js)
    2.- Alguien que no conozca algo de jQuery no logrará entender que intentas decir con "devolverá un areglo" imagino que sea un array o algún tipo de colección a lo que llamas areglo

    ResponderEliminar
  2. Valida tu aclaración, lo tendré en cuenta para la segunda parte de este mismo tema.

    salu2,
    Derbis

    ResponderEliminar
  3. Otro ejemplo a tener en cuenta:

    Tengo:
    [div id="PrecioDetail"]
    [div class="PieResultado"]
    [select]
    [/select]
    [/div]
    [/div]

    Para obtener el valor del select seria así:
    $("#PrecioDetail > .PieResultado > select").val();

    La lectura sería; selecciona del elemento con id= PrecioDetail el o los elementos hijos que tengan la clase PieResultado y a su ves el hijo de este que sea de tipo select, y al encontrarlos. devuélveme el valor del primero de los elementos encontrados.

    ResponderEliminar