JQuery en Javascript

Es una biblioteca de javascript que tiene una serie de funciones y metodos con la cual podemos modificar dinamicamente la presentacion de una pagina, manipular el DOM, crear plugins, trabajar con ajax, ect..

Podemos obtener las fuentes desde cuatro sitios:

Desde la página de jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Desde la pagina de Google:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Desde Microsoft:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>  

Podemos descargar la libreria de javascript  https://requirejs.org/ e insertarla

<script src="./jquery-3.4.1.js"></script>

Selectores

Con ellos interactuamos con los elementos de una pagina web, estos son los principales:

*	$("*")	Todos los elementos
#id	$("#identificador")	Aquellos elementos cuyo identificador id=”identificador”
.class	$(".clase")	Todos los elementos con class="clase"
.class,.class	$(".clase1,.clase2")	Todos los elementos con class "clase1" or "clase2"
element	$("p")	Todos los elementos con la etiqueta <p>
el1,el2,el3	$("h1,div,p")	Los elementos con las etiquetas h1, div, p

Para ver más selectores visitamos el siguiente enlace:

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Document Ready

$(document).ready(function(){

});

El método ready() una vez que se ha cargado el documento podemos disponer de la funcion. El código que se escriba dentro del método $(document) .ready() se ejecutará cuando el  DOM de la página esta lista para ejecutar el código JavaScript.

Hay que llamarla cuando el DOM esté listo y desde jQuery 3 esta está deprecated y es recomendable usar $(function() { ...});

Metodos

Metodos para manipular los elementos del  HTML:

Sintaxis:

$('elemento seleccionado').metodo1('valores').metodo2('valores');

Añadir elementos:

let elemento = $('#elementoDocumento');

elemento. append(`

codigo html

`)

Ejemplos:

var $ = require('jquery');

$(document).ready(function() {

   let formulario = $('#formulario');

   alert(formulario)

   formulario.html('');

   formulario.append(`

   <div class="form-row">

      <label class="" for="id2" >ID2</label>

      <input type="text" id="id2" name="id2" class="form-control" value="datos"/> 

   </div>   

   `)

});


$("button").click(function(){ 
 $("p").text("<b>Hello world!</b>"); 

 });

<b>Hello world!</b>

.text() inserta un string o cadena dentro de el selector de jQuery, siempre de procesa lo contenido dentro las comillas 

$("button").click(function(){
$("p").html("Hello <b>world!</b>");
});

Hello world!

.html() interpreta el codigo HTML introducido entre las comillas

Para interactuar con jQuery abrimos un:

<script type="text/javascript"> // codigo </script>

Callbacks en javascript

Una función de callback es una función pasada a otra función como argumento, y que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción, los usamos para asegurarnos de que se ejecute la primera función tarde el tiempo que tarde y despues se ejecute la segunda funcion.

Por ejemplo si yo tengo el siguiente ejemplo en javascript:

function primeraFuncion(){
console.log(‘primera funcion’);
}
function segundaFuncion(){
console.log(‘segunda funcion’);
}


primeraFuncion();
segundaFuncion();

El orden de ejecucion es:

• primera funcion
• segunda funcion

Las funciones se ejecutan secuencialmente una detrás de otra, pero que pasa si por lo que sea la primera funcion se queda bloqueada, o tarda mas tiempo en responder.

Como javascript es un lenguaje orientado a eventos, en lugar de esperar a terminar la primeraFuncion, ejecutara la segundaFuncion y cuando acabe ejecutara la primera cuando este disponible

function primeraFuncion(){

  var retardo = functionRetardo(1000);
  console.log(‘primera funcion’); 

} 

function segundaFuncion(){
   console.log(‘segunda funcion’); 

} 

primeraFuncion(); 

segundaFuncion();

El orden de ejecucion es:

• segunda funcion
• primera funcion

function saludar(nombre) { //una funcion de callback
console.log('Hola ' + nombre);
}
function procesarUsuario(callback) { // se pasa la funcion de callback como argumento
var nombre = prompt('Introduce tu nombre: ');
callback(nombre);
}
procesarUsuario(saludar);  

Llamamos a procesarUsuario como parametro el nombre de la funcion saludar, callback sustituye a saludar

function Sumar(a, b, callback){
return callback(a+b);
}
Sumar(5, 6, function(r){
console.log('El resultado es ' + r);
})

function sumar(fn,x,y){
console.log(fn(x,y));
}

sumar(function(x,y){
return x+y;
},2,3)

function sumar(fn){
console.log(fn(5,2));
}

sumar( function(x,y){
return x+y;
} )