Here are several examples of common jQuery events and effects you can use to make your website more interactive. These examples will cover various aspects such as handling clicks, mouse events, form handling, and animations.

? 1. .click() Example: Button Click

When a user clicks a button, we change the text of a <div> element.

html
"#clickBtn").click(function() {    $("#message").text("Button was clicked!");  });</script>

Explanation:

• When the button with id="clickBtn" is clicked, the text "Button was clicked!" will appear in the #message div.

? 2. .dblclick() Example: Double Click

Trigger an event when a user double-clicks a <div> element.

html
"#dblClickBox").dblclick(function() {    $("#message").text("Box was double-clicked!");  });</script>

Explanation:

• When the user double-clicks the #dblClickBox, the text "Box was double-clicked!" will be shown in the #message div.

? 3. .hover() Example: Hover Effects

Change the background color of a box when the mouse enters and leaves.

html
"#hoverBox").hover(    function() {      $(this).css("background-color", "yellow"); // Mouse enters    },    function() {      $(this).css("background-color", "green"); // Mouse leaves    }  );</script>

Explanation:

• When the mouse enters the #hoverBox, the background color changes to yellow.

• When the mouse leaves, the background color reverts to green.

? 4. .focus() and .blur() Example: Input Focus and Blur

Handle the focus and blur events for an input field.

html
"#inputText").focus(function() {    $("#message").text("Input field is focused!");  });  $("#inputText").blur(function() {    $("#message").text("Input field lost focus!");  });</script>

Explanation:

• When the #inputText input field gains focus, the message "Input field is focused!" is displayed.

• When the #inputText input field loses focus, the message "Input field lost focus!" is displayed.

? 5. .submit() Example: Form Submission

Intercept a form submission and prevent the default action using .submit().

html
"#myForm").submit(function(event) {    event.preventDefault(); // Prevent the form from submitting    $("#message").text("Form has been submitted!");  });</script>

Explanation:

• When the form is submitted, the default action is prevented, and the text "Form has been submitted!" is displayed in the #message div.

? 6. .change() Example: Dropdown Change

When the value of a dropdown (select box) changes, display the selected option.

html
"#colorSelect").change(function() {    var selectedColor = $(this).val();    $("#colorMessage").text("You selected: " + selectedColor);  });</script>

Explanation:

• When the user selects an option from the dropdown, the message "You selected: [color]" will be displayed in the #colorMessage div.

? 7. .keydown() Example: Keyboard Key Down

Trigger an event when a key is pressed down in a text field.

html
"#inputText").keydown(function() {    $("#keyMessage").text("A key was pressed!");  });</script>

Explanation:

• When a key is pressed while typing inside the #inputText input field, the text "A key was pressed!" is displayed in the #keyMessage div.

? 8. .fadeIn() and .fadeOut() Example: Fade Effects

Show or hide an element with fade-in and fade-out effects.

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

Explanation:

• When the "Show" button is clicked, the #content div fades in.

• When the "Hide" button is clicked, the #content div fades out.

? 9. .animate() Example: Custom Animation

Use .animate() to create custom animations, like changing the size and position of an element.

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

Explanation:

• When the "Animate Box" button is clicked, the #box div will animate to a width of 300px, height of 300px, and move to a new position over 2 seconds.

? 10. .toggle() Example: Toggle Visibility

Toggle the visibility of an element (show or hide) with a button click.

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

Explanation:

• When the "Toggle Box" button is clicked, the visibility of the #box div will toggle between showing and hiding.