Tutorial rápido de jQuery

El mejor resumen de lo que es jQuery lo podemos encontrar en el lema de su propia página web: “La librería JavaScript para escribir menos y hacer más”. Ampliando algo más esta definición, dejémoslo en que es una forma de convertir el desarrollo de la parte de cliente de una aplicación web en algo mucho más divertido, rápido y sencillo, facilitando la interacción con los elementos del árbol de documento, el manejo de eventos, el uso de animaciones, etc.

Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft, IBM, Amazon, Twitter, WordPress, Mozilla o Drupal.

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestro proyecto. Podemos descargar el script desde su página web, subirlo a nuestro servidor, y ejecutarlo con la etiqueta script:

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

También podemos cargarla directamente desde el CDN que mantiene Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

el de Microsoft:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

o el del propio jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Independientemente de la opción elegida, ya estaremos listos para comenzar a trabajar con la librería. Sin embargo, y aunque no es estrictamente necesario, os aconsejaría tener unos conocimientos básicos de JavaScript primero, conocimientos que podéis obtener con nuestro tutorial de JavaScript. Y ahora, manos a la obra.

El corazón de jQuery es la función sobrecargada del mismo nombre, jQuery, que ofrece distinta funcionalidad dependiendo de los parámetros utilizados. Además, como JavaScript también toma conceptos del paradigma funcional, y las funciones no son más que otro tipo de objeto, la función jQuery cuenta a su vez con distintas propiedades y métodos. La intención de esta decisión de diseño es la de evitar llenar el espacio de nombres global con montones de nombres inútiles esperando a colisionar.

Si queremos escribir menos y que nuestros archivos sean más pequeños, y si no utilizamos ninguna otra librería que pueda causar algún conflicto con este símbolo, también podemos utilizar el alias $ en sustitución de jQuery.

Selectores jQuery

El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.

Los distintos selectores que podemos utilizar son los siguientes:

Selectores básicos

Selector universal: selecciona todos los elementos de la página (CSS 2)

jquery("*")

Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado (CSS 1)

jQuery("div")

Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS 1)

jQuery("div.entrada")

Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado (CSS 1)

jQuery("div#cabecera")

Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas (CSS 1)

jquery("p,div,a")

Selectores de atributos

Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)

jquery("a[rel]")

También se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)

jquery("a[rel='nofollow']")

O que tengan un valor distinto del indicado (jQuery)

jQuery("a[rel!='nofollow']")

Aquellos cuyo valor empieza por una cierta cadena (CSS 3)

jquery("a[href^='http://mundogeek.net/']")

Los que terminan con una cierta cadena (CSS 3)

jquery("a[href$='.com']")

Y los que contienen una cierta cadena (CSS 3)

jquery("a[href*='geek']")

Por último, podemos hacer combinaciones de todo lo anterior (CSS 2)

jquery("a[rel='nofollow'][href]")

Selectores de widgets

Pseudo clase botón: selecciona todos los botones (jQuery)

jquery(":button")

Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)

jquery(":checkbox")

Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery)

jquery(":file")

Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)

jquery(":header")

Pseudo clase imagen: selecciona todas las imágenes (jQuery)

jquery(":image")

Pseudo clase input: selecciona todos los widgets de tipo input (jQuery)

jquery(":input")

Pseudo clase contraseña: selecciona todos los elementos password (jQuery)

jquery(":password")

Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery)

jquery(":radio")

Pseudo clase reset: selecciona todos los elementos reset (jQuery)

jquery(":reset")

Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery)

jquery(":select")

Pseudo clase submit: selecciona todos los elementos submit (jQuery)

jquery(":submit")

Pseudo clase texto: selecciona todos las cajas de texto (jQuery)

jquery(":text")

Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3)

jquery(":checked")

Pseudo clase activo: selecciona todos los elementos que estén activos (CSS 3)

jquery("input:enabled")

Pseudo clase inactivo: selecciona todos los elementos que no estén activos (CSS 3)

jquery("input:disabled")

Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery)

jquery(":hidden")

