Guiajquery

Universidad Politécnica Territorial Andrés Eloy
Blanco
Programa Nacional de Formación en Informática
Conceptos básicos: Java Script Básico, JQuery y HTML.
Unidad III : JQuery
Objetivo de la Unidad:
Aprende la programación con jQuery para la creación de aplicaciones del
lado del cliente: validación de formularios, efectos dinámicos y manejo
de eventos.
Desarrollo
JQuery es uno de los complementos más esenciales para el desarrollo web,
usado en millones de sitios en toda la web, ya que nos facilita mucho el
desarrollo de aplicaciones enriquecidas del lado del cliente, en
Javascript, compatibles con todos los navegadores. jQuery no es un
lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto,
Javascript es el lenguaje y jQuery es una librería que podemos usar
opcionalmente si queremos facilitar nuestra vida cuando programamos en
Javascript. A veces nos podemos referir a jQuery como framework o incluso
como un API de funciones, útiles en la mayoría de proyectos web.
jQuery es un framework Javascript, pero quizás muchos de los lectores se
preguntarán qué es un framework. Pues es un producto que sirve como base
para la programación avanzada de aplicaciones, que aporta una serie de
funciones o códigos para realizar tareas habituales. Por decirlo de otra
manera, framework son unas librerías de código que contienen procesos o
rutinas ya listos para usar.
Pasos para utilizar jQuery en tu página web:
1.- Descarga la última versión del framework
Accede a la página de jQuery para descargar la última versión del framework.
https://jquery.com/
Componentes.

Blanco
Verás que la descarga es un archivo js que contiene el código completo del framework. Coloca el
archivo en una carpeta en tu ordenador para hacer las pruebas.
jquery-3.6.0.slim.min.js
Uso
Para incorporar JQ dentro de una pagina web, es necesario llamar a un
archivo externo por medio de la etiqueta <script>

Blanco
<script src=" jquery-3.6.0.slim.min.js"></script>
Donde jquery-3.6.0.slim.min.js, es la librería de jquery descargada de
internet, se recomienda tenerla como local y no haciendo un llamado a una
dirección externa como googleapis, debido a que de la segunda forma, no
funcionaría nuestra página sin conexión a internet, es recomendable hacer
el llamado a la librería dentro de sección head de su página web.
Sintaxis de jQuery
La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML
y realizar alguna acción en los elementos.
La sintaxis básica es: $ ( selector ). acción ()
Un signo $ para definir / acceder a jQuery.
Un ( selector ) para "consultar (o buscar)" elementos HTML
Una acción jQuery () que se realizará en los elementos.
Ejemplos:
$(this).hide() - oculta el elemento actual.
$("p").hide() - oculta todos los elementos <p>.
$(".test").hide() - oculta todos los elementos con class = "test".
$("#test").hide() - oculta el elemento con id = "test".
El selector #id
La sintaxis para seleccionar un elemento particular de la página mediante
la propiedad id es:
$("#nombre del id")
El selector de jQuery usa el atributo id de una etiqueta HTML para
encontrar el elemento específico.
#id
Una identificación debe ser única dentro de una página, por lo que debe
usar el selector #id cuando desee encontrar un elemento único y único.
Para encontrar un elemento con una identificación específica, escriba un
carácter hash, seguido por la identificación del elemento HTML:
$("#test").
Ejemplo: por atributo id. (Tipear en editor de texto y ejecutar para
ver su funcionamiento
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#EB1A1A">
<title>Sintaxis Basica de JQuery </title>
<script src="jquery-3.6.0.slim.min.js" type="text/javascript"></script>
</head>
<body>

Blanco
<h2>Este es un encabezado</h2>
<p>Este es un párrafo..</p>
<p id="test">Se oculta al hacer click.</p>
<button>Click aquí</button>

<script type="text/javascript" src="sintaxis.js"></script>
</body>
</html>
Archivo jquery sintaxis.js
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Otro Ejemplo: página que muestre dos títulos de primer nivel, al ser
presionados cambiar el color de la fuente, fondo y la fuente del texto.
(Tipear en editor de texto y ejecutar para ver su funcionamiento)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="titulo1">Primer título</h1>
<h1 id="titulo2">Segundo título</h1>
<script type="text/javascript" src="funcionamiento.js"></script>
</body>

Blanco
</html>
Arvhivo funcionamiento.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#titulo1");
x.click(presionTitulo1)
x = $("#titulo2");
}
function presionTitulo1() {
x.css("color", "#ff0000");
x.css("background-color", "#ffff00");
x.css("font-family", "Courier");
}
x.css("color", "#ffff00");
x.css("background-color", "#ff0000");
x.css("font-family", "Arial");
}
Explicación del código
Como va ser costumbre siempre que trabajemos con esta librería primero
creamos un objeto jquery a partir de la referencia a 'document' y luego
llamamos al método ready indicándole el nombre de la función que debe
ejecutarse luego de generarse el árbol de elementos HTML para la página:

