Tutorial: Uso básico de jQuery (Parte 1)

closeHola! hace 5 years 2 months 24 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Esta es la primera parte del tutorial de uso básico de jQuery que estaré escribiendo para todos ustedes a lo largo de este mes, espero que les sea de mucha ayuda a aquellas personas que estan entrando en el mundo de jQuery.

He tratado de desarrollar este tutorial lo mas sencillo y util posible para que todas las personas puedan entender fácil mente las funcionalidades básicas de este framework.

TABLA CONTENIDO

  1. Agregando jQuery desde el CDN de Google
  2. Document ready
  3. Evento Click
  4. Selectores (Id y Clases)
  5. Ocultar elementos (Hide)
  6. Mostrar elementos (Show)

Agregar jQuery en nuestro head (Yo usare la ultima versión de jQuery alojada en el CDN de Google)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

La función Docuement Ready

Esta función lo que hace es invocar o ejecutar un código JavaScript cuando todos los elementos de la pagina (DOM) estén cargados.

$(document).ready(function() {
    Agrega tu codigo aqui
});

Ejemplo de uso:

<script>
$(document).ready(function() {
    alert('La pagina se ha cargado correctamente');
});
</script>

Evento click

Esta función nos permite controlar el evento click de un elemento

$("#id_del_elemento").click(function() {
  alert('Click');
});

Ejemplo de uso:

<button id="target">Presioname</button>
<script>
$("#target").click(function() {
  alert("Click");
});
</script>

Selectores

Es la forma que podemos acceder a un elemento de nuestra pagina, veamos 2 ejemplos de los mas usados:

#id_elemento: Con el “#” seguido de un texto le estamos diciendo a jQuery que acceda al elemento por su ID
.clase_elemento: Con el “.” seguido de un texto le estamos diciendo a jQuery que acceda al elemento por su clase

Ejemplo de uso por ID:

$('#id_elemento')

Explicación:
“$()” : Es la forma de usar jQuery para realizar cualquier acción sobre un elemento.
“#” : Le decimos a jQuery que vamos a seleccionar un elemento por su ID.
“id_elemento” : Es el id del elemento que camos a seleccionar.

Ejemplo de uso por Clase:

$('.class')

Explicación:
“$()” : Es la forma de usar jQuery para realizar cualquier acción sobre un elemento.
“.” : Le decimos a jQuery que vamos a seleccionar un elemento por su clase.
“class” : Es la clase del elemento que camos a seleccionar.

En los ejemplos anteriores (Al comienzo del tutorial) hemos visto el uso del selector ID, veamos el mismo ejemplo del click pero con el uso de la clase:

<button class="mi_boton">Presioname</button>
<script>
$(".mi_boton").click(function() {
  alert("Click");
});
</script>

Listado completo de selectores

En próximos tutoriales veremos esta funcionalidad en un nivel mas profundo.

Mostrando y Ocultando elementos con jQuery (Hide y Show):

Existen muchas formas de ocultar y mostrar elementos con jQuery, en esta parte del tutorial, les explicare la forma mas común y fácil de realizar esa tarea:

Hide()

Esta función nos permite ocultar un elemento.

Ejemplo:

<div id="my_div_1">
Hola mundo dice el div my_div_1
</div>
<button id="target">Ocultar div 1</button>
<script>
$("#target").click(function() {
  $("#my_div_1").hide();
});
</script>

En el ejemplo anterior podemos hacer una variación y escribir:

<script>
$("#target").click(function() {
  $("#my_div_1").hide(1000);
});
</script>

En donde 1000 son los mili segundos que queremos que dure la animación de ocultar el elemento.

Show()

Esta función nos permite mostrar un elemento que se encuentre oculto.

Ejemplo:

<div id="my_div_2">
Hola mundo dice el div my_div_2
</div>
<button id="target">Ocultar div 2</button>
<script>
$("#target").click(function() {
  $("#my_div_2").show();
});
</script>

En el ejemplo anterior podemos hacer una variación y escribir:

<script>
$("#target").click(function() {
  $("#my_div_2").show(1000);
});
</script>

En donde 1000 son los mili segundos que queremos que dure la animación de mostrar el elemento.


Tutorial: Uso básico de jQuery (Parte 2) -> Próximamente

You may also like...

1 Response

  1. Desdo09 dice:

    buena info, espero el proximo tuto

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *