• Ready var x; x=$(document); x.ready(inicializarEventos); El método ready indica el nombre de la funcion que debe ejecutarse.La funcion inicializarEventos se ejecuta una vez que se cargo la pagina y están creados los elementos HTML. • Click var x; x=$("#titulo1"); x.click(presionTitulo1) La funcion presionTitulo1 se ejecuta al presionar (clickar) sobre titulo1. • Text() y text(valor) Var x=$(“parrafo1”); x.text(); Nos muestra el contenido el contenido del párrafo con id igual a parrafo1. var x=$("#parrafo1"); x.text("Este es el texto nuevo"); Se cambia el contenido de parrafo1 por el valor que le pasamos en este caso “Este es el texto nuevo”. var x=$("#parrafo1"); alert(x.text()); Coge el contenido de parrafo1 y lo muestra en un alert. • Attr(nombre de la propiedad), attr(nombre propiedad,valor), removeAttr(nombre de propiedad) Estos métodos nos permiten agregar propiedades a un elemento HTML y recuperar el valor de una propiedad. Para recuperar el valor de una propiedad (si hay muchos elementos que recupera la función $, solo retorna la propiedad del primero): $(elemento).attr(nombre de la propiedad); Para fijar el valor de una propiedad (si hay muchos elementos que recupera la función $, se inicializan para todos): $(elemento).attr(nombre de la propiedad,valor); var x=$("#tabla1"); x.attr("border","1"); Para eliminar una propiedad de un elemento o conjunto de elementos tenemos: $(elemento).removeAttr(nombre de la propiedad); var x=$("#tabla1"); x.removeAttr("border"); • addClass , removeClass Estos métodos nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML. var x=$("#descripcion"); x.addClass("recuadro"); var x=$("#descripcion"); x.removeClass("recuadro"); Donde recuadro lo tenemos definido en CSS. • html(), html(valor) El método: html([bloque html]), nos permite agregar un bloque html a partir de un elemento de la pagina. Y el método: html(), nos retorna el bloque html contenido a partir del elemento html que hace referencia el objeto jQuery. var x; x=$("#formulario"); x.html('<form>Ingrese nombre:<input type="text" id="nombre"><br>Ingrese clave:<input type="text" id="clave"><br><input type="submit" value="confirmar"></form>'); var x; x=$("#formulario"); alert(x.html()); Cuidado al crear bloques de forma dinámico, si no tenemos activado JavaScript no verán el formulario!!! • mouseover y mouseout Esto eventos normalmente van unidos. El primero se dispara cuando metemos la flecha del ratón a un elemento HTML y el segundo cuando la sacamos la fecha del control. var x; x=$("a"); x.mouseover(entraMouse); x.mouseout(saleMouse); function entraMouse() {$(this).css("background-color","#ff0");} function saleMouse() {$(this).css("background-color","#fff");} Cambia el color de fondo cdo entra y sale de un link. • hover mouseover y mouseout deciamos que suelen ir juntos, pero en jQuery tenemos un evento hover con 2 parametros: $(elemento).hover([función de ingreso del mouse],[función de salida del mouse]) var x; x=$("a"); x.hover(entraMouse,saleMouse); • mousemove Este evento se dispara cdo se mueve el ratón dentro del elemento HTML respectivo. • mousedown y mouseup El evento mousedown se dispara cdo presionamos alguno de los botones del raton y mouseup cdo dejamos de presionar el boton. var x; x=$("td"); x.mousedown(presionaMouse); x.mouseup(sueltaMouse); • dblclick Se dispara cdo se presiona 2veces seguidas el botón izquierdo del ratón. • focus Se produce cdo se activa el control. Se puede capturar el evento focus de un control de tipo text, textarea, button,……. Es común a muchos sitio donde se puede buscar información, disponer un control de tipo text con la leyenda 'Buscar...' y sin ningún botón a su lado. Cuando el control toma foco se borra automáticamente su contenido, el operador ingresa el texto a buscar y presiona la tecla ENTER. x=$("#buscar"); x.focus(tomaFoco); function tomaFoco() • blur {var x=$("#buscar"); x.attr("value","");} Se dispara cdo pierde el control del foco. Se aplica a controles de tipo text,textarea,button,….. • show() y hide() Ocultan y muestran elementos HTML.Pueden mostrarse u ocultarse con pequeñas animaciones. x.show(“fast”); Hay varias formas de llamar a los metodos show y hide: Fast: animación rapida. Normal: animación normal. Show: animación lenta. Show([cantidad de milisegundos]):la animación tarda tantos milisegundos como le indicamos Show([milisegundos],[función]):tarda tantos milisegundos como le indicamos y al final ejecuta la función que le pasamos. • fadeIn y fadeOut fadeIn hace aparecer los elementos HTML con opacidad. fadeOut decolora hasta que desaparecen, reduce la opacidad de forma progresiva. También podemos variar la rapidez con que aparecen y desaparecen, los milisegundos que tardan y llamar a una función cdo terminan, igual que comos explicado en show y hide. • fadeTo Modifica la opacidad de un elemento, el efecto es llevar la opacidad actual hasta el valor que se le pasa en el método fadeTo. Podemos inicializar este método de las siguientes formas:fadeTo([velocidad],[valor de opacidad]) Indicamos la velocidad de transición del estado actual al nuevo estado (slow/normal/fast) o un valor indicado en milisegúndos. El valor de la opacidad es un numero real entre 0 y 1. 1 significa sin opacidad y 0 es transparente. También podemos llamar al método fadeTo con tres parámetros: fadeTo([velocidad],[valor de opacidad],[función]) Hay que tener en cuenta que fadeTo por más que indiquemos el valor 0 en opacidad el espacio que ocupa el elemento en la página seguirá ocupado por un recuadro vacío!!! • toggle Cambia el estado de la visibilidad de un elemento HTML cada vez que se ejecute, es decir si esta visible pasa a oculto y viceversa. x.toggle(“show”); • each jQuery dispone de un método que permite asociar una función que se ejecutara por cada elemento que contenga la lista del objeto jQuery. Dentro de esta función podemos manipular el elemento actual. var x; x=$([elementos]); x.each([nombre de la funcion]) x=$("#parrafos p"); x.each(resaltarParrafos); • load Es el método más sencillo para recuperar datos del servidor. Sintaxis: load([nombre de la pagina],[parametros],[función final]) Una cosa muy importante es la llamada de este método desde el elemento HTML donde queremos que nos agregue la información que retorna el servidor(utilizamos este método cdo no tenemos que procesarlo en el navegador sino directamente mostrarlo de forma completa).El segundo y tercera parámetro son opcionales.----ej:horóscopos----- • ajaxStart y ajaxStop Se pueden asociar a un objeto tipo jQuery, tienen como parámetro una función. ajaxStart([funcion]): se dispara cdo se inicia una petición en el servidor y nos puede servir para mostrar en pantalla al usuario que esta llegando datos del servidor. ajaxStop([funcion]): se dispara cdo finaliza la petición de datos del servidor. function inicializarEventos() { var x; x=$("#menu a"); x.click(presionEnlace);} function presionEnlace() { var pagina=$(this).attr("href"); var x=$("#detalles"); x.ajaxStart(inicioEnvio); x.load(pagina); return false;} function inicioEnvio() { var x=$("#detalles"); x.html('<img src="../cargando.gif">');} • $.get y $.post Las utilizamos cdo no se quiere inyectar directamente los datos a nuestra pagina sino que queremos procesarlos y eventualmente agregarlos en distintas partes. $.get([nombre pagina],[parámetros a enviarse por método get],[función que recibe los datos del servidor]). $.post es idéntica a $.get, solo cambia en como http empaqueta los datos y los envía al servidor. $.post no limita la cantidad de datos a enviar al servidor. EJ: aplicación que calcula cuadrado de un numero que metemos por teclado. La operación se realiza en el servidor. var v=$("#nro").attr("value"); $.get("pagina1.php",{numero:v},llegadaDatos); return false; • $.getJSON Hace una petición de datos al servidor teniendo en cuenta que devuelve la información con notación JSON. $.getJSON ([nombre pagina],[parámetros],[función que recibe los datos]). $.getJSON("pagina1.php",{dni:v},llegadaDatos); • $.ajax Hemos visto que tenemos varias formas de recuperar y enviar datos al servidor utilizando ajax: metodo load, funciones: $.get y $.post, y $.getJSON.Pero existe otra funcion $:ajax que es mas completa k todas pero es mas compleja en su empleo. $.ajax([objeto literal]) retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.Podemos mandar varios parámetros. $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); - async: indica si la comunicación sera asincrona(true) o sincronía(false). - type: metodo por el cual se envian los datos, POST o GET. - datatype: tipo de datos que se van a recuperar, html, xml, json, script. - contentType: como se empaquetan los datos para enviarlos al servidor. - url: nombre de la pagian que procesara los datos. - data: datos a enviar al servidor. beforeSend: nombre de la función que se ejecutara previo al envio de datos(ej: imagen). succes: funcion que se ejecutara cdo finaliza el envio de datos del servidor y ademas ocurrio todo de forma correcta. timeout: tiempo maximo a esperar por la petición de datos. Error: funcion que se ejecutara si los datos no llegan del servidor. ---------------------------------------------------------------------------------------------------------La forma más habitual de programar con jQuery es con funciones anónimas y encadenadas. var x; x=$(document); x.ready(function(){ var x; x=$("#titulo1"); x.click(function() { var x; x=$("#titulo1"); x.css("color","#ff0000"); }); Algo tb muy utilizado es la llamada sucesiva de metodos. Esto se puede hacer pq casi todos los metos Jquery devuelven objetos de tipo jQuery. $(document).ready(function () { $("#boton1").click(function () { $("#descripcion").fadeTo("slow",0.5).hide("slow"); }); $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); }) })