Blanco
let x = $(document);
La función inicializarEventos se ejecuta una vez que se cargó la página y
están creados todos los elementos HTML, en esta función mediante $
accedemos a través del id a los elementos h1 respectivos, a casa uno le
asignamos al evento click una función distinta que se disparará cuando
presionemos con el mouse:
function inicializarEventos() {
x = $("#titulo2");
}
Es importante notar que cuando obtenemos la referencia de un elemento por
medio del id se le antecede el carácter # al nombre del id:
x=$("#titulo1");
...
x=$("#titulo2");
Luego las dos funciones que se ejecutan al presionar los títulos:
}

Blanco
x.css("color", "#ffff00");
x.css("background-color", "#ff0000");
x.css("font-family", "Arial");
}
Hasta ahora hemos presentado los siguientes métodos que tiene jquery:
ready
click
El tercer método nos permite modificar una propiedad de la hoja de estilo
de un elemento HTML:
Una vez que hemos obtenido la referencia a un elemento HTML llamamos al
método css que tiene dos parámetros: el primero indica el nombre de la
propiedad y el segundo el valor a asignarle. Podemos ver las otras dos
asignaciones:
Como podemos ver es muy fácil acceder al estilo de un elemento HTML para
actualizarlo en forma dinámica luego que la página fue cargada.
Accediendo a los objetos del documento (DOM)
Para acceder a los elementos del DOM (etiquetas de la pagina web en
ingles Document Organization Model) desde jquery, se usa la siguiente
simbología
1) $(etiqueta) donde etiqueta es cualquier etiqueta html valida; al
acceder de esta forma se están tomando todas las etiquetas del mismo tipo
en el documento; esta forma no funciona para etiquetas que dependen del
atributo type para su funcionamiento tales como input y button.
Un ejemplo seria: $(“p”) donde la instrucción, está haciendo referencia a
todas las etiquetas <p> de la pagina web
2) $(“etiqueta[type=’tipo’]”) en este caso se coloca el nombre de la
etiqueta seguida de corchetes y la palabra reservada type mas el tipo
separada por dos puntos

