Here are some jQuery exercises to help you practice and improve your understanding of jQuery. Each exercise focuses on different concepts such as DOM manipulation, event handling, animations, and more.

? 1. Basic DOM Manipulation: Add Paragraph on Button Click

Task:Create a button that, when clicked, adds a paragraph with the text "Hello, jQuery!" to the page.

Requirements:

• Use .append() to add the paragraph to the body or a specific div.

• The button should only add the paragraph once.

html
"#addTextBtn").click(function() {    $("#content").append("<p>Hello, jQuery!</p>");  });</script>

? 2. Toggle Paragraph Visibility

Task:Create a button that will toggle the visibility of a paragraph every time it is clicked.

Requirements:

• Use the .toggle() method to show/hide the paragraph.

html
"#toggleBtn").click(function() {    $("#togglePara").toggle();  });</script>

? 3. Change Background Color on Mouse Hover

Task:Create a div that changes its background color when the mouse hovers over it, and changes back when the mouse leaves.

Requirements:

• Use .hover() to handle mouse enter and mouse leave.

• Change the background color on mouse hover.

html
"#hoverDiv").hover(    function() {      $(this).css("background-color", "yellow"); // On mouse enter    },    function() {      $(this).css("background-color", "lightgray"); // On mouse leave    }  );</script>

? 4. Fade In/Out Elements

Task:Create two buttons: one to fade in an element and another to fade it out.

Requirements:

• Use .fadeIn() and .fadeOut() methods.

• Create a div that starts off as hidden and can be shown/hidden by clicking the respective buttons.

html
"#fadeInBtn").click(function() {    $("#box").fadeIn();  });  $("#fadeOutBtn").click(function() {    $("#box").fadeOut();  });</script>

? 5. Change Text on Button Click

Task:Create a button that changes the text of an existing paragraph when clicked.

Requirements:

• Use .text() to change the content of a paragraph.

html
"#changeTextBtn").click(function() {    $("#para").text("The text has been changed!");  });</script>

? 6. Animate a Box

Task:Create a button that animates a box to change its width and height, and moves it to a new position on the page.

Requirements:

• Use .animate() to change the size and position of a box.

html
"#animateBtn").click(function() {    $("#box").animate(      {        width: "200px",        height: "200px",        left: "300px",        top: "150px"      },      2000 // Duration of animation in milliseconds    );  });</script>

? 7. Form Input Validation

Task:Create a form with a text input and a submit button. Use jQuery to show a message if the input is empty when the form is submitted.

Requirements:

• Use .val() to check the input value.

• Use .preventDefault() to prevent the form from submitting if the input is empty.

html
"#myForm").submit(function(event) {    event.preventDefault(); // Prevent form submission    var username = $("#username").val();    if (username === "") {      $("#message").text("Username is required!");    } else {      $("#message").text("Form submitted successfully!");    }  });</script>

? 8. Highlight Even and Odd List Items

Task:Create an unordered list. Use jQuery to highlight even list items in a different color than the odd items.

Requirements:

• Use .each() to loop through the list items.

• Use .css() to change the background color of even and odd items.

html
"#itemList li").each(function(index) {    if (index % 2 === 0) {      $(this).css("background-color", "lightblue"); // Even items    } else {      $(this).css("background-color", "lightgreen"); // Odd items    }  });</script>

? 9. Animate on Scroll

Task:Create a page with multiple sections. Use jQuery to animate an element when it comes into view while scrolling.

Requirements:

• Use .scroll() to detect scroll events.

• Use .fadeIn() or .animate() when an element enters the viewport.

html
window).scroll(function() {    var sectionTop = $("#animateSection").offset().top;    var windowBottom = $(window).scrollTop() + $(window).height();    if (windowBottom > sectionTop) {      $("#animateSection").animate({ opacity: 1 }, 1000);    }  });</script>

? 10. Slide Up and Slide Down

Task:Create two buttons, one to "slide down" an element and another to "slide up" the element.

Requirements:

• Use .slideDown() and .slideUp() methods.

html
"#slideDownBtn").click(function() {    $("#slideBox").slideDown();  });  $("#slideUpBtn").click(function() {    $("#slideBox").slideUp();  });</script>

Conclusion:

These exercises cover a range of jQuery functionality, from basic DOM manipulation to more advanced animations and event handling. You can start with simpler exercises and gradually move on to more complex ones as you become more comfortable with jQuery.