close

Sintaxis básica de jQuery: selección, manipulación y efectos

La sintaxis básica de jQuery implica el uso de un selector(selector de estilo CSS) y métodos para manipular los elementos seleccionados. Aquí hay algunos ejemplos básicos de sintaxis de jQuery:

 

Selección de elementos

  • Seleccionar elementos por nombre de etiqueta HTML: $("tagname") Ejemplo: $("p") selecciona todos <p> los elementos en la página.

  • Seleccionar elementos por clase CSS: $(".classname") Ejemplo: $(".myClass") selecciona todos los elementos con la clase "myClass".

  • Seleccionar elementos por ID: $("#idname") Ejemplo: $("#myElement") selecciona el elemento con el ID "myElement".

  • Seleccionar elementos por atributo: $("[attribute='value']") Ejemplo: $("[data-type='button']") selecciona elementos con el atributo data-type establecido en "botón".

  • Combinando selecciones: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulación de elementos seleccionados

  • Cambiar el contenido de un elemento: .html(), .text() Ejemplo: $("#myElement").html("New content") establece el contenido HTML del elemento con ID "myElement".

  • Modificación de atributos de elementos: .attr(), .prop() Ejemplo: $("img").attr("src", "newimage.jpg") cambia el src atributo de todos <img> los elementos.

  • Manipulación de clases CSS de un elemento: .addClass(), .removeClass(), .toggleClass() Ejemplo: $("#myElement").addClass("highlight") agrega la clase "highlight" al elemento con ID "myElement".

  • Ocultar/mostrar elementos: .hide(), .show(), .toggle() Ejemplo: $(".myClass").hide() oculta todos los elementos con la clase "myClass".

  • Manejo de eventos en elementos: .click(), .hover(), .submit(), ... Ejemplo: $("button").click(function() { ... }) registra un controlador de eventos de clic

 

Trabajando con colecciones de elementos

  • Iterando a través de una colección: .each() Ejemplo: $("li").each(function() { ... }) itera sobre cada <li> elemento de la página.

  • Filtrado de una colección: .filter(), .not() Ejemplo: $("div").filter(".myClass") filtra los <div> elementos y selecciona aquellos con la clase "myClass".

  • Insertar elementos en una colección: .append(), .prepend(), .after(), .before() Ejemplo: $("#myElement").append("<p>New paragraph</p>") agrega un nuevo <p> elemento al elemento con ID "myElement".

 

Efectos y animaciones

  • Realización de efectos de fundido de entrada/salida: .fadeIn(), .fadeOut() Ejemplo: $("#myElement").fadeIn(1000) fundidos en el elemento con ID "myElement" durante 1 segundo.

  • Realización de efectos slideUp/slideDown: .slideUp(), .slideDown() Ejemplo: $(".myClass").slideUp(500) desliza hacia arriba todos los elementos con la clase "myClass" durante 0,5 segundos.

  • Realización de animaciones personalizadas: .animate() Ejemplo: $("#myElement").animate({ left: '250px', opacity: '0.5' }) anima el elemento con ID "myElement" cambiando su posición izquierda y opacidad.

 

Estos ejemplos demuestran cómo usar diferentes aspectos de la sintaxis básica de jQuery para seleccionar elementos, manipular sus propiedades y aplicar efectos o animaciones. jQuery ofrece un amplio conjunto de métodos y funcionalidades para simplificar y mejorar las tareas de desarrollo web.