Pseudo clase visible: selecciona todos los elementos visibles (jQuery)

jquery(":visible")

Selectores de jerarquía

Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)

jquery("div.entrada h2")

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)

jquery("div.entrada > h2")

Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

jquery("tr:nth-child(1)")

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

jquery("tr:first-child")

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

jquery("tr:last-child")

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de otros elementos (CSS 3)

jquery("div:only-child")

Pseudo clase índice: selecciona el elemento con el índice indicado de un grupo de elementos (jQuery)

jquery("td:eq(0)")

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a eq(0) (jQuery)

jquery("td:first)")

Pseudo clase último: selecciona el último elemento de un grupo de elementos (jQuery)

jquery("td:last)")

Pseudo clase mayor que: selecciona todos los elementos con un índice mayor que el indicado en un grupo de elementos (jQuery)

jquery("td:gt(0)")

Pseudo clase menor que: selecciona todos los elementos con un índice menor que el indicado en un grupo de elementos (jQuery)

jquery("td:lt(3)")

Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)

jquery("td:even")

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)

jquery("td:odd")

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3)

jquery("div.entrada ~ p")

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente directo (CSS 2)

jquery("div.entrada + p")

Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

jquery("h2:parent")

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo, incluyendo texto plano (CSS 3)

jquery(":empty")

Otros selectores

Pseudo clase animado: selecciona todos los elementos que están en proceso de animación en este momento (jQuery)

jquery(":animated")

Pseudo clase contiene: selecciona todos los elementos que contengan el texto indicado, directamente o en uno de los hijos (jQuery)

jquery("div:contains('Mundo geek')")

Pseudo clase tiene: selecciona todos los elementos que contengan al menos un elemento que responda al selector indicado (jQuery)

jquery("div:has(h2)")

Pseudo clase negación: selecciona todos los elementos que no cumplan con el selector dado (CSS 3)

jquery("div:not(.entrada)")

Gestionando una colección jQuery

Al llamar a la función jQuery con un selector como argumento, el valor devuelto será otro objeto jQuery representando la colección de elementos DOM seleccionados. Tanto es así, que podremos obtener uno de los elementos utilizando el operador [], como si de un array normal se tratara

jQuery("div.entrada")[0]

y también tenemos acceso a una propiedad length con el número de elementos que contiene la colección

jQuery("div.entrada").length

Otras cosas que podemos hacer con este objeto son añadir elementos a la colección

jQuery("div.entrada").add("div.comentario")

eliminar elementos

jQuery("div.entrada").not("div.destacada")

filtrar elementos con un selector o basándonos en el valor devuelto por una función

jQuery("div.entrada").filter(":has(h2)")

quedarnos con los elementos que contengan otro cierto elemento

jQuery("div.entrada").has("h2")

obtener un sólo elemento, por su índice

jQuery("div.entrada").eq(3)

obtener el primer elemento de la colección

jQuery("div.entrada").first()

obtener el último elemento de la colección

jQuery("div.entrada").last()

crear una sub colección a partir de la original

jQuery("div.entrada").slice(0,5);
jQuery("div.entrada").slice(3);

obtener los descendientes directos

jQuery("div.entrada").children()
jQuery("div.entrada").children("p")

obtener los descendientes directos, incluyendo el texto plano

jQuery("div.entrada").contents()

obtener los hijos que cumplan con un determinado selector

jQuery("div.entrada").find("p")

obtener el hermano siguiente

jQuery("div.entrada").next()

obtener los hermanos siguientes

jQuery("div.entrada").nextAll()

obtener el hermano anterior

jQuery("div.entrada").prev()

obtener los hermanos anteriores

jQuery("div.entrada").prevAll()

obtener todos los hermanos

jQuery("div.entrada").siblings()

obtener el padre de cada elemento

jQuery("div.entrada").parent()

obtener todos los ancestros de cada elemento

jQuery("div.entrada").parents()

crear una copia de la colección

jQuery("div.entrada").clone()

o buscar la posición que ocupa un elemento en la colección (si existe)

jQuery("*").index("div.entrada")

Modificar la página con jQuery

