Podemos crear elementos que funcionen como botones, así al hacer clic sobre ellos jQuery puede realizar múltiples accciones.
Estos 'botones' pueden ser imágenes, textos o botones reales creado con la etiqueta de HTML <button>, y cada uno ellos presenta un mensaje diferente.
Para añadir una orden que se cumpla al hacer clic en el botón hay que seguir una serie de pasos:
El elemento que funciona como botón tiene que tener un nombre (un 'id').
jQuery tiene que contactar con dicho botón, a través de su id y decirle que cuando el usuario haga clic tiene que ejecutar una orden.
Para que el botón sepa qué acciones tiene que realizar, estás órdenes tienen que estar agrupadas y tener un nombre para poder identificarlas.
Ejemplo paso a paso
Vamos a crear un botón que al hacer clic nos salude.
(Si quieres ver el ejemplo en una ventana nueva: haz clic aquí).
Primero crearemos el botón con HTML:
<button id="btn">Hazme clic</button>
En este ejemplo vemos como el botón se llama 'btn'.
Como ahora ya interviene jQuery, añadimos en el <head> el código de jQuery base, sustituyendo el // por el código que ahora comentaremos...
Lo siguiente que tenemos que hacer es decirle a jQuery a qué elemento del HTML queremos hacer referencia para que fije en él.
Hacer referencia al botón:
Así, le vamos a decir tres cosas en la misma línea de programación, y en el siguiente orden:
que se fije en el elemento llamado 'btn'
lo que tiene que mirar es detectar cuando el usuario haga clic sobre el
cuando esto ocurra le decimos qué ordenes tiene que realizar
Todo esto lo hacemos con la siguiente orden:
$("#btn").click(conjunto_de_ordenes1);
Vamos a analizar bien las tres partes del código.
Lo que está de color rojo es la manera en que hacemos referencia a cualquier objeto del HTML, tanto para dar la orden, como para quien la va a recibir:
$("#btn").click(conjunto_de_ordenes1);
Entre los paréntesis tenemos que poner el nombre del elemento en el que jQuery tiene que actuar. Si el nombre es un id, delante del nombre se le añade el "#" habitual, y si es una clase el "." (igual que ocurre con CSS).
$("#btn").click(conjunto_de_ordenes1);
Después viene lo que se llama el evento, que sirve para identificar cuándo tienen que ejecutarse las órdenes. En jQuery existe una lista de eventos prefijados y aquí se debe indicar uno de ellos.
$("#btn").click(conjunto_de_ordenes1);
Al final se indica qué ordenes tienen que ejecutarse. Según el ejemplo, cuando el usuario haga click sobre el elemento con id 'btn', jQuery tiene que irse a una carpeta llamada 'conjunto_de_ordenes1' y ejecutar lo que allí ponga.
¿Dónde indicamos las órdenes para el botón?
La carpeta de órdenes, en programación se llama función (function) y para agrupar a todas las órdenes empieza con un "{" y acaba con un "}".
Así, por ejemplo debajo de la línea de código anterior escribrimos:
function conjunto_de_ordenes1{
alert("Hola Javier");
}
Muy importante...
Si existe un único error de escritura en el código no se realizará ninguna órden, por eso en este ejemplo es muy importante fijarse en:
que cada línea de código en javaScript acabe en ;(punto y coma) (sino acaba en { o en }).
que cualquier nombre de función (o de elemento) no contenga espacios ni símbolos extraños (acentos, apóstrofes, etc..)
Así, el script completo sería:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Actividad: Hola mundo con un botón</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var x=$("document");
x.ready(inicio);
function inicio(){
$("#btn").click(saludo);
}
function saludo(){
alert("Hola Javier");
}
</script>
</head>
<body>
<button id="btn"> Hazme clic </button>
</body>
</html>
Utilizando botones
Conseguir jQuery