Blanco
Para acceder a todas las etiquetas input de tipo text que existan dentro
del documento, seria:
$("input[type='text']")
3) $(“#id”) acá, se hace referencia a cualquier etiqueta dentro del
documento que posea un atributo id, recuerde que el atributo id, debe ser
único para cada etiqueta dentro del documento html a fin de garantizar el
correcto funcionamiento de jquery.
Core de jQuery
El core de jQuery es la base sobre la que se trabaja para hacer cualquier
cosa con jQuery. Contiene una serie de clases y métodos útiles para hacer
tareas reiterativas, que vamos a necesitar en las aplicaciones. Integra
desde funciones que serán útiles en cualquier script, por sencillo que
sea, hasta funciones menos recurridas pero que nos facilitarán la vida a
hora de hacer código limpio, corto y reutilizable.
Utilizaremos el Core para realizar cosas útiles con objetos, clases,
datos, etc, pero realmente lo que más haremos será utilizar la función
jQuery, que es el pilar fundamental sobre el que se basarán las
aplicaciones.
La función jQuery, también conocida como $()
La función jQuery sirve para hacer varias cosas, según los parámetros que
le pasemos. El uso más simple es seleccionar elementos o grupos de
elementos de una página web, pero también sirve para crear elementos
sobre la marcha o para hacer un callback de funciones. En realidad esta
función se invoca también con el símbolo dólar $(), lo que sería una
manera resumida de utilizarla y que nos ahorrará bastantes caracteres en
el código.
Veamos un uso de esta función:
var elem1 = $("#elem1");
Con esta línea de código habremos seleccionado un elemento de la página
que tiene el identificador (atributo id del elemento HTML) "elem1" y lo
hemos guardado en una nueva variable llamada elem1. La variable elem1
guardará entonces lo que se llama el objeto jQuery con el cual podremos
trabajar, solicitando métodos o funciones de dicho objeto, para trabajar
con el elemento seleccionado.
Luego, podríamos hacer cualquier cosa con ese elemento seleccionado, como
lo siguiente:
elem1.css("background-color", "#ff9999");

Blanco
Este método css() no forma parte del core, pero sirve para cambiar
atributos CSS de un elemento, entre otras cosas. Así pues, con esa línea
cambiaríamos el color de fondo del elemento seleccionado anteriormente,
que habíamos guardado en la variable elem1.
Ahora veamos otro ejemplo de la selección de elementos con la función
dólar.
var divs = $("div");
divs.css("font-size", "32pt");
Aquí seleccionamos todas las etiquetas DIV de la página, y les colocamos
un tamaño de letra de 32pt.
Ejemplo 1
Código HTML
Código jQuery
Salida al ejecutar el archivo html

Blanco
Ejemplo 2:
Si queremos, podemos utilizar el segundo parámetro opcional, que es el
contexto. Con él podríamos conseguir seleccionar elementos que pertenecen
a una zona concreta de nuestro documento. Por defecto el contexto es la
página entera, pero lo podemos restringir de esta manera:
var inputs = $("input",document.forms[0]);
inputs.css("color", "blue");
Con la primera línea conseguimos seleccionar todos los elementos INPUT
que pertenecen al primer formulario de la página. Se devolverá un objeto
jQuery que contiene todos los input seleccionados. Con la segunda línea,
invocando el método css() sobre el objeto jQuery recibido, estaríamos
cambiando el color del texto de esos elementos en azul.
Código del formulario (paginaformulario.html)
Código del jquery (jq2.js)

Blanco
Ahora por completar un poco más, veamos otro ejemplo en el que
seleccionamos todos los párrafos (etiqueta P), pero restringimos el
contexto únicamente los que están en un DIV con id="div1".
Ejemplo tenemos esta salida de dos párrafos
Al incorporar el llamado del archivo jq3.js se tiene la salida.
var parrafos_div1 = $("p","#div1");
parrafos_div1.hide()

Blanco
En la segunda línea lanzamos el método hide() sobre el objeto jQuery que
contiene los párrafos seleccionados, con lo que conseguimos que se
oculten.
Selección de elementos utilizando las clases CSS definidas.
jQuery incluye una manera útil de obtener y establecer propiedades CSS a
los elementos. jQuery ofrece una variedad de métodos para obtener y
modificar valores de dimensiones y posición de un elemento.
jQuery tiene varios métodos para la manipulación de CSS. Veremos los
siguientes métodos:
addClass() - Agrega una o más clases a los elementos seleccionados
removeClass() - Elimina una o más clases de los elementos seleccionados
toggleClass() - Alterna entre agregar / eliminar clases de los elementos
seleccionados
css() - Establece o devuelve el atributo de estilo
El método text () en jquery
El método text () establece o devuelve el contenido de texto de los
elementos seleccionados, cuando se utiliza este método para devolver
contenido, devuelve el contenido de texto de todos los elementos
coincidentes (se eliminará el marcado HTML).
El método text () establece o devuelve el contenido de texto de los
elementos seleccionados.
Cuando se utiliza este método para devolver contenido, devuelve el
contenido de texto de todos los elementos coincidentes (se eliminará el
marcado HTML).
Cuando se usa este método para establecer contenido, sobrescribe el
contenido de TODOS los elementos coincidentes
Sintaxis
Devolver contenido de texto:
$(selector).text()
Establecer contenido de texto:
$(selector).text(content)
Establecer contenido de texto mediante una función:
$(selector).text(function(index,currentcontent))

Blanco
Para saber el contenido de un elemento el objeto jQuery cuenta con un
método llamado text(), por ejemplo:
let x = $("#parrafo1");
luego si hacemos x.text() obtenemos el contenido del párrafo con id igual
a parrafo1.
Luego si queremos cambiar el texto del párrafo deberíamos disponer:
x.text("Este es el texto nuevo");
Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos
cambiar el contenido de muchos elementos con una sola llamada al método
text, por ejemplo:
let x=$("p");
x.text("Este texto aparece en todos los párrafos del documento");
El código anterior crea un objeto jQuery con la referencia a todos los
párrafos contenidos en el documento. Luego si llamamos al método text
enviándole una cadena, esta aparecerá en todo el documento remplazando el
contenido de los párrafos actuales.
Ejemplo: Pagina que muestra el acceso y modificación unitaria y múltiple
de contenidos de elementos.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Obtener el texto contenido en un párrafo"
id="boton1"><br><br>
<input type="button" value="Modificar el texto de un párrafo"
id="boton2"><br><br>

Blanco
<input type="button" value="Modificar el texto de los elementos td de
una tabla" id="boton3"><br><br>
<p id="parrafo1">Texto del primer párrafo</p>
<table border="1">
<tr>
<td>celda 1,1</td>
<td>celda 1,2</td>
<td>celda 2,1</td>
<td>celda 2,2</td>
</tr>
</table>
<script type="text/javascript" src="text.js"></script>
</body>
</html>
Archivo text.js
letx = $(document);
functioninicializarEventos(){
letx = $("#boton1");
x.click(extraerTexto);
x = $("#boton2");
x.click(modificarTexto);
x = $("#boton3");
x.click(modificarDatosTabla);
}
functionextraerTexto() {

Blanco
letx = $("#parrafo1");
alert(x.text());
}
functionmodificarTexto() {
letx = $("#parrafo1");
x.text("Nuevotextodel párrafo");
}
functionmodificarDatosTabla() {
letx = $("td");
x.text("textonuevo");
}
Como vemos esta página tiene tres botones, al presionarse el primero se
dispara la función:
function extraerTexto() {
alert(x.text());
}
Obtenemos la referencia al párrafo mediante su id (recordemos que en una
página todos los valores de los id son distintos), luego extraemos el
contenido mediante el método text() y lo mostramos en un alert.
La segunda función cambia el contenido del párrafo:
function modificarTexto() {
x.text("Nuevo texto del párrafo");
}
Obtenemos la referencia del párrafo mediante su id y llamamos al método
text enviándole el nuevo string a mostrar.
Por último la función:
function modificarDatosTabla() {

Blanco
let x = $("td");
x.text("texto nuevo");
}
Crea un objeto de la clase jQuery con la referencia a todos los elementos
td del documento (es decir los td de todas las tablas) y posteriormente
mediante el método text modifica el contenido de todos ellos (todos los
td del documento se cambian por el string "nuevo texto").
Método show ()
El método show () muestra los elementos seleccionados ocultos. Nota: show
() funciona en elementos ocultos con métodos jQuery y display: none en
CSS (pero no visibilidad: hidden).
Sintaxis
$(selector).show(speed,easing,callback)
Opciones
Es opcional y especifica la velocidad del efecto de
espectáculo. El valor predeterminado es 400 milisegundos pero puede tener
valores posibles, milisegundos , "slow" y "fast"
Es opcional y especifica la velocidad del elemento en
diferentes puntos de la animación. El valor predeterminado es "swing" ,
pero puede tener valores posibles, "swing" , se mueve más lento al
principio / final, pero más rápido en el medio y "lineal" , se mueve a
una velocidad constante hay más funciones de aceleración disponibles en
complementos externos
Es opcional una función que se ejecutará después de que se
complete el método show () Para obtener más información sobre la
devolución de llamada, visite nuestro capítulo de devolución de llamada
de jQuery
Método hide ()
El método hide () oculta los elementos seleccionados. Sugerencia: Esto es
similar a la visualización de propiedades CSS: ninguna.
Nota : Los elementos ocultos no se mostrarán en absoluto (ya no afecta el
diseño de la página).
$(selector).hide(speed,easing,callback)
Opciones

Blanco
Es opcional y especifica la velocidad del efecto de
espectáculo. El valor predeterminado es 400 milisegundos pero puede tener
valores posibles, milisegundos , "slow" y "fast"
Es opcional y especifica la velocidad del elemento en
diferentes puntos de la animación. El valor predeterminado es "swing" ,
pero puede tener valores posibles, "swing" , se mueve más lento al
principio / final, pero más rápido en el medio y "lineal" , se mueve a
una velocidad constante hay más funciones de aceleración disponibles en
complementos externos
Es opcional una función que se ejecutará después de que se
complete el método show () Para obtener más información sobre la
devolución de llamada, visite nuestro capítulo de devolución de llamada
de jQuery.
Ejemplo
Ocultar o mostrar todos una imagen al dar clic uno de los botones.
<!DOCTYPE html>
<html>
<head>
;
</script>
</head>
<body>
<img src="img/programador.jpg" style="max-
width:100%;width:auto;height:auto;"><br>
<button class="btn1">Ocultar foto</button>
<button class="btn2">Mostrar foto</button>
<script type="text/javascript" src="codigo.js"></script>

Blanco
</body>
</html>
$(document).ready(function(){
$(".btn1").click(function(){
$("img").hide();
});
$(".btn2").click(function(){
$("img").show();
});
})
Referencia Electrónica
https://www.youtube.com/watch?v=DVN8NWppCN0
https://www.youtube.com/watch?v=5hMJ5bmSj0o
Laboratorio Práctico
PUEDE VER EL EJEMPLO DE ESTE DOCUMENTO EN FUNCIONAMIENTO
Crear un archivo pratica2.html con el siguiente código
<html>
<body>
CODIGO GENERADO DINAMICAMENTE
<br/>
<script type="text/javascript" src="js2.js"></script>
</body>
</html>
Luego crear un archivo llamado js2.js con el siguiente código:
document.onload = carga();

Blanco
function carga(){
//se crea el elemento
//en este caso una etiqueta button
var b = document.createElement("button");
//ahora se le añaden las propiedades
b.type = "button"; //se le indica a la etiqueta
//que se comporte como un boton
//se le añade el texto al boton
//si se desea dar atributos o colocar
//algo mas que texto se debe sustituir
//el innerText por innerHTML
b.innerText = "BOTON CREADO DINAMICAMENTE";
//el siguiente paso es asociar
//un evento al boton
//se le indica que al hacer clic
//en esa etiqueta, se debe ejecutar una función
b.onclick = function(){
alert("HOLA SOY UN BOTON");
};
//el ultimo paso es añadir el elemento creado al

Blanco
//documento
//se le indica al documento que el
//segmento del body, agregue el elemento
document.body.appendChild(b);
}

Guiajquery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Guiajquery

Similar a Guiajquery (20)

Más de lissette_torrealba

Más de lissette_torrealba (20)

Último

Último (20)

Guiajquery