Intro JQuery

jQuery
• jQuery es una librería JavaScript
jQuery • Desarrollada por John Resig
• Simplifica la programación
• Es el framework js mas popular.
Usos de jQuery? Instalando jQuery

Se puede bajar de jQuery.com
• Manipulación de HTML / DOM <script src="jquery-1.11.1.min.js"></script>
• Manipulación de CSS
O utilizar la librería de Google
• Manejo de eventos <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
• Efectos y Animaciones
O utilizar la librería de MicroSoft
• AJAX
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
Syntaxis jQuery Ejemplos
• $(this).hide();
jQuery permite seleccionar elementos HTML y ejecutar una acción en ellos
• $(“p”).hide();
$(selector).accion()
• $(“.test”).hide();
• $(“#test”).hide();
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1
¿Ya se cargó la página? /jquery.min.js"></script>
<script>
$(document).ready(function(){
La mayor parte del código jQuery se incluye dentro del evento ‘document ready’ $("button").click(function(){
$("p").hide();
$(document).ready(function() { });
//code here });
}); Ejemplo 1 </script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script
<script>
Otros Selectores
$("button").click(function(){ $(“*”)
$("#test").hide();
}); $(this)
}); $(“p.intro”)
</script>
Ejemplo 2 </head>
$(“p:first”)
<body> $(“ul li:first”)
$(“ul li:first-child”)
<h2>This is a heading</h2> $(“[href]”)
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p> $(“a[target=‘_blank’]”)
<button>Click me</button> $(“a[target!=‘_blank’]”)
</body>
$(“tr:even”)
</html>
$(“tr:odd”)
Eventos Syntaxis para los manejadores de eventos

Los eventos son acciones que ocurren en el browser a las cuales se puede responder.
Click en un párrafo:
• Mover el mouse sobre un elemento $(“p”).click(function(){

//action goes here!
• Click en un element });
Ejemplo hide(), show() & toggle()
<script>
• Los elementos se pueden hacer aparecer y desaparecer mediante ‘hide()’
$(document).ready(function(){ and ‘show()’
$("p").click(function(){ • La syntaxis es:
$(this).hide(); $(selector).hide(speed, callback);
}); • speed puede ser “slow”, “fast” o un número en milisegundos
}); • callback es una función que se invoca cuando se complete la acción
</script> • Si no se sabe si el element está o no visible
• Utilizar ‘toggle()’
Algunos efectos fade
fadeIn()
• fade
fadeOut()
• slide
fadeToggle()
• animate
fadeTo()
Slide Animate
animate() se usa para crear animaciones:

• slideDown()
$(selector).animate({params}, speed, callback);
• slideUp()
params se refiere a las propiedades CSS que se van a animar
• slideToggle() (speed y callback son opcionales)
Callbacks Chaining
Callbacks son funciones que se invocan cuando se completa una acción.
Si se está ejecutando una animación se puede esperar hasta que se
termine y en ese momento llamar otra función.
Chaining (encadenamiento) es cuando una serie de métodos se invocan uno
detrás de otro. Se pueden invocar varios métodos en una sola instrucción.
$("button").click(function(){ Esto ahorra el tiempo de localizar el mismo elemento mas de una vez.
$("p").hide("slow",function(){
alert("The paragraph is now hidden"); $("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
Manipulación del DOM text()
jQuery facilita la manipulación del DOM.
Algunas de las funciones mas importantes son: text() lee o escribe el texto contenido de un elemento
• text() get
alert("Text: " + $("#test").text());
• html() set
$("#test1").text("Hello world!");
• val()
• attr()
html() val()
html() lee o escribe el html contenido en un element
get val() lee o escribe el texto contenido en un input

alert("HTML: " + $("#test").html());
set get
$("#test2").html("<b>Hello world!</b>"); alert("Value: " + $("#test").val());
set
$("#test3").val(“w3schools");
attr() Agregar y eliminar
attr() lee o escribe el attribute de un elemento Agregar
• append()
get
alert($("#kc").attr("href")); • prepend()
set • after()
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery", • before()
"title" : "W3Schools jQuery Tutorial" Eliminar
}); • remove()
• empty()
Agregar Eliminar
remove(): Elimina el elemento seleccionado y sus hijos

append() : Inserts content at the end of the selected element
prepend(): Inserts content at the beginning of the selected element empty(): Elimina los hijos del elemento seleccionado
after(): Inserts content after the selected element
before(): Inserts content before the selected element
CSS Dimensiones CSS
• width() – set o get
• addClass() • height() – set o get
$("button").click(function(){ • innerWidth() - get
• removeClass() $("p").css("background-color", "yellow"); • innerHeight() - get
});
• css() }); • outerWidth() - get
• outerHeight() – get
• outerWidth(true) - get
• outerHeight(true) - get
Recorriendo el árbol DOM Recorriendo el árbol DOM
Es posible recorrer el árbol:
• Hacia arriba hasta un ancestro
• Hacia abajo hasta un descendiente
• Através de los hermanos

Hacia arriba Hacia abajo
parent() children()
$("div").children();
$("span").parent(); $("div").children("p.1"); Solo regresa los párrafos clase 1
parents()
$("span").parents(); find()
$("span").parents("ul"); Solo regresa los elementos ul $("div").find("span"); Solo regresa los descendientes span
parentsUntil() $("div").find("*");
$("span").parentsUntil("div"); Se detiene al encontrar un div
Recorrido horizontal Filtrado

Permite encontrar un element en particular
• siblings()
• first()
• next()
• nextAll() • last()
• nextUntil()
• eq()
• prev()
• filter()
• prevAll()
• prevUntil() • not()
AJAX load()
• Asynchronous Javascript and XML

load()
• AJAX permite el intercambio de datos con el servidor y Carga datos de un servidor
actualizar partes de una página sin tener que recargarla.
$(selector).load(URL, data, callback);
get() & post() jQuery UI

get() and post() se usan para enviar una petición al servidor vía HTTP GET o HTTP POST http://jqueryui.com/
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Monterrey"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
jQuery Plugins
• jQuery puede extenderse mediante « plugins »
• Los métodos agregados son del mismo nivel que los métodos nativos
• Todos regresan el objeto jQuery y aplican el método a todos los elementos
representados
• http://plugins.jquery.com/
• http://apycom.com/
• http://www.wizzud.com/jqDock/
• http://visuallightbox.com

Intro JQuery

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Intro JQuery

Încărcat de

Drepturi de autor:

Formate disponibile

jQuery

• jQuery es una librería JavaScript

jQuery • Desarrollada por John Resig

• Es el framework js mas popular.

Usos de jQuery? Instalando jQuery

Eventos Syntaxis para los manejadores de eventos

• Mover el mouse sobre un elemento $(“p”).click(function(){

Algunos efectos fade

animate() se usa para crear animaciones:

get val() lee o escribe el texto contenido en un input

remove(): Elimina el elemento seleccionado y sus hijos

Recorriendo el árbol DOM Recorriendo el árbol DOM

Es posible recorrer el árbol:

• Hacia arriba hasta un ancestro

• Hacia abajo hasta un descendiente

• Através de los hermanos

Recorrido horizontal Filtrado

• Asynchronous Javascript and XML

get() & post() jQuery UI

S-ar putea să vă placă și