8.1 Conectando jQuery

Finalmente, llegamos a la biblioteca jQuery. En el momento de escribir este artículo, ya está obsoleto y casi nunca se utiliza en nuevos proyectos . Pero en un momento fue muy popular, muy bien documentado, y hay muchos ejemplos en Internet con su uso .

Por lo tanto, si está escribiendo un proyecto web pequeño y no quiere pasar meses aprendiendo marcos modernos, le recomiendo que use la biblioteca jQuery.

Para utilizar las miles de funciones de jQuery, solo necesita incluirlo en su página. Puedes hacerlo así:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

Trabajar con jQuery se puede dividir en dos tipos.

Primero, puede obtener un objeto de biblioteca jQuery, que es un elemento HTML regular envuelto en un objeto jQuery personalizado.

En segundo lugar, jQuery tiene varios objetos globales que no están vinculados a elementos HTML. También necesitan ser utilizados.

Comencemos con el primero.

8.2 Trabajar con selectores

jQuery usa selectores para trabajar con objetos (¿recuerdas CSS y sus clases?). Entonces, en jQuery, si desea seleccionar algún objeto o grupo de objetos, debe configurar su selector.

Ejemplos:

Código Descripción Nota
1 $("div") Selecciona todos los objetos con una etiqueta DIV muchos objetos
2 $("img.#imagen123") Selecciona todos los objetos con etiqueta IMG e ID == image123 un objeto
3 $("#imagen123") Selecciona todos los objetos con ID == image123 un objeto
4 $("div.articulo") Selecciona todos los objetos con una etiqueta DIV que tienen artículo de clase muchos objetos

Digamos que queremos agregar el manejo de eventos a todos los enlaces onclick, así es como podemos hacerlo con jQuery:


  $("a").click(function() {
    alert("Click");
  });

Aquí se dan tres pasos:

  1. Obtiene los objetos que coinciden con el selector "a".
  2. Creamos una función anónima que llama al alert().
  3. Establecemos esta función como un controlador de eventos clickpara todos los objetos desde el punto 1.

Otra cosa buena de jQuery es que su código es fácil de leer. No hace falta mucho para darse cuenta de cómo funciona todo. Si hay un código que funciona, entonces es bastante fácil entender lo que hace.

8.3 Trabajar con elementos de documento

Veamos algunos escenarios para trabajar con un documento usando jQuery.

Obtener el valor de un elemento (para elementos que tienen valores):

var result = $ ("selector").value();

Establecer el valor del elemento (para elementos que tienen valores):

$ ("selector").value(newValue);

¿Cómo agregar HTML dentro de algún elemento?

$ ("selector").html(newHTML);

¿Y cómo obtener el HTML que está dentro del elemento?

var html = $ ("selector").html();

¿Qué pasa si no quiero obtener/agregar HTML, sino texto sin formato? Aquí tampoco hay sorpresas.

var html = $ ("selector").text();

¿Qué pasa si quiero obtener/cambiar el color de un elemento?

$ ("selector").color("red");

Si necesita trabajar con estilos, esto también es fácil de hacer:

$ ("selector").css("color", "red");

¿Cómo agregar un nuevo elemento?

$ (".container").append($("h3"));
Java university