jquery

John Cardozo

jquery

qué es jquery?

Librería javascript liviana

Escribir menos, hacer más

Facilita la escritura de Javascript

Manipulación de HTML/DOM

Manipulación CSS

Eventos HTML

Efectos y animaciones

AJAX

Características

uso de jquery

CDN

Descarga

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<head>
<script src="jquery-3.6.1.min.js"></script>
</head>

sintaxis de jquery

Sintaxis básica

Define o permite el acceso a JQuery

$(selector).accion();

Buscar elementos HTML

Acción a ejecutar en los elementos

Signo $

Selector

Acción

uso básico de jquery

jquery listo para funcionar

document.ready

$(document).ready(function(){
  // Instrucciones
});

shortcut

$(function(){
  // Instrucciones
});

Asegura que la ejecución de JQuery se haga cuando el DOM Tree está creado

selectores

elemento

$("elemento")

identificador

$("#identificador")

clase

$(".clase")

Sintaxis	Descripción
$("*")	Selecciona todos los elementos
$(this)	Selecciona el elemento actual HTML
$("p.intro")	Selecciona todos los elementos <p> con la clase "intro"
$("p:first")	Selecciona el primer elemento <p>
$("ul li:first")	Selecciona el primer elemento hijo <li> del elemento <ul>
$("[href]")	Selecciona todos los elementos con un atributo href

metodos de eventos

sintaxis

$(selector).evento(function(){
  // instrucciones
});

ejemplo

$("#boton").click(function(){
  console.log("Se hizo click");
});

Eventos de mouse	Eventos de teclado	Eventos de formularios	Eventos de documento/ventana
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Eventos comunes

evento: on

ON: agrega administradores de eventos al elemento

$("p").on("click", function(){
  $(this).hide();
});

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  }, 
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  }, 
  click: function(){
    $(this).css("background-color", "yellow");
  } 
});

Se pueden encadenar varios administradores de eventos

efectos con jquery

mostrar/ocultar elementos

Alternar elemento

$("#boton").click(function(){
  $("p").toggle();
});

Ocultar elemento

Mostrar elemento

$("#boton").click(function(){
  $("p").show();
});

$("#boton").click(function(){
  $("p").hide();
});

show(1000)

velocidad

hide(1000)

velocidad

toggle(1000)

velocidad

mostrar elementos con fadein

Javascript

$("#boton").click(function () {
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

<button id="boton">fadeIn</button>
<div id="div1" style="background-color: yellow"></div>
<div id="div2" style="background-color: blue"></div>
<div id="div3" style="background-color: red"></div>

div {
  width: 80px;
  height: 80px;
  display: none;
}

CSS

HTML

importante

ocultar elementos con fadeout

Javascript

$("#boton").click(function () {
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

<button id="boton">fadeOut</button>
<div id="div1" style="background-color: yellow"></div>
<div id="div2" style="background-color: blue"></div>
<div id="div3" style="background-color: red"></div>

div {
  width: 80px;
  height: 80px;
}

CSS

HTML

mostrar elementos con slidedown

Javascript

$("#boton").click(function () {
  $("#panel").slideDown("slow");
});

<button id="boton">Click para mostrar el panel</button>
<div id="panel">Hello world!</div>

#panel {
  padding: 20px;
  background: red;
  color: white;
  display: none;
}

CSS

HTML

importante

ocultar elementos con slideup

Javascript

$("#boton").click(function () {
  $("#panel").slideUp("slow");
});

<button id="boton">Click para mostrar el panel</button>
<div id="panel">Hello world!</div>

#panel {
  padding: 20px;
  background: red;
  color: white;
}

CSS

HTML

MOSTRAR/ocultar elementos con slidetoggle

Javascript

$("#boton").click(function () {
  $("#panel").slideToggle("slow");
});

<button id="boton">Click para mostrar el panel</button>
<div id="panel">Hello world!</div>

#panel {
  padding: 20px;
  background: red;
  color: white;
  display: none;
}

CSS

HTML

importante

animate

Javascript

$("#boton").click(function () {
  $("#panel").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px",
  });
});

<button id="boton">Start Animation</button>
<div id="panel"></div>

#panel {
  background: #98bf21;
  height: 100px;
  width: 100px;
  position: absolute;
}

CSS

HTML

importante

Por defecto, todos los elementos HTML tienen posición estática y no se pueden mover. Para manipular la posición, se debe configurar la propiedad position del elemento con los valores: relative, fixed, o absolute

callback

La función callback se ejecutará después de que el efecto de animación se haya completado

$("#boton").click(function(){
  $("p").hide("slow", function(){
    alert("El párrafo está oculto!");
  });
});

La función de callback está disponible para todas las funciones de efectos

manipulación de html

text, html y val - obtener info

text

val

html

modifica o retorna el texto del elemento

modifica o retorna el HTML del elemento

modifica o retorna el valor de los campos de un formulario

$("#boton").click(function(){
  console.log("Texto: " + $("#parrafo").text());
});

$("#boton").click(function(){
  console.log("HTML: " + $("#div").html());
});

$("#boton").click(function(){
  console.log("Valor: " + $("#textNombre").val());
});

text, html y val - modificar info

text

val

html

modifica o retorna el texto del elemento

modifica o retorna el HTML del elemento

modifica o retorna el valor de los campos de un formulario

$("#boton").click(function(){
  $("#parrafo").text("nuevo texto");
});

$("#boton").click(function(){
  $("#div").html("<b>Esto es HTML</b>");
});

$("#boton").click(function(){
  $("#textNombre").val("Hola");
});

attr: atributos

Obtener el valor de un atributo

Modificar el valor de una tributo

$("#boton").click(function(){
  $("#link").attr("href", "https://aws.amazon.com");
});

$("#boton").click(function(){
  console.log($("#link").attr("href"));
});

Modificar varios atributos

$("#boton").click(function(){
  $("#link").attr({
    "href" : "https://aws.amazon.com",
    "title" : "Amazon Web Services"
  });
});

agregar elementos

append

prepend

$("p").prepend("Texto adicional");

$("p").append("Texto adicional");

Inserta contenido después del elemento

$("img").after("Texto después");

Inserta contenido al final del elemento

Inserta contenido al inicio del elemento

after

Inserta contenido antes del elemento

before

$("img").before("Texto antes");

eliminar elementos

remove

empty

$("ul").empty();

$("#div1").remove();

Eimina un elemento y sus hijos

Elimina los hijos del elemento

remove con parámetros

Elimina todos los <p> con class="test" y class="demo"

$("p").remove(".test, .demo");

clases css

addClass

removeClass

$("h1, h2, p").removeClass("blue");

$("h1, h2, p").addClass("blue");
$("div").addClass("important blue");

Agrega clases CSS al elemento

Elimina clases CSS al elemento

toggleClass

$("h1, h2, p").toggleClass("blue");

Alterna clases CSS en el elemento

css

$("p").css("background-color", "yellow");
$("p").css({"background-color": "yellow", "font-size": "200%"});

Obtiene o modifica un atributo style

john cardozo

johncardozo@gmail.com