• Ready • Click • Text() y text(valor) • Attr(nombre de la propiedad

•
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);
})
})