Jquery2 Gds

Lo Bsico
Como toda libreria JavaScript debemos incluirla en nuestra pagina web, la

podemos descargar desde jQuery.com, guardarlo en algna carpeta e incluirlo
localmente u otra manera mas rpida es usando el hospedaje de terceros (CDN)
como el mismo jQuery, Google, o Microsoft:
Desde jQuery:
1
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Desde Google:
1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.
Desde Microsoft:
1
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></s
Ya con la libreria incluida dentro de nuestro documento podemos empezar a

interactuar con jQuery abrimos un:
1
<script type="text/javascript">
// aca va el codigo
</script>
Nota: los comentarios en JavaScript son iguales a los de PHP (//)

Los selectores:
La base de jQuery son los selectores, para los que estan familiarizados con CSS, les sera
facilisimo ya que usa el mismosistema de selectores que CSS para interactuar con los
elementos HTML, para seleccionar elementos se usa la funcion base que es representada
con el simbolo $ y encerrando entre parntesis y comillas el elemento a seleccionar,
ejemplo:
$('#tabla');
Con este codigo, estamos seleccionando todos los elementos que tengan como
id#tabla.
Document Ready
Es una buena practica cuando se trabaja con JavaScript esperar a que el

documento termine de cargar para ejecutar nuestro codigo, jQuery tiene una
funcion especifica para esto:
1
$(document).ready(function(){
//Aca va todo nuestro codigo
});
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" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"><
<script type="text/javascript">
$(document).ready(function() {
$('#hola').text("Soy un texto generado por jQuery!");
});
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
$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>");
Tenemos ahora un h1 dentro de un div ambos dinmicamente generados por

jQuery!
Por ultimo veremos el mtodo .hide(); que sirve para ocultar elementos usando la
propiedad CSS de display:none;
1
$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>").hide();
Lo probamos en el navegador y notamos que se escondi.
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 () {
// Que hacer cuando el cursor pase sobre elemento
});
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 () {
// Que hacer cuando el cursor pase sobre el elemento
}, function (){
// Que hacer cuando el cursor deje de pasar sobre el elemento
});
Ejemplo
Haremos un ejemplo usando la segunda sintaxis:
<style>
button{padding:10px 20px;font-size:14px;position:relative;}
.acerca{
width:400px;
font-size:16px;
}
</style>
<script>
$('#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 () {
// Que hacer cuando se haga clic sobre el elemento
},function () {
// Que hacer cuando se haga clic otra vez sobre el elemento
});
Ejemplo
Haremos un ejemplo sencillo con .toggle().
<style>
button{padding:10px 20px;font-size:14px;position:relative;}
</style>
<script>
$('#ejemplo3').toggle(function () {
$(this).animate({left:'200px'}, 300)
}, function () {
$(this).animate({left:'0px'}, 300)
});
});
</script>
El resultado es un botn que cuando se le haga click se mover 200px a la

derecha y cuando se le haga click otra vez regresara a su estado original y as
sucesivamente.
Hay que notar que donde se declaran los estilos (linea 3) el elemento a animar
tiene que estar en position:relative para que la propiedad left funcione.

Jquery2 Gds

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jquery2 Gds

Diunggah oleh

Hak Cipta:

Format Tersedia

Lo Bsico

Como toda libreria JavaScript debemos incluirla en nuestra pagina web, la

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></s

Ya con la libreria incluida dentro de nuestro documento podemos empezar a

Nota: los comentarios en JavaScript son iguales a los de PHP (//)

Es una buena practica cuando se trabaja con JavaScript esperar a que el

//Aca va todo nuestro codigo

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"><

$('#hola').text("Soy un texto generado por jQuery!");

$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>");

Tenemos ahora un h1 dentro de un div ambos dinmicamente generados por

$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>").hide();

Lo probamos en el navegador y notamos que se escondi.

// Que hacer cuando el cursor pase sobre elemento

// Que hacer cuando el cursor pase sobre el elemento

// Que hacer cuando el cursor deje de pasar sobre el elemento

// Que hacer cuando se haga clic sobre el elemento

// Que hacer cuando se haga clic otra vez sobre el elemento

El resultado es un botn que cuando se le haga click se mover 200px a la

Anda mungkin juga menyukai