Documente Academic
Documente Profesional
Documente Cultură
Desde Google:
1
Desde Microsoft:
1
<script type="text/javascript">
// aca va el codigo
</script>
$('#tabla');
Con este codigo, estamos seleccionando todos los elementos que tengan como
id#tabla.
Document Ready
$(document).ready(function(){
});
Mtodos:
jQuery manipula los elementos HTML mediante metodos/methods (esconderlos,
eliminarlos, agregarles textos, clases, ids), estos pueden ser concatenados y
contener valores.
Sintaxis:
1
$('elemento seleccionado').metodo1('valores').metodo2('valores');
Ejemplo
Sabiendo lo anterior haremos un ejemplo con los mtodos mas bsicos de jQuery.
Creamos un .html con lo siguiente:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript">
$(document).ready(function() {
});
10
</script>
11
</head>
12
<body>
13
<div id="hola"></div>
14
</body>
15
</html>
Primero llamamos a jQuery usando el CDN de Microsoft, luego abrimos otro script
y esperamos que el documento este listo, seleccionamos el div que tiene como
id#hola y con el mtodo .text le agregamos un contenido generado:
El mtodo .text lo que hace es crear un texto dentro del selector, hay que notar
que este mtodo solo crea texto, existe otro mtodo similar donde podemos incluir
etiquetas html, probemos a cambiar el mtodo .text por .html y en el valor
agregarle un h1
1
Eventos:
Los eventos son un tipo de mtodos en jQuery que se usan para saber cuando el
usuario interactua con el navegador, en este tutorial veremos los eventos
relacionados al comportamiento del cursor (click, hover, toggle).
.click()
El mas comn de todos es .click() este registra el comportamiento del clic del
mouse sobre el elemento seleccionado, su sintaxis:
$('elemento seleccionado').click(function () {
// Que hacer cuando se haga clic sobre elemento
});
Ejemplo
Este ejemplo es bastante sencillo, es un boton que cuando se le haga clic se
escondera en 500 milisegundos.
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo1').click(function () {
$(this).hide(500); // 'this' es un selector que se usa para seleccionar el
elemento ya seleccionado anteriormente, en este caso #ejemplo1
});
});
</script>
<button id="ejemplo1">Hola</button>
.hover()
.hover() es el evento que registra cuando el cursor pasa por encima del elemento
seleccionado, su sintaxis es:
$('elemento seleccionado').hover(function () {
});
A este evento tambin se le puede definir que hacer cuando el cursor deje de
pasar sobre el elemento seleccionado, en tal caso su sintaxis cambiaria a:
$('elemento seleccionado').hover(function () {
}, function (){
});
Ejemplo
Haremos un ejemplo usando la segunda sintaxis:
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
.acerca{
width:400px;
font-size:16px;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo2').hover(function () {
$(this).animate( { opacity: 0.3 }, 400)
}, function () {
$(this).animate( { opacity: 1.0 }, 400)
});
});
</script>
El resultado es un botn que se aclara cuando el cursor pasa por encima pero
regresa a su estado original cuando el cursor deja de pasar por el botn.
En este ejemplo usamos el mtodo .animate() que realiza una animacin usando
propiedades CSS (las que van entre corchetes), luego de la coma, le defnimos en
milisegundos el tiempo que queremos que dure la animacin.
.toggle():
El evento .toggle() es parecido a .click() registra el comportamiento de un click,
solo que este acta como un interruptor con dos estados: prendido o apagado,
su sintaxis:
$('elemento seleccionado').toggle(function () {
},function () {
});
Ejemplo
Haremos un ejemplo sencillo con .toggle().
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo3').toggle(function () {
$(this).animate({left:'200px'}, 300)
}, function () {
$(this).animate({left:'0px'}, 300)
});
});
</script>