J Query

jQuery Inicio: 1. Agregar en la etiqueta <head>: <script src="jquery.js"></script> 2.
Luego agregar la etiquetas <script></script> en body, todo va dentro de estas etiquetas $("a").click(function() { alert("Hello world!"); }); a son todos los objetos creados de la clase a, puede ser input, hidden, etc $(document).ready(function() { $("#orderedlist").addClass("red"); }); #orderedlist viene a ser el id de un elemento Busca en un contenedor por id y agrega texto: $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); }); Previene que algo ocurra por defecto event.preventDefault(); Resetear un formulario:
$(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("form")[0].reset(); }); });
Resetear varios formularios:

$(document).ready(function() { // use this to reset several forms at once $(#reset).click(function() { $(form).each(function() { this.reset(); }); }); });
Dar color de fondo como si estuviese resaltado:

$(document).ready(function() { $("a[name]").css("background", "#eee" ); });
Esconde y muestra un texto:

$(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { $(this).next().slideToggle(); }); });
<dl id=faq> (DL es Definition List, un tipo de cuadro de texto con ttulos y contenido) <dt>Titulo de la definicion</dt> <dd>Descripcion de la definicin</dd> </dl> Los eventos son los que ejecutarn cierto cdigo cuando algo ocurra: $(function() { $("a").mouseover(function() { alert("Hello world!"); }); }); Lista de eventos: .change() Ejecuta algo cuando un input, textarea, select, checkbox y radiobutton son cambiados. En el caso de un input, el evento ocurre cuando ste pierde el focus. Ejemplo $(function() { $("select").change(function() { alert("ok"); }); }); Ejemplo para seleccionar varios elementos de una lista e imprimirlos en una etiqueta div: $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; [se puede cambiar a .val()] }); $("div").text(str); }) .change();
.click() y .dblclick() Ejecuta algo cuando se hace clic a un elemento en la pgina web. Ejemplo $("p").click(function () { $(this).slideUp(); $(this).slideDown(); }); e.pageX y e.pageY Obtiene la posicin del cursor en los ejes X e Y
$(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); });
Event.which Obtiene el valor en ASCII de una tecla o valor de un clic seleccionados. Ejemplo
$('#whichkey').bind('keydown',function(e){ $('#log').html(e.type + ': ' + e.which ); });
Para obtener el valor del mouse:

$('#whichkey').bind('mousedown',function(e){ $('#log').html(e.type + ': ' + e.which ); });
.hover Ejecuta un cdigo cuando el punter se posisiona sobre el element y cuando sale de l. Ejemplo:
$("li").hover( function () { $(this).append($("<span> ***</span>")); }, function () { $(this).find("span:last").remove(); } );
.focus(), .focusin() y .focusout() Ejecuta un evento cuando se enfoca el element

<!DOCTYPE html> <html> <head> <style>span {display:none;}</style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p><input type="text" /> <span>focus fire</span></p> <p><input type="password" /> <span>focus fire</span></p> <script>
$("input").focus(function () { $(this).next("span").css('display','inline').fadeOut(1000); }); </script> </body> </html>
.scroll() Dispara un evento cuando se hace scroll. Ejemplo:

<!DOCTYPE html> <html> <head> <style> div { color:blue; } p { color:green; } span { color:red; display:none; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> <script> $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); }); </script> </body> </html>
.keydown() y .keyup() Ejecuta un evento cuando la tecla es presionada o soltada. Ejemplo:

<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> <input name="t1" id="t1" type="text"><span id="aqui"></span> <script> $('#t1').keyup(function(event) { $('#aqui').text($('#t1').val()); }); </script> </body> </html>
.trigger() Ejecuta un evento programado de un objeto
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> </head> <body> <input name="t1" id="t1" type="text"><span id="aqui"></span> <input name="boton" id="boton" type="button"> <script> $('#t1').keyup(function(event) { $('#aqui').text($('#t1').val()); alert("ok"); }); $("#boton").click(function(){ $("#t1").trigger('keyup'); }); </script> </body> </html>
.submit() Ejecuta algo cuando el formulario ejecuta un submit. Ejemplo:

<!DOCTYPE html> <html> <head> <style> p { margin:0; color:blue; } div,p { margin-left:10px; } span { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Type 'correct' to validate.</p> <form id="formulario" action="javascript:alert('success!');"> <div> <input type="text" /> <input type="submit" /> </div> </form> <span></span> <script> $("form").submit(function() { if ($("input:first").val() == "correct") { $("span").text("Validated...").show(); return true; } $("span").text("Not valid!").show().fadeOut(1000); return false; }); </script> </body> </html>
Ejemplos: Verificar si campos estn vacos: if ($('#Nombre5').val() == undefined || $('#Nombre5').val() == null) { alert('Es necesario llenar un nombre'); }

J Query

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

J Query

Transféré par

Droits d'auteur :

Formats disponibles

jQuery Inicio: 1. Agregar en la etiqueta <head>: <script src="jquery.js"></script> 2.

Resetear varios formularios:

Dar color de fondo como si estuviese resaltado:

Esconde y muestra un texto:

Para obtener el valor del mouse:

.focus(), .focusin() y .focusout() Ejecuta un evento cuando se enfoca el element

$("input").focus(function () { $(this).next("span").css('display','inline').fadeOut(1000); }); </script> </body> </html>

.scroll() Dispara un evento cuando se hace scroll. Ejemplo:

.keydown() y .keyup() Ejecuta un evento cuando la tecla es presionada o soltada. Ejemplo:

.trigger() Ejecuta un evento programado de un objeto

.submit() Ejecuta algo cuando el formulario ejecuta un submit. Ejemplo:

Vous aimerez peut-être aussi