Вы находитесь на странице: 1из 39

Buscar

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:

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.


4.2/jquery.min.js"></script>

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

el de Microsoft:

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-


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

o el del propio jQuery

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://code.jquery.com/jquery-


1.4.2.min.js"></script>

<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)

view plaincopy to clipboardprint?

1. jquery("*")

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

view plaincopy to clipboardprint?

1. jQuery("div")

jQuery("div")

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

view plaincopy to clipboardprint?

1. jQuery("div.entrada")

jQuery("div.entrada")

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


indicado (CSS 1)

view plaincopy to clipboardprint?

1. jQuery("div#cabecera")

jQuery("div#cabecera")

Grupos de selectores: se puede combinar el resultado de varios selectores distintos


separándolos con comas (CSS 1)

view plaincopy to clipboardprint?

1. jquery("p,div,a")

jquery("p,div,a")

Selectores de atributos

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

view plaincopy to clipboardprint?

1. jquery("a[rel]")

jquery("a[rel]")

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

view plaincopy to clipboardprint?


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

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

O que tengan un valor distinto del indicado (jQuery)

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

Los que terminan con una cierta cadena (CSS 3)

view plaincopy to clipboardprint?

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

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

Y los que contienen una cierta cadena (CSS 3)

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

Selectores de widgets

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

view plaincopy to clipboardprint?

1. jquery(":button")
jquery(":button")

Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)

view plaincopy to clipboardprint?

1. jquery(":checkbox")

jquery(":checkbox")

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

view plaincopy to clipboardprint?

1. jquery(":file")

jquery(":file")

Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)

view plaincopy to clipboardprint?

1. jquery(":header")

jquery(":header")

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

view plaincopy to clipboardprint?

1. jquery(":image")

jquery(":image")

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

view plaincopy to clipboardprint?

1. jquery(":input")

jquery(":input")

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

view plaincopy to clipboardprint?

1. jquery(":password")

jquery(":password")

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


view plaincopy to clipboardprint?

1. jquery(":radio")

jquery(":radio")

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

view plaincopy to clipboardprint?

1. jquery(":reset")

jquery(":reset")

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

view plaincopy to clipboardprint?

1. jquery(":select")

jquery(":select")

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

view plaincopy to clipboardprint?

1. jquery(":submit")

jquery(":submit")

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

view plaincopy to clipboardprint?

1. jquery(":text")

jquery(":text")

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

view plaincopy to clipboardprint?

1. jquery(":checked")

jquery(":checked")

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

view plaincopy to clipboardprint?


1. jquery("input:enabled")

jquery("input:enabled")

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

view plaincopy to clipboardprint?

1. jquery("input:disabled")

jquery("input:disabled")

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

view plaincopy to clipboardprint?

1. jquery(":hidden")

jquery(":hidden")

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

view plaincopy to clipboardprint?

1. jquery(":visible")

jquery(":visible")

Selectores de jerarquía

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


1)

view plaincopy to clipboardprint?

1. jquery("div.entrada h2")

jquery("div.entrada h2")

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

view plaincopy to clipboardprint?

1. jquery("div.entrada > h2")

jquery("div.entrada > h2")

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

view plaincopy to clipboardprint?


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

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

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

view plaincopy to clipboardprint?

1. jquery("tr:first-child")

jquery("tr:first-child")

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

view plaincopy to clipboardprint?

1. jquery("tr:last-child")

jquery("tr:last-child")

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

view plaincopy to clipboardprint?

1. jquery("div:only-child")

jquery("div:only-child")

Pseudo clase índice: selecciona el elemento con el índice indicado de un grupo de


elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:eq(0)")

jquery("td:eq(0)")

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos.


Equivale a eq(0) (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:first)")

jquery("td:first)")

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

view plaincopy to clipboardprint?


1. jquery("td:last)")

jquery("td:last)")

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

view plaincopy to clipboardprint?

1. jquery("td:gt(0)")

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)

view plaincopy to clipboardprint?

1. jquery("td:lt(3)")

jquery("td:lt(3)")

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

view plaincopy to clipboardprint?

1. jquery("td:even")

jquery("td:even")

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos


(jQuery)

view plaincopy to clipboardprint?

1. jquery("td:odd")

jquery("td:odd")

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de


otro elemento (CSS 3)

view plaincopy to clipboardprint?

1. jquery("div.entrada ~ p")

jquery("div.entrada ~ p")

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente


directo (CSS 2)
view plaincopy to clipboardprint?

1. jquery("div.entrada + p")

jquery("div.entrada + p")

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

view plaincopy to clipboardprint?

1. jquery("h2:parent")

jquery("h2:parent")

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

view plaincopy to clipboardprint?

1. jquery(":empty")

jquery(":empty")

Otros selectores

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

view plaincopy to clipboardprint?

