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 funcin jQuery, pasando como argumento a la funcin una cadena con un selector, la mayora de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rpido 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 bsicos Selector universal: selecciona todos los elementos de la pgina (CSS 2) view plaincopy to clipboardprint? jquery("*") Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado (CSS 1) view plaincopy to clipboardprint? jQuery("div") Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS 1) view plaincopy to clipboardprint? jQuery("div.entrada") Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado (CSS 1) view plaincopy to clipboardprint? jQuery("div#cabecera") Grupos de selectores: se puede combinar el resultado de varios selectores distintos separndolos con comas (CSS 1) view plaincopy to clipboardprint? jquery("p,div,a") Selectores de atributos Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2) view plaincopy to clipboardprint?

jquery("a[rel]") Tambin se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2) view plaincopy to clipboardprint? jquery("a[rel='nofollow']") O que tengan un valor distinto del indicado (jQuery) view plaincopy to clipboardprint? jQuery("a[rel!='nofollow']") Aquellos cuyo valor empieza por una cierta cadena (CSS 3) view plaincopy to clipboardprint? jquery("a[href^='http://mundogeek.net/']") Los que terminan con una cierta cadena (CSS 3) view plaincopy to clipboardprint? jquery("a[href$='.com']") Y los que contienen una cierta cadena (CSS 3) view plaincopy to clipboardprint? jquery("a[href*='geek']") Por ltimo, podemos hacer combinaciones de todo lo anterior (CSS 2) view plaincopy to clipboardprint? jquery("a[rel='nofollow'][href]") Selectores de widgets Pseudo clase botn: selecciona todos los botones (jQuery) view plaincopy to clipboardprint? jquery(":button") Pseudo clase checkbox: selecciona todos los checkboxes (jQuery) view plaincopy to clipboardprint?

jquery(":checkbox") Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery) view plaincopy to clipboardprint? jquery(":file") Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery) view plaincopy to clipboardprint? jquery(":header") Pseudo clase imagen: selecciona todas las imgenes (jQuery) view plaincopy to clipboardprint? jquery(":image") Pseudo clase input: selecciona todos los widgets de tipo input (jQuery) view plaincopy to clipboardprint? jquery(":input") Pseudo clase contrasea: selecciona todos los elementos password (jQuery) view plaincopy to clipboardprint? jquery(":password") Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery) view plaincopy to clipboardprint? jquery(":radio") Pseudo clase reset: selecciona todos los elementos reset (jQuery) view plaincopy to clipboardprint? jquery(":reset") Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery) view plaincopy to clipboardprint? jquery(":select")

Pseudo clase submit: selecciona todos los elementos submit (jQuery) view plaincopy to clipboardprint? jquery(":submit") Pseudo clase texto: selecciona todos las cajas de texto (jQuery) view plaincopy to clipboardprint? jquery(":text") Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3) view plaincopy to clipboardprint? jquery(":checked") Pseudo clase activo: selecciona todos los elementos que estn activos (CSS 3) view plaincopy to clipboardprint? jquery("input:enabled") Pseudo clase inactivo: selecciona todos los elementos que no estn activos (CSS 3) view plaincopy to clipboardprint? jquery("input:disabled") Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery) view plaincopy to clipboardprint? jquery(":hidden") Pseudo clase visible: selecciona todos los elementos visibles (jQuery) view plaincopy to clipboardprint? jquery(":visible") Selectores de jerarqua Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1) view plaincopy to clipboardprint? jquery("div.entrada h2")

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2) view plaincopy to clipboardprint? jquery("div.entrada > h2") Pseudo clase hijo: selecciona el ensimo hijo de un elemento (CSS 3) view plaincopy to clipboardprint? jquery("tr:nth-child(1)") Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2) view plaincopy to clipboardprint? jquery("tr:first-child") Pseudo clase ltimo hijo: selecciona el ltimo hijo de un elemento (CSS 3) view plaincopy to clipboardprint? jquery("tr:last-child") Pseudo clase hijo nico: selecciona los elementos que sean hijos nicos de otros elementos (CSS 3) view plaincopy to clipboardprint? jquery("div:only-child") Pseudo clase ndice: selecciona el elemento con el ndice indicado de un grupo de elementos (jQuery) view plaincopy to clipboardprint? 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? jquery("td:first)") Pseudo clase ltimo: selecciona el ltimo elemento de un grupo de elementos (jQuery) view plaincopy to clipboardprint? 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? 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? jquery("td:lt(3)") Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery) view plaincopy to clipboardprint? jquery("td:even") Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery) view plaincopy to clipboardprint? jquery("td:odd") Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro elemento (CSS 3) view plaincopy to clipboardprint? jquery("div.entrada ~ p") Selector de prximo adyacente: similar al anterior, pero slo selecciona el adyacente directo (CSS 2) view plaincopy to clipboardprint? jquery("div.entrada + p") Pseudo clase padre: selecciona los padres de otros elementos (jQuery) view plaincopy to clipboardprint? jquery("h2:parent") Pseudo clase vaco: selecciona los elementos que no tengan ningn hijo, incluyendo texto plano (CSS 3) view plaincopy to clipboardprint?

