jQuery("write less, do more.", 2006)

jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones.

Hace que cosas como el recorrido y la manipulación de documentos HTML, el manejo de eventos, la animación y Ajax sean mucho más simples con una API fácil de usar que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.

Accede al sitio https://jquery.com y en la sección de descargas, encontras las versiones de:

Desarrollo y
Producción, la cual esta minificada

La descarga de jQuery es un archivo con extensión .js por tanto contiene código JavaScript, el cual se inserta como tal.

<script type="text/javascript" src="jquery.js"> </script>

El elemento HTML Script (<script>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML.

Digamos que en general la sintaxis de jQuery es $("objeto")

jQuery para hacer referencia al objeto documento el cual contiene el Modelo de objetos de documento (DOM) de la página y utiliza la siguiente sintaxis:

var doc =$(document)

Método document .ready()

El método .ready() ofrece una forma de ejecutar código JavaScript tan pronto como el Modelo de objetos de documento (DOM) de la página sea seguro de manipular.

Selectores de identificación

Selecciona un solo elemento con el atributo de id dado.

La sintaxis es $("#id")

Para los selectores de identificación, jQuery usa la función de JavaScript document.getElementById(), que es extremadamente eficiente.

Como es usual en JavaScript asociar eventos a etiquetas HTML como un id.click(function), se puede hacer lo propio en jQuery, teniendo como parámetro una función.

Del mismo modo podemos acceder a la apariencia a través de las hojas de estilo en cascada, para ello usamos el método css que tiene como parametros el nombre de la propiedad y su valor.

id.css(propiedad, valor)

Para acceder al atributo class de los elementos HTML se usa la notación de punto y el valor asignado al atributo class el cual por ejemplo puede ser el nombre de una clase de hojas de estilo en cascada abajo en el ejemplo.

$(".valorAsignadoAtributoClass")

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<input type="button" value="Número primos" id="btnOp"> (da clic's)
	<hr>
	<span class="clsPrimo">1</span>
	<span class="clsPar">2</span>
	<span class="clsPrimo">3</span>
	<span class="clsPar">4</span>
	<span class="clsPrimo">5</span>
	<span class="clsPar">6</span>
	<span class="clsPrimo">7</span>
	<span class="clsPar">8</span>
	<span class="clsPrimo">9</span>
	<span class="clsPar">10</span>
</body>
<script>
"use strict"
var estado = false  //controla el estado de colores
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función

function init(){
	let botonOP = $("#btnOp")   //referencia al botón
	let cls = $(".clsPar")      //referencia a un atributo class
	cls.css("color","red")      //inicializa el color
	botonOP.click(btnClic)      //manejador de eventos clic para el botón
}

function btnClic(){ //cuando se de clic al botón
	let cls = $(".clsPrimo")    //referencia a un atributo class
	if(estado){ //intercambia colores en cada clic
		estado = false  //control del estado
		cls.css("color","black")    //establece el color
		cls.css("background-color","white") //establece el color de fondo
	}else{
		estado = true
		cls.css("color","white")
		cls.css("background-color","black")
	}
}
</script>
</html>

Para acceder a todos los elementos o tags de HTML simplemente colocaremos el nombre del elemento o tag:

$("nombreElemento")

Para acceder a elementos o tags individuales se utilizará this en lugar del nombre de la etiqueta o elemento.

$(this)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<b style="color: red;"> Nota: Las etiquetas *** cambian de manera individual</b>
	<h3>Contenido en h3</h3><br>
	<section>*** Contenido en section ***</section><br>
	<div>Contenido en div</div><br>
	<span>*** Contenido en span ***</span><br>
	<code>Contenido en code</code><br>
	<hr>
	<h3>Contenido en h3</h3><br>
	<section>*** Contenido en section ***</section><br>
	<div>Contenido en div</div><br>
	<span>*** Contenido en span ***</span><br>
	<code>Contenido en code</code><br>
	<hr>
	<h3>Contenido en h3</h3><br>
	<section>*** Contenido en section ***</section><br>
	<div>Contenido en div</div><br>
	<span>*** Contenido en span ***</span><br>
	<code>Contenido en code</code><br>
	<hr>
</body>
<script>
"use strict"
let d       = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función

var h3  = $("h3")
var sec = $("section")
var div = $("div")
var spa = $("span")
var cod = $("code")    
function init(){
	h3.click(hClic)
	sec.click(secClic)
	div.click(divClic)
	spa.click(spaClic)
	cod.click(codClic)
}
function hClic(){
	h3.css("color","cornflowerblue")
	sec.css("font-size","12px")
}
function secClic(){
	sec = $(this)
	sec.css("color","blue")
	sec.css("font-size","16px")
}
function divClic(){
	div.css("color","lime")
	div.css("font-size","18px")
}
function spaClic(){
	spa = $(this)
	spa.css("color","orange")
	spa.css("font-size","20px")
}
function codClic(){
	cod.css("color","violet")
	cod.css("font-size","22px")
}
</script>
</html>

Es posible acceder a elementos HTML a través sus atributos, la sintaxis es:

$("[atributoTagHTML]")

Se podra acceder a todos los elementos HTML que tenga el atributo indicado.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section style="background-color: gray;color:azure">
		--<br>
		<section class="clsSec">Link's</section>
		<div id="divId">Div</div>
		<a href="">duck</a><br>
		<a href="">google</a><br>
		<a href="">yahoo</a><br>
		<section class="clsSec">li's</section>
		<div id="divId">Div</div>
		<ul>
			<li lang="es" type="square">duck</li>
			<li lang="es">google</li>
			<li lang="es">yahoo</li>
		</ul>
		</section>
		<input type="button" id="btnHref"    value="enlaces">
		<input type="button" id="btnSection" value="secciones">
		<input type="button" id="btnDiv"     value="div">
		<input type="button" id="btnLi"      value="lista de items">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var eHref = $("#btnHref")
var eSec = $("#btnSection")
var eDiv = $("#btnDiv")
var eLi = $("#btnLi")

function init(){
	eHref.click(accionHref)
	eSec.click(accionSec)
	eDiv.click(accionDiv)
	eLi.click(accionLi)
}
function accionHref(){
	$("[href]").css("color","red") //acceder al atributo de un tag HTML
}
function accionSec(){
	$("[class]").css("color","violet") //acceder al atributo de un tag HTML
}
function accionDiv(){
	$("[id]").css("color","blue") //acceder al atributo de un tag HTML
}
function accionLi(){
	$("[lang]").css("color","yellow") //acceder al atributo de un tag HTML
}
</script>
</html>

Búsqueda en los atributos

Es posible hacer búsquedas en los valores asociados a un atributo de una etiqueta HTML.

Esto es posible mediante los operadores de igual o diferente, así como de patrones, por ejemplo:

$("[nombreAtr = '#' ]") $("[nombreAtr != '#' ]") $("[nombreAtr $= 'patron' ]")

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section style="background-color: gray;color:azure">
		<hr>
		<section class="clsSec">Lista de enlaces:</section><br>
		<a style="color: yellow;" href="#">con #</a><br>
		<a style="color: yellow;" href="https://www.google.com.mx">https</a><br>
		<a style="color: yellow;" href="#">con #</a><br>
		<a style="color: yellow;" href="">sin valor en href</a><br><br>
	</section><br>
	<input type="button" id="btnConGato"  value="Enlaces con # en href">
	<input type="button" id="btnSinGato"  value="Enlaces sin # en href">
	<input type="button" id="btnConMX" value="Enlaces con .mx en href">
	<input type="button" id="btnSinHref"  value="Enlaces sin valor en href">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var eConGato  = $("#btnConGato")
var eConMX = $("#btnConMX")
var eSinHref  = $("#btnSinHref")
var eSinGato  = $("#btnSinGato")

function init(){
	eConGato.click(accionConGato)
	eConMX.click(accionConMX)
	eSinHref.click(accionSinHref)
	eSinGato.click(accionSinGato)
}
function accionConGato(){
	$("[href = '#' ]").css("color","red") //acceder al atributo de un tag HTML
}
function accionConMX(){
	$("[href $= '.mx' ]").css("color","cyan") //acceder al atributo de un tag HTML
}
function accionSinHref(){
	$("[href != '' ]").css("color","red") //acceder al atributo de un tag HTML
}
function accionSinGato(){
	$("[href != '#' ]").css("color","lime") //acceder al atributo de un tag HTML
}
</script>
</html>

Atributos específicos

Es posible acceder a un atributo específico, mediante el nombre del atributo y por ejemplo el caracter # seguido del valor de su id o el caracter dos puntos : y la referencia al elemento en una lista:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section style="background-color: gray;color:white"><br>
		<div id="div1">div 1 con id</div>
		<div>div 2 sin id</div>
		<a href="" id="a1">Enlace con id</a><br>
		<a href="">Enlace sin id</a><br>
		<ul>
			<li>Uno</li>
			<li>Dos</li>
			<li>Tres</li>
		</ul><br>
	</section><br>
	<input type="button" id="btn" value="cambia href con id">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var evento  = $("#btn")
function init(){
	evento.click(accionEvento)
}
function accionEvento(){
	$("a#a1").css("color","red") //acceder al atributo de un tag HTML
	$("div#div1").css("color","lime") //acceder al atributo de un tag HTML
	$("li:first").css("color","violet") //acceder al atributo de un tag HTML
	$("li:last").css("color","cyan") //acceder al atributo de un tag HTML
}
</script>
</html>

Obtenien el contenido de texto combinado de cada elemento en el conjunto de elementos coincidentes, incluidos sus descendientes, o establezca el contenido de texto de los elementos coincidentes.

Leer contenido de los elementos HTML:

$("tagHTML").text()

Cambiar el contenido de los elementos HTML:

$("tagHTML").text("nuevoContenido")

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section>Hola mundo</section>
	<input type="button" id="btnSec1" value="Obtener .text">
	<input type="button" id="btnSec2" value="Cambiar .text">
	<hr>
	<div>Hello world</div>
	<input type="button" id="btnDiv1" value="Obtener .text">
	<input type="button" id="btnDiv2" value="Cambiar .text">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var eventoSec1  = $("#btnSec1")
var eventoSec2  = $("#btnSec2")
var eventoDiv1  = $("#btnDiv1")
var eventoDiv2  = $("#btnDiv2")
//
function init(){
	eventoSec1.click(accionSec1)
	eventoSec2.click(accionSec2)
	eventoDiv1.click(accionDiv1)
	eventoDiv2.click(accionDiv2)
}
function accionSec1(){
	alert( $("section").text() )
}
function accionDiv1(){
	alert( $("div").text() )
}
function accionSec2(){
	$("section").text("cambio efectuado en elementos section")
}
function accionDiv2(){
	$("div").text("cambio efectuado en elementos div")
}
</script>
</html>

Obtiene el valor de un atributo para el primer elemento en el conjunto de elementos coincidentes o establece uno o más atributos para cada elemento coincidente.

$("tagHTML").attr("atributo") Leer
$("tagHTML").attr("atributo","valor") Modificar
$("tagHTML").removeAttr("atributo") Eliminar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section id="sec" style="color: blue;border: 1, cornflowerblue;">Hola mundo</section>
	<div id="div"     style="color: lime;border: 1, blue;">Hello world</div>
	<table border="1" ><tr><td>Hola mundo</td></tr></table>
	<input id="btnR" type="button" value="Read attr">
	<input id="btnW" type="button" value="Write attr">
	<input id="btnD" type="button" value="Delete attr">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var eventoR  = $("#btnR")
var eventoW  = $("#btnW")
var eventoD  = $("#btnD")
//
function init(){
	eventoR.click(accionR)
	eventoW.click(accionW)
	eventoD.click(accionD)
}
function accionR(){
	alert( $("section").attr("color") )
	alert( $("div").attr("border") )
	alert( $("table").attr("border-color") )
}
function accionW(){
	$("section").attr("color","red")
	$("table").attr("border","6")
	$("table").attr("border-color","cyan")
}
function accionD(){
	$("section").removeAttr("color")
	$("table").removeAttr("border-color")
}

</script>
</html>

Agrega la clase especificada a cada elemento en el conjunto de elementos coincidentes.

$("#idTag").addClass("cssCls") //Agregar clase

$("#idTag").removeClass("cssCls") //Remover clase

Obtiene el contenido HTML del primer elemento del conjunto de elementos coincidentes o configure el contenido HTML de cada elemento coincidente.

$("#idTag").html("htmlCode")

append() inserta contenido, especificado por el parámetro, al final de cada elemento en el conjunto de elementos coincidentes.

prepend() inserta contenido, especificado por el parámetro, al principio de cada elemento en el conjunto de elementos coincidentes.

after() inserta contenido, especificado por el parámetro, después de cada elemento en el conjunto de elementos coincidentes.

before() inserta contenido, especificado por el parámetro, antes de cada elemento en el conjunto de elementos coincidentes.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<section style="background-color:linen">Hola mundo</section>
	<hr>
	<input type="button" id="btnSec1" value="Obtener .text">
	<input type="button" id="btnSec2" value="Cambiar .text">
	<input type="button" id="btnSec3" value="Agregar .text al final">
	<input type="button" id="btnSec4" value="Agregar .text al inicio">
	<input type="button" id="btnSec5" value="after">
	<input type="button" id="btnSec6" value="Agregar .text al inicio">
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var eventoSec1  = $("#btnSec1")
var eventoSec2  = $("#btnSec2")
var eventoSec3  = $("#btnSec3")
var eventoSec4  = $("#btnSec4")
var eventoSec5  = $("#btnSec5")
var eventoSec6  = $("#btnSec6")
//
function init(){
	eventoSec1.click(accionSec1)
	eventoSec2.click(accionSec2)
	eventoSec3.click(accionSec3)
	eventoSec4.click(accionSec4)
	eventoSec5.click(accionSec5)
	eventoSec6.click(accionSec6)
}
function accionSec1(){
	alert( $("section").text() )
}
function accionSec2(){
	$("section").text("cambio efectuado en elementos section")
}
function accionSec3(){
	$("section").append(" texto agregado al final")
}
function accionSec4(){
	$("section").prepend("texto agregado al inicio ")
}
function accionSec5(){
	$("section").after(" BEFORE")
}
function accionSec6(){
	$("section").before("AFTER ")
}
</script>
</html>

mouseover() vincula un controlador de eventos al evento de JavaScript mouseover o activa ese evento en un elemento.

El evento mouseover se dispara en un elemento cuando se pasa el cursor sobre el elemento o uno de sus elementos secundarios.

mouseout() vincula un controlador de eventos al evento de JavaScript mouseout o activa ese evento en un elemento.

El evento mouseout se dispara en un elemento cuando el cursor de modo que ya no esté contenido dentro del elemento o uno de sus hijos.

mouseout también se entrega a un elemento si el cursor ingresa a un elemento secundario, porque el elemento secundario oscurece el área visible del elemento.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<style type="text/css">
		.estilo{
			width: 200px; 
			height: 50px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<table border="1">
		<tr>
            <td id="c1" class="estilo">Hola</td>
            <td id="c2" class="estilo">mundo</td>
		</tr>
	</table>
	<br>Pasa el mouse sobre las palabras
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var evento1  = $("#c1")
var evento2  = $("#c2")
//
function init(){
	evento1.mouseover(over)
	evento1.mouseout(out)
	evento2.mouseover(over)
	evento2.mouseout(out)
}
function over(){
	$(this).css("color","red") //acceder al atributo de un tag HTML
}
function out(){
	$(this).css("color","blue") //acceder al atributo de un tag HTML
}
</script>
</html>

Método hover()

Vincula uno o dos controladores a los elementos coincidentes, para que se ejecuten cuando el puntero del mouse entre y salga de los elementos.

Método mousemove()

Vincula un controlador de eventos al evento de JavaScript "mousemove" o activa ese evento en un elemento.

Captura el movimiento del mouse, en sus posición X, Y.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<style type="text/css">
		.estiloX{
			width: 500px; 
			height: 50px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
		.estiloY{
			width: 50px; 
			height: 200px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<table border="1">
		<tr>
			<td class="estiloY" rowspan="2" id="y">Y</td>
			<td class="estiloY"></td>
		</tr>
		<tr>
			<td class="estiloX" colspan="2" id="x">X</td>
		</tr>
	</table>
	<br>Mueve el mouse
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var evento1  = $("#c1")
//
function init(){
	d.mousemove(move)
}
function move(){
	$("#x").text("X: " + event.clientX)
	$("#y").text("Y: " + event.clientY)
}
</script>
</html>

Método mouseup()

Vincula un controlador de eventos al evento de JavaScript "mouseup" o activa ese evento en un elemento.

El evento mouseup se envía a un elemento cuando el puntero del mouse está sobre el elemento y se suelta el botón del mouse. Cualquier elemento HTML puede recibir este evento.

Método mousedown()

Vincula un controlador de eventos al evento de JavaScript "mousedown" o activa ese evento en un elemento.

El evento mousedown se envía a un elemento cuando el puntero del mouse está sobre el elemento y se presiona el botón del mouse. Cualquier elemento HTML puede recibir este evento.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<style type="text/css">
		.estilo{
			width: 200px; 
			height: 50px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<table border="1">
		<tr>
			<td id="c1" class="estilo">Hola</td>
			<td id="c2" class="estilo">mundo</td>
		</tr>
	</table>
	<br>Manten pulsado el botón aceptar del mouse 
	sobre alguna de las palabras por unos segundos y libera.
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var evento1  = $("#c1")
var evento2  = $("#c2")
//
function init(){
	evento1.mouseup(up)
	evento1.mousedown(down)
	evento2.mouseup(up)
	evento2.mousedown(down)
}
function up(){
	$(this).css("color","red") //acceder al atributo de un tag HTML
	$(this).css("background-color","white") //acceder al atributo de un tag HTML
}
function down(){
	$(this).css("color","lime") //acceder al atributo de un tag HTML
	$(this).css("background-color","black") //acceder al atributo de un tag HTML
}
</script>
</html>

Método dblclick()

Vincula un controlador de eventos al evento de JavaScript "dblclick" o activa ese evento en un elemento.

El evento dblclick se envía a un elemento cuando se hace doble clic en él. Cualquier elemento HTML puede recibir este evento.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<style type="text/css">
		.estilo{
			width: 200px; 
			height: 50px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<table border="1">
		<tr>
			<td id="c1" class="estilo">Hola mundo</td>
		</tr>
	</table>
	<br>Da doble clic continuo sobre la frase
</body>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
var evento1  = $("#c1")
var evento2  = $("#c1")
//
function init(){
	evento1.dblclick(dbl)
	evento2.click(clic)
}
function dbl(){
	$(this).css("color","red") //acceder al atributo de un tag HTML
	$(this).css("background-color","white") //acceder al atributo de un tag HTML
}
function clic(){
	$(this).css("color","lime") //acceder al atributo de un tag HTML
	$(this).css("background-color","black") //acceder al atributo de un tag HTML
}
</script>
</html>

Método focus()

Vincula un controlador de eventos al evento de JavaScript "focus" o activa ese evento en un elemento.

El evento de foco se envía a un elemento cuando gana foco. Este evento es aplicable implícitamente a un conjunto limitado de elementos, como elementos de formulario (<input>, <select>, etc.) y enlaces (<a href>). En las versiones recientes del navegador, el evento se puede ampliar para incluir todos los tipos de elementos estableciendo explícitamente la propiedad tabindex del elemento. Un elemento puede enfocarse a través de comandos de teclado, como la tecla Tab, o haciendo clic con el mouse en el elemento.

Método blur()

Vincula un controlador de eventos al evento de JavaScript "difuminado" o activa ese evento en un elemento.

El evento de desenfoque se envía a un elemento cuando pierde el foco. Originalmente, este evento solo se aplicaba a elementos de formulario, como <input>. En navegadores recientes, el dominio del evento se ha ampliado para incluir todos los tipos de elementos. Un elemento puede perder el foco a través de los comandos del teclado, como la tecla Tab, o al hacer clic con el mouse en cualquier otra parte de la página.

.hide() oculta los elementos coincidentes.

$( "tagHTML" ).hide();

.show() muestra los elementos coincidentes.

$( "tagHTML" ).show( "slow/fast" );

.fadeOut() oculta los elementos coincidentes atenuándolos a transparentes.

.fadeIn() muestra los elementos emparejados atenuándolos a opacos.

Muestra los elementos emparejados atenuándolos a opacos.

$( "tagHTML" ).fadeTo( "fast/slow", nivelTransparencia )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<style type="text/css">
		.estilo{
			width: 200px; 
			height: 50px;
			text-align: center;
			vertical-align: middle;
			font-size: 28px;
			font-weight: bold;
		}
		p {
			background: cyan;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
	
	<div>
		(<b>Cliqueame</b>) 
		<b style="color: blue;">
			Ejemplo de fadeTo(), fadeIn() y fadeOut()
		</b>
	</div>
	<br><div id="segundo">Da clic para restaurar</div><br>
	<hr>
	<p>Hola mundo</p>
	<a href="#">Clic para ocultar me</a>
	<p>Hello world</p>     
	<hr>
	
	<button>Mostrar</button>
	<p style="display: none">Ciao mondo</p>
</body>

Muestra u oculta los elementos coincidentes.

Otro ejemplo

slideUp() oculta los elementos emparejados con un movimiento deslizante.

slideDown() muestra los elementos emparejados con un movimiento deslizante.

Realice una animación personalizada de un conjunto de propiedades CSS.

La biblioteca jQuery tiene un conjunto completo de capacidades Ajax.

Las funciones y métodos que contiene nos permiten cargar datos desde el servidor sin necesidad de actualizar la página del navegador.

Carga datos del servidor y coloca el HTML devuelto en los elementos coincidentes.

Cliente:

Servidor:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	Hola mundo motero<hr>
	<p id="y" style="display: none">Yamaha RD 350 YPVS (1984)</p>
	<p id="k" style="display: none"> Kawasaki ZXR 750 J1 (1991)</p>
	<p id="s" style="display: none">Suzuki GSX-R750 (1986)</p>
	<p id="h" style="display: none">Honda NR 750 (1992)</p>
	<p id="x" style="display: none">¡No conducimos esa marca!</p>
</html>
<script>
"use strict"
let d = $(document) //obtiene el DOM
d.ready(init)       //cuando termine de cargar el DOM, invoca una función
function init(){
	$( "p" ).hide();
	/*queryString manager*/
	let params = new URLSearchParams(document.location.search.substring(1));
	//let age = parseInt(params.get("age"), 10);
	let marca = params.get("marca"); 
	if(marca === "y"){
		$( "#y" ).show( "slow" );
	}else if(marca === "k"){
		$( "#k" ).show( "slow" );
	}else if(marca === "s"){
		$( "#s" ).show( "slow" );
	}else if(marca === "h"){
		$( "#h" ).show( "slow" );
	}else{
		$( "#x" ).show( "slow" );
	}
}
</script>

Objeto de lista de devoluciones de llamada multipropósito que proporciona una forma poderosa de administrar listas de devolución de llamada.

jQuery UI es un conjunto curado de interacciones, efectos, widgets y temas de la interfaz de usuario creados sobre la biblioteca jQuery JavaScript.

Ya sea que esté creando aplicaciones web altamente interactivas o simplemente necesite agregar un selector de fecha a un control de formulario, jQuery UI es la elección perfecta.

Accede al sitio de https://jqueryui.com/, para ello ubica la sección de descargas y la versión de tu conveniencia, que puede ser la versión estable, legada y es posible personalizar esta.

Al igual que jQuery se tendrá un archivo con extensión .js que contiene un script a manera de biblioteca de funciones, en este caso jQuery UI.

Para usar jQuery UI agrega un elemento script:

<script type="text/javascript" src="jquery-ui.js"></script>

Permite que los elementos se muevan con el mouse.

Crea objetivos para elementos arrastrables.

Permite a los usuarios buscar y seleccionar rápidamente de una lista de valores rellenada previamente a medida que escriben, aprovechando la búsqueda y el filtrado.

Seleccionar una fecha de un calendario emergente o en línea.

Contenido abierto en una superposición interactiva.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rocket</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-ui.js"></script>
</head>
<body>
	<ul>
		<li id="rd">Yamaha</li>     
		<li id="zxr">Suzuki</li>     
		<li id="gsx">Honda</li>      
		<li id="nr">Kawasaki</li>   
	</ul>
	<div id="y" style="display: none">Yamaha RD 350 YPVS (1984)	</div>
	<div id="k" style="display: none">Kawasaki ZXR 750 J1 (1991)	</div>
	<div id="s" style="display: none">Suzuki GSX-R750 (1986)		</div>
	<div id="h" style="display: none">Honda NR 750 (1992)		</div>

Un área de contenido única con varios paneles, cada uno asociado con un encabezado en una lista.

Es posible descargar y configurar temas de jQuery, es decir, dar la aparencia necesaria o look and feel que deseamos y descargar un tema personalizado.

https://jqueryui.com/themeroller/

References