Exercicis Pràctics de jQuery: Validació, Animacions i Slick Slider

Exercicis de jQuery i Plugins

1. Validació de Formulari amb jQuery Validate (Exercici B)

Valida el següent formulari utilitzant el plugin jQuery Validate:

$("#formExam").validate({
  rules: { // Regles de validació
    germans: {
      range: [0, 20] // Entre 0 i 20 germans
    }
  },
  messages: { // Feedback amb els errors
    nom: {
      pattern: "El nom ha de tenir entre 3 i 20 lletres"
    },
    germans: {
      required: "És obligatori indicar el nombre de germans",
      range: "Indica un número entre 0 i 20"
    }
  }
});
$("#formExam").valid(); // Opcional: per forçar la validació en un moment donat

2. Animació i Manipulació DOM amb jQuery (Exercici B)

Programa amb jQuery que, en fer clic sobre #div1, es realitzin les següents accions:

• Contingui l'atribut "esborrant" amb valor "true".
• El text es mostri en color groc.
• Es mogui a la dreta 50px durant 1,75 segons.
• En acabar l'animació, s'esborri l'element.

$(document).ready(function() {
  $("#div1").click(function() {
    $(this).attr("esborrant", "true");
    $(this).css("color", "yellow");
    $(this).animate({
      left: '+=50px'
    }, {
      duration: 1750,
      complete: function() {
        $(this).remove();
      }
    });
  });
});

Preguntes Test: Conceptes de jQuery i Plugins (0,4p cadascuna)

3. Canviar Color de Fons de DIVs

Quin codi canvia el color de fons de tots els elements <div> a vermell?

b.

$("div").css("background-color", "red");

4. Eliminar SPANs Fills

Quin codi permet eliminar els elements <span> fills del <div> amb la classe "myDiv"?

d.

$(".myDiv").children("span").remove();

5. Propietat slidesToShow de Slick

Quina propietat del plugin Slick Slider indica el número d’imatges a mostrar?

c.

slidesToShow

6. Propietat messages de jQuery Validation

Quina propietat del plugin jQuery Validation conté els textos a mostrar quan no es compleix una regla?

Resposta:

messages

7. Eliminar Slide de Slick

Com es pot eliminar un slide d'una galeria Slick en temps d'execució?

a. Utilitzant removeSlide de l'objecte "slider".

8. Configuració de Slick Slider (Exercici B)

Transforma en slider el <div> amb id "sliderExam", configurat segons els comentaris:

$("#sliderExam").slick({
  slidesToShow: 3, // Mostra tres slides
  autoplay: false, // Sense autoplay
  responsive: [ // Modifica la configuració segons l'amplada
    {
      breakpoint: 800, // En pantalles <800px
      settings: {
        slidesToShow: 1, // Mostra una slide
        dots: true, // Mostra els punts
        nextArrow: "<button> NEXT </button>", // Botó a la dreta
        autoplaySpeed: 1500 // Mou slide cada 1,5s
      }
    }
  ]
});

Exercicis Addicionals de jQuery i Plugins

1. Validació de Formulari amb jQuery Validate (Exercici A)

Valida el següent formulari utilitzant el plugin jQuery Validate:

$("#formExam").validate({
  rules: {
    germans: {
      required: true,
      range: [0, 20] // Entre 0 i 20 germans
    }
  },
  messages: {
    germans: {
      required: "Indica un número entre 0 i 20",
      range: "El nombre de germans ha de ser entre 0 i 20"
    }
  }
});
$("#formExam").valid();

2. Animació i Manipulació DOM amb jQuery (Exercici A)

Programa amb jQuery que, en fer clic sobre #div1, es realitzin les següents accions:

• Modifiqui el seu color de fons a vermell.
• Contingui el text "Esborrant".
• S'animi per moure's a l'esquerra 50px durant 1,75 segons.
• En acabar l'animació, s'esborri l'element.

$(document).ready(function() {
  $("#div1").click(function() {
    $(this).css("background-color", "red"); // Canvia el color de fons a vermell
    $(this).text("Esborrant"); // Afegeix el text "Esborrant"
    $(this).animate({
      left: '-=50px' // Mou el div a l'esquerra 50px
    }, 1750, function() {
      $(this).remove(); // Elimina el div després de l'animació
    });
  });
});

Preguntes Test Addicionals: jQuery i Slick Slider

3. Configuració de Slick Slider (Exercici A)

Transforma en slider el <div> amb id "sliderExam", configurat segons els comentaris:

$(document).ready(function() {
  $("#sliderExam").slick({
    slidesToShow: 3, // Mostra tres slides
    autoplaySpeed: 1500, // Mou slide cada 1,5s
    responsive: [ // Modifica la configuració segons l'amplada
      {
        breakpoint: 700, // En pantalles <700px
        settings: {
          slidesToShow: 1, // Mostra una slide
          dots: true, // Mostra els punts
          prevArrow: "<button>PREV</button>", // Botó a l'esquerra
          autoplay: false // Sense autoplay
        }
      }
    ]
  });
});

4. Animació d'Amplada i Alçada amb jQuery

Anima amb 1,5 segons l'element de classe myDiv perquè incrementi 50px d'alt i 20px d'ample:

C.

$(".myDiv").animate({"height": "+=50px", "width": "+=20px"}, 1500);

5. Afegir Element amb jQuery

Com afegim l'element amb id "myDiv" dins dels elements de la classe "myClass"?

A.

$(".myClass").append($("#myDiv"));

6. Forçar Validació amb jQuery Validation

Quina funció força la validació d'un formulari amb el plugin jQuery Validation?

c. .valid()

7. Tipus de Dada de l'atribut "responsive" en Slick

Quin tipus de dada conté l'atribut "responsive" en la configuració d'un plugin Slick Slider?

Opcions: un JSON, una array, un number

b. un array

8. Afegir Nou Slide a Slick

Com es pot afegir un nou slide a una galeria Slick en temps d'execució?

d. Utilitzant addSlide de l'objecte "slider".