1. jquery(":animated")

jquery(":animated")

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

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

1. jquery("div:has(h2)")

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

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

1. jQuery("div.entrada")[0]

jQuery("div.entrada")[0]

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

view plaincopy to clipboardprint?

1. jQuery("div.entrada").length

jQuery("div.entrada").length

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

view plaincopy to clipboardprint?

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

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

eliminar elementos

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?


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

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

quedarnos con los elementos que contengan otro cierto elemento

view plaincopy to clipboardprint?

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

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

obtener un sólo elemento, por su índice

view plaincopy to clipboardprint?

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

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

obtener el primer elemento de la colección

view plaincopy to clipboardprint?

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

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

obtener el último elemento de la colección

view plaincopy to clipboardprint?

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

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

crear una sub colección a partir de la original

view plaincopy to clipboardprint?

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

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

obtener los descendientes directos

view plaincopy to clipboardprint?

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

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

obtener los descendientes directos, incluyendo el texto plano

view plaincopy to clipboardprint?

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

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

obtener los hijos que cumplan con un determinado selector

view plaincopy to clipboardprint?

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

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

obtener el hermano siguiente

view plaincopy to clipboardprint?

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

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

obtener los hermanos siguientes

view plaincopy to clipboardprint?

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

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

obtener el hermano anterior

view plaincopy to clipboardprint?

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

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

obtener los hermanos anteriores

view plaincopy to clipboardprint?

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

obtener todos los hermanos

view plaincopy to clipboardprint?

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

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

obtener el padre de cada elemento

view plaincopy to clipboardprint?

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

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

obtener todos los ancestros de cada elemento

view plaincopy to clipboardprint?

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

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

crear una copia de la colección

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

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

añadir una nueva clase a uno o varios elementos

view plaincopy to clipboardprint?

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

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

añadir una propiedad CSS a uno o varios elementos

view plaincopy to clipboardprint?

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

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

añadir contenido a un elemento

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

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

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

eliminar un elemento de la página

view plaincopy to clipboardprint?

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

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

ocultar un elemento

view plaincopy to clipboardprint?


1. jQuery("p").hide()

jQuery("p").hide()

o volver a mostrar un elemento

view plaincopy to clipboardprint?

1. jQuery("p").show()

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:

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

evento dblclick, al hacer doble clic sobre un elemento:

view plaincopy to clipboardprint?

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

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:

view plaincopy to clipboardprint?

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

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

evento mouseenter, cuando el cursor entra en un elemento

view plaincopy to clipboardprint?

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

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

evento mouseout, cuando el cursor sale de un elemento

view plaincopy to clipboardprint?

1. jQuery("p:first").mouseenter(function () {
2. jQuery(this).css("border", "1px solid red");
3. });
4.
5. jQuery("p:first").mouseout(function () {
6. jQuery(this).css("border", "0");
7. });

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:

view plaincopy to clipboardprint?

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

evento load, cuando se termina de cargar el elemento:

view plaincopy to clipboardprint?

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

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:

view plaincopy to clipboardprint?

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

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:

view plaincopy to clipboardprint?

1. jQuery(function () {
2. alert("DOM cargado");
3. });

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:

view plaincopy to clipboardprint?


1. jQuery(function () {
2. jQuery("p").hide();
3. jQuery("p").delay(200).fadeIn();
4. });

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:

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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

ocultarlos deslizándolos hacia arriba:


view plaincopy to clipboardprint?

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

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

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

view plaincopy to clipboardprint?

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

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:

view plaincopy to clipboardprint?

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

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.

view plaincopy to clipboardprint?

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

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):

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

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

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:

view plaincopy to clipboardprint?

1. jQuery.get("login.php", {nombre: "zootropo", pass:"contraseña"},


2. function(data, textStatus, XMLHttpRequest){
3. jQuery("#mensaje").html("Han devuelto: " + data);
4. });
5.
6. jQuery.post("login.php", {nombre: "zootropo", pass:"contraseña"},
7. function(data, textStatus, XMLHttpRequest){
8. jQuery("#mensaje").html("Han devuelto: " + data);
9. });

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.

view plaincopy to clipboardprint?