jquery(":empty") Otros selectores Pseudo clase animado: selecciona todos los elementos que estn en proceso de animacin en este momento (jQuery) view plaincopy to clipboardprint? 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? 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? jquery("div:has(h2)") Pseudo clase negacin: selecciona todos los elementos que no cumplan con el selector dado (CSS 3) view plaincopy to clipboardprint? jquery("div:not(.entrada)") Gestionando una coleccin jQuery Al llamar a la funcin jQuery con un selector como argumento, el valor devuelto ser otro objeto jQuery representando la coleccin 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? jQuery("div.entrada")[0] y tambin tenemos acceso a una propiedad length con el nmero de elementos que contiene la coleccin view plaincopy to clipboardprint?

jQuery("div.entrada").length Otras cosas que podemos hacer con este objeto son aadir elementos a la coleccin view plaincopy to clipboardprint? jQuery("div.entrada").add("div.comentario") eliminar elementos view plaincopy to clipboardprint? jQuery("div.entrada").not("div.destacada") filtrar elementos con un selector o basndonos en el valor devuelto por una funcin view plaincopy to clipboardprint? jQuery("div.entrada").filter(":has(h2)") quedarnos con los elementos que contengan otro cierto elemento view plaincopy to clipboardprint? jQuery("div.entrada").has("h2") obtener un slo elemento, por su ndice view plaincopy to clipboardprint? jQuery("div.entrada").eq(3) obtener el primer elemento de la coleccin view plaincopy to clipboardprint? jQuery("div.entrada").first() obtener el ltimo elemento de la coleccin view plaincopy to clipboardprint? jQuery("div.entrada").last() crear una sub coleccin a partir de la original view plaincopy to clipboardprint? jQuery("div.entrada").slice(0,5); jQuery("div.entrada").slice(3);

obtener los descendientes directos view plaincopy to clipboardprint? jQuery("div.entrada").children() jQuery("div.entrada").children("p") obtener los descendientes directos, incluyendo el texto plano view plaincopy to clipboardprint? jQuery("div.entrada").contents() obtener los hijos que cumplan con un determinado selector view plaincopy to clipboardprint? jQuery("div.entrada").find("p") obtener el hermano siguiente view plaincopy to clipboardprint? jQuery("div.entrada").next() obtener los hermanos siguientes view plaincopy to clipboardprint? jQuery("div.entrada").nextAll() obtener el hermano anterior view plaincopy to clipboardprint? jQuery("div.entrada").prev() obtener los hermanos anteriores view plaincopy to clipboardprint? jQuery("div.entrada").prevAll() obtener todos los hermanos view plaincopy to clipboardprint? jQuery("div.entrada").siblings()

obtener el padre de cada elemento view plaincopy to clipboardprint? jQuery("div.entrada").parent() obtener todos los ancestros de cada elemento view plaincopy to clipboardprint? jQuery("div.entrada").parents() crear una copia de la coleccin view plaincopy to clipboardprint? jQuery("div.entrada").clone() o buscar la posicin que ocupa un elemento en la coleccin (si existe) view plaincopy to clipboardprint? jQuery("*").index("div.entrada") Modificar la pgina con jQuery Veamos ahora cmo utilizar jQuery para modificar nuestra pgina web. Podemos, por ejemplo, modificar el valor de un atributo view plaincopy to clipboardprint? jQuery("a#principal").attr("href", "http://mundogeek.net/") aadir una nueva clase a uno o varios elementos view plaincopy to clipboardprint? jQuery("div.entrada:first").addClass("primera") aadir una propiedad CSS a uno o varios elementos view plaincopy to clipboardprint? jQuery("div.entrada").css("border", "1px solid red") aadir contenido a un elemento view plaincopy to clipboardprint? 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? jQuery("p").html("<strong>Sustituido</strong>") eliminar un elemento de la pgina view plaincopy to clipboardprint? jQuery("div.entrada:first").remove() ocultar un elemento view plaincopy to clipboardprint? jQuery("p").hide() o volver a mostrar un elemento view plaincopy to clipboardprint? jQuery("p").show() Eventos en jQuery Existen distintas funciones para asignar una funcin que maneje un evento lanzado por un widget. Para el evento click, al hacer clic sobre un elemento: view plaincopy to clipboardprint? jQuery(":button#pulsame").click(function () { alert("Has hecho clic"); }); evento submit, cuando se pulsa sobre el botn de enviar de un formulario: view plaincopy to clipboardprint? jQuery("#formulario").submit(function() { alert("Enviando"); }); evento dblclick, al hacer doble clic sobre un elemento:

