# 1.- Primeros pasos
Vamos a comenzar con JQUERY solo necesitas crear un archivo con extención '.js' para iniciar.
WARNING
De esos fichero que se llaman librerias, se les llaman librerias JQuery como cada día van inventando más comportamientos cada ves van haciendo actualizaciones o comportamientos nuevos y comportamientos que se han quedado obsoletos pero que un programador en el 2019 utilizo, dentro de estas librerias de JQuery existe la libreria maestra que apartir de ella se puede hacer muchas cosas.
# Descargar ficheros & utilizar los links
Siempre utilizar el archivo minimizado.
query.min.js
# Etiqueta para utilizar el fichero -js
Se llama Script aquel fragmento de código que representa 'x' instrucciones o ordenes de un lenguaje de programación pero por si solo no es suficiente para crear un programa.
WARNING
Se necesita el archivo 'MAESTRO' maestro.min
Se necesita un archivo llamado 'UI' para la experiencia de usuario
Se necesita los 'jquery-migrate' estos ficheros compaginan para que sigan funcionando
Se utiliza esto debajo de los CSS
El último archivo siempre será el nuestro
Enlace a la página Oficial Jquery (opens new window). Enlace para descargar las versiones de Versiones Jquery (opens new window)
# Utilizando nuestro primer Script
Este es el maestro a siempre primero
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Este es el segundo 'UI' el de la interfas de usuario
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Por ultimo utilizamos el 'migrate'
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
Te deberia de quedar así como el ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clase 1 Jquery</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./icomoon/style.css">
<!-- jquery Url -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
<!-- Mis Script -->
<script src="./js/script.js"></script>
</head>
<body>
<header>
<h2>hello word</h2>
<span class="icon-menu"></span>
</header>
</body>
</html>
# Utilizando jQuery Sintaxis con etiquetas y clases
<p clas="parrafo"></p>
<header> </header>
<ul>
<li></li>
</ul>
$('p').siblings()
$('p.parrafo')
$('header')
$('ul>li')
$('ul').children('li')
# Utilizando jQuery variables
# Estructuras de control
Las estructuras de control se dibiden en:
WARNING
- Estructuras de bucle o repetición
- Estructuras de toma de decisiones
# Funciones echas por el programador
# Funciones propias del mismo lenguaje
En jQuery se llaman metodos 'methods'
# Eventos
Solamente existentes en lenguajes donde se interactua con el usuario
# Funciones anonimas
Que no tienen nombre y que van a ayudar a esos eventos
# Selectores
Marcan o señalas sobre que objeto esta ocurriendo un evento y sobre que objeto va la respuesta.
# Haga un acontecimiento que necesita una respuesta
Estos eventos se producen con o sin intervención del usuario y sobre objetos de la propia página o sobre aquellos que nosotros hemos creado.
WARNING
- Nada de las ejecuciones de la página web funciona si no esta totalmente bajado a la máquina del ususario
$('p').click
$('p').hover
$('p').submit
$('p').keypress
# Ejemplos
<!-- abuelo -->
<div>
<section>
<!-- siblings -->
<h1>Text h1</h1>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ipsam veritatis natus facilis laudantium neque nesciunt dolorem? Aperiam consectetur asperiores fugit quae cumque? Amet veniam voluptates, culpa corporis tempore deserunt?</p>
<!-- children -->
<img src="" alt="">
</article>
</section>
</div>
$('article').siblings('h1'); //Tener cuidado afecta a todos los que estan en la misma linea
$('article').children('img') //Se pueden poner varios
$('article').parent()
$('article').closest('h1') //en una etiqueta por encima del padre
Con las llamadas funciones se pueden agrupar desde una hasta 'x' acciones para que en conjunto se ejecute, enn jQuery podemos distinguir 3 típos de funciones.
# Las funciones creadas por el usuario
Todos los lenguajes de programación tienen el concepto de función por ejemplo podemos crear una función para utilizarla toda la vida.
Creando una funcion
function saludar('acá van todos los paramatros que queremos utilizar separandolas con comas ','') {
}
# Las funciones creadas por el lenguaje
$('article').hide() //Hide es un metodo ya creado y esconde objetos
# Las funciones anonimas
Ayudan a los eventos
function() //Opción 1
() => //Opción 2
# EJEMPLOS
<header>
esconder
</header>
<section>
<h1>click</h1>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>
</section>
//Option 1
// h1 es la etiqueta donde se ara click
//Funcion anonima 'funciton()'
//Evento '.click'
$('h1').click( function() {
// ('article') <- Es el selector
// .hide() <- Es el metodo
$('article').hide();
})
//Option 2
// p es la etiqueta donde se ara click
// header es el elemento que quiero desaparecer
$('p').click( function() {
// ('header') <- Es el selector
// .hide() <- Es el metodo
//dentro de hide('Son los segundos que se va a demorar en ejecutar')
$('header').hide(8000);
})
# Los elementos primero tienen que cargar en la página para ejecutar los JQuery
Para esto utilizamos 'document' como en el ejemplo
Option 1
$(document).ready( function() {
$('h1').click( function() {
// ('article') <- Es el selector
// .hide() <- Es el metodo
$('article').hide();
//al realizar click no abrila el alert
window.alert('comenzamos')
})
})
Option 2
$(document).ready( () => {
$('h1').click( () => {
// ('article') <- Es el selector
// .hide() <- Es el metodo
$('article').hide();
//al realizar click no abrila el alert
window.alert('comenzamos')
})
})