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>