view plaincopy to clipboardprint? jQuery("p:first").dblclick(function () { alert("Has hecho doble clic"); }); evento hover, cuando al pasar el ratn por encima de un elemento. Podemos utilizar jQuery(this) para referirnos a este elemento: view plaincopy to clipboardprint? 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? 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? 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? jQuery(":text#nombre").change(function () { alert("Cambiado"); }); evento load, cuando se termina de cargar el elemento: view plaincopy to clipboardprint?

jQuery(window).load(function () { alert("Pgina cargada"); }); evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las imgenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad JavaScript cuanto antes: view plaincopy to clipboardprint? jQuery(document).ready(function () { alert("DOM cargado"); }); esto ltimo, al ser esto algo muy comn, se puede resumir pasando una funcin a la funcin jQuery, directamente: view plaincopy to clipboardprint? 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? 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 ms claramente el efecto. A esta funcin se le puede pasar un valor numrico con el nmero de milisegundos a esperar, o una cadena, como "slow" (lento) o "fast" (rpido). para hacer un fundido a transparente: view plaincopy to clipboardprint? jQuery(":button").click(function () {

jQuery("p").fadeOut(); }); Tambin podemos cambiar la opacidad de un elemento a cualquier valor intermedio view plaincopy to clipboardprint? jQuery(":button").click(function () { jQuery("p").fadeTo("slow", 0.5); }); mostrar los elementos con una animacin de deslizamiento de arriba a abajo: view plaincopy to clipboardprint? jQuery(function () { jQuery("p").hide().delay(200).slideDown(); }); ocultarlos deslizndolos hacia arriba: view plaincopy to clipboardprint? jQuery(function () { jQuery("p").delay(200).slideUp(); }); mostrarlos u ocultarlos, dependiendo de si se estaban mostrando o no: view plaincopy to clipboardprint? jQuery(":button").click(function () { jQuery("p").delay(200).slideToggle(); }); Por ltimo, para cualquier otro tipo de animacin con propiedades CSS cuyos valores sean numricos, utilizaramos: view plaincopy to clipboardprint? jQuery(":button").click(function () { jQuery("p").animate({opacity:0.50,width:100}, 'slow'); }); jQuery y AJAX

La forma ms sencilla de enviar una peticin HTTP de forma asncrona y mostrar el resultado en la pgina actual es utilizar la funcin load. Esta se ejecuta sobre el elemento al que se va a aadir la respuesta, y se le pasa como argumento una cadena con el archivo a cargar. Esta cadena puede contener tambin un selector con el que seleccionar qu elementos queremos mostrar de la respuesta. view plaincopy to clipboardprint? jQuery(":button").click(function () { $("#citas").load("citas.html li"); }); tambin se pueden enviar parmetros al documento (se utiliza GET a menos que los datos se manden en forma de objeto): view plaincopy to clipboardprint? jQuery(":button#login").click(function () { $("#mensaje").load("login.php", {nombre: "zootropo", pass: "contrasea"}); }); e indicar una funcin a ejecutar cuando se termine de llevar a cabo la peticin view plaincopy to clipboardprint? jQuery(":button#login").click(function () { jQuery("#mensaje").load("login.php", {nombre: "zootropo", pass: "contrasea"}, function(responseText, textStatus, XMLHttpRequest) { alert("cargado"); }); }); Tambin se pueden utilizar los mtodos 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? jQuery.get("login.php", {nombre: "zootropo", pass:"contrasea"}, function(data, textStatus, XMLHttpRequest){ jQuery("#mensaje").html("Han devuelto: " + data); }); jQuery.post("login.php", {nombre: "zootropo", pass:"contrasea"}, 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 mtodo jQuery.getJSON(), al que se le pasa la URL de la peticin y, opcionalmente, cualquier parmetro que se necesite, adems de una funcin de callback que ejecutar cuando se termine con la peticin. Este mtodo se encargar de parsear la estructura del objeto JSON devuelta utilizando jQuery.parseJSON(), objeto que estar disponible como primer parmetro de la funcin de callback. view plaincopy to clipboardprint? $.getJSON('tareas.php', function(data, textStatus){ $.each(data, function(i, tarea){ $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo("ul#tareas"); }); }); El cdigo de este tareas.php podra tener este aspecto: view plaincopy to clipboardprint? <?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 funcin json_encode para convertir el array u objeto PHP a formato JSON. Esta funcin, junto con su complemento, json_encode, se introdujo en PHP en la versin 5.2.0.