1. $.getJSON('tareas.php', function(data, textStatus){


2. $.each(data, function(i, tarea){
3. $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo("ul#tare
as");
4. });
5. });

$.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:

view plaincopy to clipboardprint?

1. <?php
2. header('Content-type: text/javascript');
3.
4. $bbdd = new mysqli('servidor.com', 'usuario', 'pass', 'tareas');
5.
6. $query = 'SELECT * FROM tareas';
7. $tareas = array();
8. if($resultado = $bbdd->query($query))
9. while($tarea = $resultado->fetch_object())
10. $tareas[] = $tarea;
11.
12. $bbdd->close();
13.
14. echo json_encode($tareas);
15. ?>

<?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.

Etiquetas: desarrollo, Javascript, jquery, programacion, tutorial, web


Comentarios

1. ChUkIsLukiS

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

o Zootropo

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. Montagon

Guardado para cuando me sirva en el futuro.

Gracias!

Responder

6. gin

Util la chuletilla!!

Responder

7. buttonpol

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

o Zootropo

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. AirisPC » Blog Archive » Tutorial rápido de jQuery

[...] 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. jose

Esta de puta madre!! (con perdon)


con tu permiso me lo monto en Scribus en plan chuleta – cheatsheet

thx

Responder

11. errepunto

¡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. Angelverde

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. Aesptux

Genial entrada!

Sirve de gran ayuda como una referencia rápida

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!

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

o Zootropo
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

 errepunto

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

 Zootropo

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. Tutorial de iniciación en jQuery | UnUsuario

[...] 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. Pablo

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

o Zootropo

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. Pedro Escudero

Gracias!

Responder
21. calambre

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

o 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. ikki

buen articulo

Responder

27. Tutorial rápido de jQuery

[...] 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. Rafalinux

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. Linux Hispano | Lo mejor de mi RSS del 19 al 25 de abril

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

Responder

30. 10 plugins para jQuery que no puedes perderte


[...] 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. Tutorial rápido de jQuery - VitaminaWEB.com

[...] 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. Tutorial rápido de jQuery | Ayuda Linux

[...] 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. Tutorial inicio rápido de jQuery

[...] 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. Tutorial inicio rápido de jQuery - Galego

[...] 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. Tutorial inicio rápido de jQuery | Ayuda Linux

[...] 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. 10 plugins para jQuery que no puedes perderte | AplicacionesWeb

[...] 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. Enviar formularios con AJAX y jQuery

[...] 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. RUBEN DARIO

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. Compilado de Articulos de otros blogs « Argentina Geek 2.0

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

Responder

42. paco
gracias man… el tuto…. de poca madre.

Responder

43. Juno

Realmente genial.

Muchas gracias, y un saludo de un forocochero!

Responder

o Zootropo

Gracias a ti shurmano

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. Tutorial de Jquery « Nicolascoronel's Blog

[...] 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. Campeones del Mundo

[...] 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
51. Teofilo Vizcaino

Lo unico que quiero es impmimir una variable desde jquery para depuarar una
página

Responder

52. Urien

Mil gracias. Ya tenía experiencia con javascript y AJAX pero siempre me ha


asustado la “sintaxis” de jquery.
Por fin he entendido los selectores y los métodos. Gracias!!

Responder

53. jose

lo encuentro muy, muy util gracias hermano!!!


josé…

Responder

54. Jose Tapia

Muy buen tuto muchisimas gracias por tu tiempo para compartir tus
conocimientos

Responder

55. omc

muy buen el tutorial muchas gracias

Responder

56. Gregorio Espadas

¡Tip! El CDN de Microsoft ha cambiado. Aquí todos los detalles:


http://gespadas.com/cdn-microsoft

Responder

57. Eric
muchas gracias
excelente tu pagina

Responder

58. ElSolfa.Com.. » Blog Archive » Farandula – Fotos del hijo del Padre Alberto

[...] Salen fotos del hijo del Padre Alberto. En su próxima edición la revista
PEOPLE EN ESPAÑOL muestra en exclusiva las primeras fotos de Camila
Victoria, la bebé del padre Alberto Cutié [...]

Responder

59. Jaime Vallejos

Un sincero agradecimiento por este tutorial, a quien lo haya hecho, realmente


gracias.

Responder

60. Eduardo

Gracias por tu trabajo, es un exelente resumen

Responder

61. jQuery 1.5

[...] disponible. ¿Necesitas ayuda para empezar con esta fantástica librería? Echa
un vistazo a mi tutorial rápido de jQuery. Etiquetas: desarrollo, Javascript,
jquery, programacion, web [...]

Responder

62. Cesar Rs

Te luciste hermano

Responder

63. Nicolás

En el caso de envíar datos por post, los mismos provienen del algún campo de
texto? Como asociaría el atributo name de un input con esa datos?

Responder
Enviando comentario...
Deja un comentario
Clic para cancelar respuesta.

Nombre

email (no se mostrará)

Tu web (opcional)

Enviar comentario

Mundo geek es una web escrita por Raúl González Duque, dedicada principalmente
a las nuevas tecnologías y la informática.

Archivos

Acerca

Contacto

Traducciones
Wiki

• Dell Coupons
• Alquiler de Coches
• Inkjet Cartridges
• Home Phones
• alquiler coche
• Estudiar Diseño Grafico en Argentina
• Ver futbol gratis
• Computadoras de escritorio

Aviso legal