Hay varias maneras de comenzar a usar jQuery en su sitio web. Puedes:
La biblioteca jQuery es un único archivo JavaScript y se hace referencia a él con el código la etique HTML <script>
(La etiqueta <script> debe estar dentro de la seccion <head> ):
<head>
<script src="jquery-3.6.0.min.js"></script>
</head>
Consejo: Coloque el archivo descargado en el mismo directorio que las páginas en las que desea utilizarlo
Si no desea descargar y alojar jQuery usted mismo, puede incluirlo desde un enlace . CDN (Content Delivery Network).
Google es un ejemplo de un enlace CDN para jQuery:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML y realizar alguna acción en los elementos.
Syntaxis basica : $(selector).accion/metodo()
i) El signo $ define/permite el acceder a jQuery
ii) (selector) para "consulta (o busqueda)" de elementos HTML
iii) Una accion/metodo() para leer/modificar el elemento(s)
Los selectores jQuery permiten seleccionar y manipular los elementos HTML.
El elemento selector jQuery selecciona los elementos basados en el nombre.
Puedes seleccionar todos los elementos
<p>
de una pagina de la siguiente manera : $("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
El selector de #id jQuery utiliza el atributo id de una etiqueta HTML para encontrar el elemento específico.
Para encontrar un elemento con un id específico, escriba un carácter #, seguido del id del elemento HTML: $("#test")
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
El selector .class de jQuery busca elementos con una clase específica.
Para buscar elementos con una clase específica, escriba un carácter de punto, seguido del nombre de la clase: $(".test")
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
| Selector | Que hace | |
|---|---|---|
| $("*") | Selecciona todos los elementos | |
| $(this) | Selecciona el elemento HTML actual | |
| $("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 <li> del primer <ul> | |
| $("ul li:first-child") | Selecciona el primer elemento <li> de cada <ul> | |
| $("[href]") | Selecciona todos los elementos con un atributo href | |
| $("a[target='_blank']") | Selecciona todos los elementos <a> con un valor de atributo de destino IGUAL A "_blank" | |
| $("a[target!='_blank']") | Selecciona todos los elementos <a> con un valor de atributo de destino NO IGUAL A "_blank" | |
| $(":button") | Selecciona todos los elementos <button> y elementos <input> tipo type="button" | |
| $("tr:even") | Selecciona todos los elementos pares <tr> | |
| $("tr:odd") | Selecciona todos los elementos impares <tr> |
¿Qué son los 'Eventos'??
Todas las diferentes acciones de los visitantes a las que puede responder una página web se denominan eventos.
En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente.
Para asignar un evento de clic a todos los párrafos de una página, puede hacer lo siguiente: $("p").click();
El siguiente paso es definir lo que debe suceder cuando se desencadena el evento. Debe pasar una función al evento:
//EJEMPLO PARA UN ELEMENTO "FIJO" (que esta escrito en HTML original)
$("p").click(function()
{
// La accion va aqui!!
});
//EJEMPLO PARA UN ELEMENTO "DINAMICO" (que crea dentro del codigo )
$(document).on("click","p" function()
{
// La accion va aqui!!
});
| Evento | ¿ Que hace ? | |
|---|---|---|
| $(document).ready() | nos permite ejecutar una función cuando el documento está completamente cargado | |
| click() | adjunta una función de controlador de eventos a un elemento HTML. La función se ejecuta cuando el usuario hace clic en el elemento HTML. | |
| dblclick() | adjunta una función de controlador de eventos a un elemento HTML. La función se ejecuta cuando el usuario hace doble clic en el elemento HTML. | |
| mouseenter() | adjunta una función de controlador de eventos a un elemento HTML. La función se ejecuta cuando el puntero del ratón entra en el elemento HTML. | |
| mouseleave() | attaches an event handler function to an HTML element.The function is executed when the mouse pointer leaves the HTML element. | |
| mousedown() | adjunta una función de controlador de eventos a un elemento HTML. La función se ejecuta cuando se presiona el botón izquierdo, central o derecho del mouse, mientras el mouse está sobre el elemento HTML. | |
| mouseup() | adjunta una función de controlador de eventos a un elemento HTML. La función se ejecuta cuando se suelta el botón izquierdo, central o derecho del ratón, mientras el ratón está sobre el elemento HTML | |
| hover() | Toma dos funciones y es una combinación de los métodos mouseenter() y mouseleave(). La primera función se ejecuta cuando el ratón entra en el elemento HTML, y la segunda función se ejecuta cuando el ratón abandona el elemento HTML. | |
| focus() | adjunta una función de controlador de eventos a un campo de formulario HTML. La función se ejecuta cuando el campo del formulario obtiene el foco.. | |
| blur() | adjunta una función de controlador de eventos a un campo de formulario HTML. La función se ejecuta cuando el campo del formulario pierde el foco.. | |
| The on() Method | Adjunta uno o varios controladores de eventos para los elementos seleccionados. Adjunte un evento de clic a un elemento <p> |
AJAX = Asynchronous JavaScript and XML.
En resumen; AJAX consiste en cargar datos en segundo plano y mostrarlos en la página web, sin tener que volver a cargar toda la página.
Ejemplos de aplicaciones que utilizan AJAX: pestañas de Gmail, Google Maps, Youtube y Facebook.
jQuery proporciona varios métodos para la funcionalidad de AJAX. Con los métodos AJAX de jQuery, puede solicitar texto, HTML, XML o JSON de un servidor remoto utilizando HTTP Get y HTTP Post, y puede cargar los datos externos directamente en los elementos HTML seleccionados de su página web.
El método jQuery load() es un método AJAX simple pero potente.
El método load() carga datos de un servidor y coloca los datos devueltos en el elemento seleccionado.
Syntax:
$(selector).load(URL,data,callback);
El método $.get() solicita datos del servidor con una solicitud HTTP GET
Syntax:
$.get(URL,callback);
El método $.post() solicita datos del servidor mediante una solicitud HTTP POST..
Syntax:
$.post(URL,data,callback);
The following table lists all the jQuery methods for creating animation effects.
| Metodo | Descripcion |
|---|---|
| animate() | Ejecuta una animación personalizada en los elementos seleccionados |
| clearQueue() | Elimina todas las funciones en cola restantes de los elementos seleccionados |
| delay() | Establece un retraso para todas las funciones en cola en los elementos seleccionados |
| dequeue() | Quita la siguiente función de la cola y, a continuación, ejecuta la función |
| fadeIn() | Fundidos en los elementos seleccionados |
| fadeOut() | Difumina los elementos seleccionados |
| fadeTo() | Fundidos de entrada/salida de los elementos seleccionados a una opacidad determinada |
| fadeToggle() | Alterna entre los métodos fadeIn() y fadeOut() |
| finish() | Detiene, elimina y completa todas las animaciones en cola de los elementos seleccionados |
| hide() | Oculta los elementos seleccionados |
| queue() | Muestra las funciones en cola en los elementos seleccionados |
| show() | Muestra los elementos seleccionados |
| slideDown() | Desliza hacia abajo (muestra) los elementos seleccionados |
| slideToggle() | Alterna entre los métodos slideUp() y slideDown() |
| slideUp() | Desliza hacia arriba (oculta) los elementos seleccionados |
| stop() | Detiene la animación que se está ejecutando actualmente para los elementos seleccionados |
| toggle() | Alterna entre los métodos hide() y show() |
En la tabla siguiente se enumeran todos los métodos utilizados para manipular el HTML y el CSS.
| Metodo | Descripcion |
|---|---|
| addClass() | Agrega uno o más nombres de clase a los elementos seleccionados |
| after() | Inserta contenido después de los elementos seleccionados |
| append() | Inserta contenido al final de los elementos seleccionados |
| appendTo() | Inserta elementos HTML al final de los elementos seleccionados |
| attr() | Establece o devuelve atributos/valores de los elementos seleccionados |
| before() | Inserta contenido antes de los elementos seleccionados |
| clone() | Realiza una copia de los elementos seleccionados |
| css() | Establece o devuelve una o varias propiedades de estilo para los elementos seleccionados |
| detach() | Elimina los elementos seleccionados (conserva los datos y los eventos) |
| empty() | Elimina todos los nodos secundarios y el contenido de los elementos seleccionados |
| hasClass() | Comprueba si alguno de los elementos seleccionados tiene un nombre de clase especificado |
| height() | Establece o devuelve la altura de los elementos seleccionados |
| html() | Establece o devuelve el contenido de los elementos seleccionados |
| innerHeight() | Devuelve la altura de un elemento (incluye el relleno, pero no el borde) |
| innerWidth() | Devuelve el ancho de un elemento (incluye relleno, pero no borde) |
| insertAfter() | Inserta elementos HTML después de los elementos seleccionados |
| insertBefore() | Inserta elementos HTML antes de los elementos seleccionados |
| offset() | Establece o devuelve las coordenadas de desplazamiento de los elementos seleccionados (en relación con el documento) |
| offsetParent() | Devuelve el primer elemento primario posicionado |
| outerHeight() | Devuelve la altura de un elemento (incluye relleno y borde) |
| outerWidth() | Devuelve el ancho de un elemento (incluye relleno y borde) |
| position() | Devuelve la posición (en relación con el elemento primario) de un elemento |
| prepend() | Inserta contenido al principio de los elementos seleccionados |
| prependTo() | Inserta elementos HTML al principio de los elementos seleccionados |
| prop() | Establece o devuelve propiedades/valores de los elementos seleccionados |
| remove() | Elimina los elementos seleccionados (incluidos los datos y los eventos) |
| removeAttr() | Elimina uno o más atributos de los elementos seleccionados |
| removeClass() | Elimina una o más clases de los elementos seleccionados |
| removeProp() | Elimina una propiedad establecida por el método prop() |
| replaceAll() | Reemplaza los elementos seleccionados con nuevos elementos HTML |
| replaceWith() | Reemplaza los elementos seleccionados con contenido nuevo |
| scrollLeft() | Establece o devuelve la posición de la barra de desplazamiento horizontal de los elementos seleccionados |
| scrollTop() | Establece o devuelve la posición vertical de la barra de desplazamiento de los elementos seleccionados |
| text() | Establece o devuelve el contenido de texto de los elementos seleccionados |
| toggleClass() | Alterna entre agregar o eliminar una o más clases de los elementos seleccionados |
| unwrap() | Elimina el elemento primario de los elementos seleccionados |
| val() | Establece o devuelve el atributo value de los elementos seleccionados (para elementos de formulario) |
| width() | Establece o devuelve la anchura de los elementos seleccionados |
| wrap() | Ajusta los elementos HTML alrededor de cada elemento seleccionado |
| wrapAll() | Ajusta los elementos HTML alrededor de todos los elementos seleccionados |
| wrapInner() | Ajusta los elementos HTML alrededor del contenido de cada elemento seleccionado |
| <br> |