Veamos ahora cómo utilizar jQuery para modificar nuestra página web. Podemos, por ejemplo, modificar el valor de un atributo

jQuery("a#principal").attr("href", "http://mundogeek.net/")

añadir una nueva clase a uno o varios elementos

jQuery("div.entrada:first").addClass("primera")

añadir una propiedad CSS a uno o varios elementos

jQuery("div.entrada").css("border", "1px solid red")

añadir contenido a un elemento

jQuery("div.entrada:first").before("<strong>Destacada</strong>")
jQuery("div.entrada:first").prepend("<strong>Destacada</strong>")
jQuery("div.entrada:first").after("<strong>Destacada</strong>")
jQuery("div.entrada:first").append("<strong>Destacada</strong>")

modificar el contenido de un elemento

jQuery("p").html("<strong>Sustituido</strong>")

eliminar un elemento de la página

jQuery("div.entrada:first").remove()

ocultar un elemento

jQuery("p").hide()

o volver a mostrar un elemento

jQuery("p").show()

Eventos en jQuery

Existen distintas funciones para asignar una función que maneje un evento lanzado por un widget. Para el evento click, al hacer clic sobre un elemento:

jQuery(":button#pulsame").click(function () {
  alert("Has hecho clic");
});

evento submit, cuando se pulsa sobre el botón de enviar de un formulario:

jQuery("#formulario").submit(function() {
  alert("Enviando");
});

evento dblclick, al hacer doble clic sobre un elemento:

jQuery("p:first").dblclick(function () {
  alert("Has hecho doble clic");
});

evento hover, cuando al pasar el ratón por encima de un elemento. Podemos utilizar jQuery(this) para referirnos a este elemento:

jQuery("p:first").hover(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseenter, cuando el cursor entra en un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

evento mouseout, cuando el cursor sale de un elemento

jQuery("p:first").mouseenter(function () {
  jQuery(this).css("border", "1px solid red");
});

jQuery("p:first").mouseout(function () {
  jQuery(this).css("border", "0");
});

evento change, cuando se modifica un elemento:

jQuery(":text#nombre").change(function () {
  alert("Cambiado");
});

evento load, cuando se termina de cargar el elemento:

jQuery(window).load(function () {
  alert("Página cargada");
});

evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las imágenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad JavaScript cuanto antes:

jQuery(document).ready(function () {
  alert("DOM cargado");
});

esto último, al ser esto algo muy común, se puede resumir pasando una función a la función jQuery, directamente:

jQuery(function () {
  alert("DOM cargado");
});

Animaciones con jQuery

jQuery viene con unas pocas animaciones útiles y vistosas por defecto, aunque para sacarle todo el partido probablemente tendremos que recurrir a plugins.

Para hacer un fundido a opaco:

jQuery(function () {  
  jQuery("p").hide();
  jQuery("p").delay(200).fadeIn();
});

En el ejemplo anterior se utiliza delay para hacer pasar un par de segundos y que se vea más claramente el efecto. A esta función se le puede pasar un valor numérico con el número de milisegundos a esperar, o una cadena, como "slow" (lento) o "fast" (rápido).

para hacer un fundido a transparente:

jQuery(":button").click(function () {
  jQuery("p").fadeOut();
});

También podemos cambiar la opacidad de un elemento a cualquier valor intermedio

jQuery(":button").click(function () {
  jQuery("p").fadeTo("slow", 0.5);
});

mostrar los elementos con una animación de deslizamiento de arriba a abajo:

jQuery(function () {
  jQuery("p").hide().delay(200).slideDown();
});

ocultarlos deslizándolos hacia arriba:

jQuery(function () {
  jQuery("p").delay(200).slideUp();
});

mostrarlos u ocultarlos, dependiendo de si se estaban mostrando o no:

jQuery(":button").click(function () {
  jQuery("p").delay(200).slideToggle();
});

Por último, para cualquier otro tipo de animación con propiedades CSS cuyos valores sean numéricos, utilizaríamos:

jQuery(":button").click(function () {
  jQuery("p").animate({opacity:0.50,width:100}, 'slow');
});

jQuery y AJAX

La forma más sencilla de enviar una petición HTTP de forma asíncrona y mostrar el resultado en la página actual es utilizar la función load. Esta se ejecuta sobre el elemento al que se va a añadir la respuesta, y se le pasa como argumento una cadena con el archivo a cargar. Esta cadena puede contener también un selector con el que seleccionar qué elementos queremos mostrar de la respuesta.

jQuery(":button").click(function () {
  $("#citas").load("citas.html li");
});

también se pueden enviar parámetros al documento (se utiliza GET a menos que los datos se manden en forma de objeto):

jQuery(":button#login").click(function () {
  $("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"});
});

e indicar una función a ejecutar cuando se termine de llevar a cabo la petición

jQuery(":button#login").click(function () {
  jQuery("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"}, function(responseText, textStatus, XMLHttpRequest) {
    alert("cargado");
    });
});

También se pueden utilizar los métodos get y post del objeto jQuery, en cuyo caso se nos devolverá unos ciertos datos con los que nosotros mismos tendremos que trabajar para generar la respuesta y mostrarla en nuestro documento actual:

jQuery.get("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

jQuery.post("login.php", {nombre: "zootropo", pass:"contraseña"},
  function(data, textStatus, XMLHttpRequest){
    jQuery("#mensaje").html("Han devuelto: " + data);
  });

Si la respuesta del servidor va a estar en formato JSON (JavaScript Object Notation), muy utilizado actualmente, podemos utilizar el método jQuery.getJSON(), al que se le pasa la URL de la petición y, opcionalmente, cualquier parámetro que se necesite, además de una función de callback que ejecutar cuando se termine con la petición. Este método se encargará de parsear la estructura del objeto JSON devuelta utilizando jQuery.parseJSON(), objeto que estará disponible como primer parámetro de la función de callback.

$.getJSON('tareas.php', function(data, textStatus){
          $.each(data, function(i, tarea){
            $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo("ul#tareas");
          });
        });

El código de este tareas.php podría tener este aspecto:

<?php
header('Content-type: text/javascript');

$bbdd = new mysqli('servidor.com', 'usuario', 'pass', 'tareas');

$query = 'SELECT * FROM tareas';
$tareas = array();
if($resultado = $bbdd->query($query))
  while($tarea = $resultado->fetch_object())
    $tareas[] = $tarea;

$bbdd->close();

echo json_encode($tareas);
?>

Como veis, se utiliza la función json_encode para convertir el array u objeto PHP a formato JSON. Esta función, junto con su complemento, json_encode, se introdujo en PHP en la versión 5.2.0.





Comentarios
  1. Gracias amigo luego lo leo en un fin de semana sirviria bien checarlo.

    Gracias

    Responder

  2. Hidek1

    buenisimo gracias !!!!

    Responder

  3. xir

    gracias, buen trabajo!

    Responder

  4. Curro

    Excelente, muchas gracias

    Aun no lo he leido completo pero me llama la atención que no usas la función “ajax” en la sección de AJAX. ¿por qué es esto?

    Saludos!

    Responder

    • Ya. Pero bueno, casi todo se puede hacer con get y post o con load. Tampoco comento nada de json, por ejemplo, pero sino, no sería un tutorial rápido ;)

      Responder

  5. Guardado para cuando me sirva en el futuro.

    Gracias!

    Responder

  6. Util la chuletilla!!

    Responder

  7. lo miré por arriba, pero resume mucho todas las opciones de jquery que siempre me cuesta encontrar. Creo que si le dieras un poquito más de ‘teórico’ al principio sería muy completo.

    Excelente post!

    Responder

    • Sí, quizás me haya pasado un poco de esquemático en el afán de resumir.

      Si alguno tiene alguna duda con alguna cosa, que me lo diga, y lo intento explicar un poco más.

      Responder

  8. [...] Fuente: Tutorial rápido de jQuery [...]

    Responder

  9. Hetch

    Falto un poco de ajax y json que me parece terminaria de cerrar el minitutorial.

    Excelente entrada. Jquery OWNS.-

    Responder

  10. Esta de puta madre!! (con perdon)
    con tu permiso me lo monto en Scribus en plan chuleta – cheatsheet

    thx

    Responder

  11. ¡Muy bueno! Igual me animo a meterle mano a JQuery. Lo único que no me gusta son los chorizos que salen enlazando llamadas a métodos con el retorno del método anterior.

    Responder

  12. carlos

    en estos días estoy empezando a enredar con jquery y jquery-ui y este tuto me viene fenomenal , como siempre genial!!!!

    Responder

  13. daniel

    Te luciste, con este tutorial me animo a aprender jQuery, no se porque nunca he utilizado ninguna biblioteca… creo que es porque utilizo JavaScript unicamente para validar formularios y tengo por ahí una función que cree hace rato.

    He visto la cantidad de plugins que tiene, para galerías fotográficas, efectos, etc.

    También he querido aprender a manejar Zend Framework, pero pocos tutoriales o recursos en español, unicamente la documentación que no esta del todo terminada, si alguno sabe de unos tutos avise ;)

    Por cierto Zootropo, en el articulo del iPhone 4G se me fue un comentario dos veces, para que lo borres.

    Bueno, mas tarde le doy su buena leída, saludos!

    Responder

  14. Esta apartado de “Tutoriales Rapidos” es excelente.

    Lo que me gustaría saber ahora es de qué forma puedo combinar scripts para reducir las peticiones. Pero supongo que eso es punto aparte.

    Responder

  15. Genial entrada!

    Sirve de gran ayuda como una referencia rápida :D

    Responder

  16. [DoodoM]

    Vaya, jQuery junto con las expresiones regulares era una de esas cosas que se me resistían (o no tenía muchas ganas de investigar), pero ya veo gracias a tu tutorial que no es tan dificil o raro como me parecía en un principio. Además, ahora sé mucho más de Javascript que cuando descubrí jQuery y este tutorial me puede resultar tremendamente útil. ¡Muchas gracias! :D

    Lo que se me siguen resistiendo son las expresiones regulares. Lo que me gustaría comprenderlas y utilizarlas a antojo (y el trabajo que me ahorrarían en algunas circustancias). xD

    Responder

    • Aquí tienes una pequeña entrada sobre expresiones regulares en JavaScript y otra más completa sobre expresiones regulares en Python, a ver si te vale.

      Responder

      • [DoodoM]

        Bueno, en realidad las que más me quitan el sueño son las de PHP y el Notepad++ (en este último para buscar y reemplazar patrones ahorrándome trabajo). Todo esto, me lleva a la pregunta de si (y tengo la sospecha) las expresiones regulares funcionan de distinta manera según el lenguaje de programación en el que se están usando.

        De todos modos echaré un vistazo a las expresiones regulares en Javascript. Seguro que me es muy útil. ¡Gracias por tu encomiable esfuerzo por informar y enseñar!

        Responder

        • Advierto por experiencia: Notepad++ no trata a las expresiones regulares todo lo bien que debería. Tengo un compañero que lo usa en la oficina con profusión, y ha tenido algún que otro problema, sobre todo con los operadores de principio(^) y fin ($) de línea.

          PSPad y SciTe son más estrictos y completos. Bueno, y GVim :)

          Responder

        • Pues sí que varían de un lenguaje a otro, aunque unos se inspiran en otros, y muchos son bastante parecidos. Las más populares yo diría que son las de Perl. Python y PHP, por ejemplo, utilizan expresiones regulares compatibles con Perl. PHP, de hecho, concretamente, usa una librería escrita en C llamada PCRE, o Perl Compatible Regular Expressions.

          Responder

  17. Menda

    Muchas gracias Zootropo. Vendría bien algo así para GWT, o al menos una comparación entre GWT y jQuery para que la gente sepa cuándo usar uno u otro.

    Responder

  18. [...] de Mundo Geek ha preparado para todo mundo una guía de iniciación en jQuery que el mismo llama “Tutorial rápido de jQuery”, por lo que tampoco nos haremos unos expertos en el tema, pero si queremos iniciarnos en ese [...]

    Responder

  19. Muy bueno el tutorial, lo que no entiendo es porque usas el objeto JQuery y no simplemente $, me parece mucho mas practico $(‘input’) que JQuery(‘input’). Y veo que no mencionas el selector mas basico, que es para los ids, el signo de #. $(‘#identificador’).

    un saludo.

    Responder

    • Bueno, ya comento al principio que se puede utilizar indistintamente, siempre y cuando no se esté utilizando otra librería que haga uso del mismo símbolo para otra cosa. He preferido usar jQuery directamente en lugar de $ por eso, por SEO y porque la sintaxis les habría parecido más extraña.

      Sobre el selector por identificador, sí se comenta. Es el cuarto en “Selectores básicos” ;)

      Responder

  20. Gracias!

    Responder

  21. Ya te tengo en mis bookmarks. Imperdible!

    Responder

  22. dannyfilth

    excelente

    Responder

  23. dannyfilth

    Angelverde yo reduzco mi código haciendo una librería propia de mis funciones personalizadas, ejemplo para llamadas ajax, creo un archivo TodasMisFunciones.js, en el:
    function AjaxAvanzado(url,div,cadena,metodo,tipoData){
    var datos = cadena;
    var div=”#”+div;
    $.ajax({
    async:true,
    url: url,
    type: metodo,
    dataType: tipoData,
    data: datos,
    cache: false,
    success: function(respuesta){
    $(div).html(respuesta);
    }
    });
    }

    Responder

    • sdarknot

      dime y k pasa si kiero usar esa funcion pero ya con archivos osea con input file

      Responder

  24. fulgorek

    Excelente artículo!

    Responder

  25. Juvinao

    Excelente. Siempre lo había visto un poco complicado pero ahora empezaré a usarlo

    Responder

  26. buen articulo

    Responder

  27. [...] Acabo de encontrarme mientras leía algunos artículos en Google reader con un artículo de Mundo Geek que seguro que a muchos al igual que a mi le interesa, se trata de un tutorial rápido de jQuery, con una explicación de una frase repasa las propiedades más usadas de jQuery y con las que podrás conseguir efectos realmente impresionantes. Os recomiendo echarle un ojo, Tutorial rápido de jQuery [...]

    Responder

  28. Eres un crack, Zootropo. Enhorabuena por la entrada y gracias por el magnífico manual. La verdad es que nos tienes acostumbrados a entradas de calidad, y justamente éste me ha llamado más la atención porque estoy programando en AJAX (como amateur, claro), y este manual me viene al pelo

    Junto con los otros manuales, éste es mi blog de cabecera para iniciarse en la programación. Reitero que son manuales excelentes para quien no sepa nada y quiera empezar YA a programar.

    De nuevo, gracias y enhorabuena.

    Responder

  29. [...] Tutorial rápido de jQuery – Mundo Geek ¿Te ha gustado?: [...]

    Responder

  30. [...] mejor forma de animarte a leer el pequeño tutorial de jQuery de Mundo geek que enseñarte algunas de las cosas que podemos lograr con unas pocas líneas de [...]

    Responder

  31. [...] con vosotros un tutorial rápido de jQuery para los más impacientes, una forma rápida y abreviada de entender y comenzar a trabajar con [...]

    Responder

  32. [...] y con las que podrás conseguir efectos realmente impresionantes. Os recomiendo echarle un ojo, Tutorial rápido de jQuery Fuente de la noticia: Linwind – De Windows a [...]

    Responder

  33. [...] aprender a trabajar con jQuery y ponerte ya a picar código sin tener que leer demasiado, en mundoGeek nos presentan una magnífica guía de inicio rápido. Vienen explicadas las funciones más [...]

    Responder

  34. [...] queres aprender a traballar con jQuery e porche xa a picar código sen ter que ler demasiado, en mundoGeek preséntannos unha magnífica guía de inicio rápido. Veñen explicadas as funcións máis [...]

    Responder

  35. [...] aprender a trabajar con jQuery y ponerte ya a picar código sin tener que leer demasiado, en mundoGeek nos presentan una magnífica guía de inicio rápido. Vienen explicadas las funciones más [...]

    Responder

  36. LeoValls

    excelente tutorial..
    Es la primera vez que leo de jQuery por recomendación de compañeros de trabajo y me parece que tiene muchisima utilidad.

    un detalle.. no dice (o por lo menos no encontre donde lo decia) como hacer el llamados a las funciones, si desde un o en los eventos de los componentes o en algun otro lugar.. O sea.. un ejemplo practico..

    si ya está mostrado entonces mis disculpas por despistado.. jeje

    Responder

  37. [...] mejor forma de animarte a leer el pequeño tutorial de jQuery de Mundo geek que enseñarte algunas de las cosas que podemos lograr con unas pocas líneas de [...]

    Responder

  38. [...] nuestro tutorial rápido de jQuery ya explicamos cómo enviar peticiones HTTP asíncronas al servidor utilizando distintos métodos de [...]

    Responder

  39. Javier

    Muy bien explicado gracias

    Responder

  40. Hola amigo tengo una duda a serca de jquery con ajax
    tengo que hacer un ejercicio en la cual yo tengo mi libreria de ajax la cual la utilizo para mostrar el contenido de un formulario pero uno de los campos que tengo uso la fecha y le puse un selector de fechas con jquery y no me lo carga cuando me lo manda llamar al formulario por medio de mi libreria ajax que yo crie. si serias tab amable de explicarme o darme una solucion sin mas por el momento muchas gracias.

    Responder

  41. [...] Tutorial rápido de jQuery – Mundo Geek [...]

    Responder

  42. paco

    gracias man… el tuto…. de poca madre. 8-)

    Responder

  43. Juno

    Realmente genial.

    Muchas gracias, y un saludo de un forocochero!

    Responder

  44. Fernando

    Hola, muchas gracias, justo lo que estaba buscando. Es curioso, visito frecuentemente MundoGeek y hoy que necesitaba este tutorial no se me ocurrio buscarlo aca, primero fui a google y me devolvio aquí.

    Tengo una duda, como puedo hacer para postear codigo, asi como ustedes hacen, con los numeritos al costado y en esa presentacion. Si sirve, quiero postearlo en un blog de blooger o Wordprees.

    Responder

  45. carpathos

    exelente, una guia rapida pero muy efectiva, sigamos fomentando el uso de jquery no solo posteando tambien publicando mas maginas desarrolladas con jquery.

    Responder

  46. [...] de Jquery Julio 3, 2010 nicolascoronel Dejar un comentario Ir a los comentarios http://mundogeek.net/archivos/2010/04/21/tutorial-rapido-de-jquery/ Categorías:Uncategorized Comentarios (0) Trackbacks (0) Dejar un comentario [...]

    Responder

  47. [...] la victoria de España ha servido al menos para poder descargar gratis durante 24 horas el libro jQuery: Novice to Ninja, que representaba a España en el particular mundial organizado por SitePoint. [...]

    Responder

  48. dhamaso

    ¿como seleccionar todos los select de un formulario con jquery?
    por que a mi esto no me funciona
    $(“input[type=select]“);

    alguna idea?

    Responder

  49. Adri

    Si te fijas, lo que estás haciendo es seleccionar aquellos elementos input en el que su atributo type sea select

    Pero, select es un elemento, no un atributo, por lo que no va a funcionar.

    Puedes mirar los ejemplos de la documentación de jQuery: http://api.jquery.com/change/

    Para seleccionar los elementos select, añádeles el atributo class especificando un nombre, a tu gusto. En jQuery, utilizarías el siguiente código para seleccionarlos:


    jQuery('select.nombre_class');

    Saludos!

    Responder

  50. Chema

    Me leí el tutorial de la web de jQuery y no entendí nada! pero con el tuyo me ha quedado todo mucho mas claro.
    Muchas gracias!

    Responder

Deja un comentario