jQuery Events - Exercises, Practice, Solution

Last update on May 31 2023 16:03:41 (UTC/GMT +8 hours)

jQuery Events [24 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts. Go to the editor]

1. Attach a click and double-click event to the <p> element.
Sample Data :

HTML :

 <body>
 <p>Click me!</p>
 </body>

For single click append the following paragraph :
<p>This is a click Event</p>

For double-click append the following paragraph :
<p>This is a double-click Event</p>

Click me to see the solution

2. Attach a function to the blur event. The blur event occurs when the following <input> Field1 loses focus.
Sample Data :

 <body>
 <form>
   <input id="field1" type="text" value="Field 1">
   <input id="field2" type="text" value="Field 2">
 </form>
</body>

Click me to see the solution

3. Append a <p> element with a text message when an <input> field is changed.
Sample Data :

<body>
  <form  name='demo_form'>
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  </form>
  </body>

Click me to see the solution

4. Hide all headings on a page when they are clicked.
Sample Data :

<body>
 <h1>Heading-1</h1>
 <h2>Heading-2</h2>
 <h3>Heading-3</h3>>
 </body>

Click me to see the solution

5. Double click on paragraph to toggle background color.
Sample Data :

HTML Code:

 <body>
 <p>Double-click here to change the background color.</p>
 </body>

CSS Code:

p {
 background: blue;
  color: white;
     }
p.dbl {
    background: yellow;
    color: black;
  }

Click me to see the solution

6. Click a header to add another
Sample Data :

<h1>Click me to add another!</h1>

Click me to see the solution

7. Write a jQuery Code to Find the data passed with the on() method for each <p> element.
Click me to see the solution

8. Change the background color of the <div> element of the following code on clicking the button.
Sample Data :

<body>
<div style="background-color:yellow"> 
<p>Click the button to change the background color of this paragraph.</p> 
<button>Click me!</button> 
</div>
</body>

Click me to see the solution

9. Find the position of the mouse pointer relative to the left and top edges of the document

Click me to see the solution

10. Stop people from writing in first text input box (user ID).

Sample Data :

<body>
<p>User ID : <input type="text" id='field1'></p>
<p>Password : <input type="password" id='field2'>
</body>

Click me to see the solution

11. Cancel the default action (click) of the first URL.

Sample Data :

<div style="background-color:yellow">
 <p>Click the button to change the background color of this paragraph.</p>
 <button>Click me!</button>
 </div>

Click me to see the solution

12. Return previous values of custom events.

Sample Data :

<body>
<button>Display event.result</button>
 <p></p>  
 </body>

Click me to see the solution

13. Display the tag's name on click.

Sample Data :

<body>
<h1>Heading1</h1>
<h2>Heading2</h2>  
<p>Paragraph</p>
<button>Button</button>
<div id="log"></div>  
</body>

Click me to see the solution

14. Count the number of milliseconds between the two click events on a paragraph.

Sample Data :

<body>
<h1>Heading1</h1>
<h2>Heading2</h2>  
<p>Paragraph</p>
<button>Button</button>
<div id="log"></div>  
</body>

Click me to see the solution

15. Display the event type on clicking all h1 elements.

Sample Data :

<body>
  <h1>This is header1</h1>
  <h1>This is another header1</h1>
  <h2>This is header2</h2>
  <h2>This is header3</h2>
</body>

Click me to see the solution

16. Display the keyboard key which was pressed in a textbox:.

Sample Data :

<body>Input your name:  <input type="text">
<div></div>
</body>

Click me to see the solution

17. Attach a function to the focus event. The focus event occurs (display a message regarding the text field) when the <input> field gets focus.

Sample Data :

<body>
<p><input type="text"> <span>Input your first name</span></p>
<p><input type="text"> <span>Input your last name</span></p>
</body>

Click me to see the solution

18. Set the focus to the first input box.

Sample Data :

<body>
<p>First Name: <input type="text" id='field1'></p>
<p>Last Name: <input type="password" id='field2'></p>
</body>

Click me to see the solution

19. Test if an input has focus?

HTML Code:

<body>
<div id="content">
<input tabIndex="1">
<select tabIndex="3">
    <option>select menu</option>
	</select>
	 <p tabIndex="3">
	 A Paragraph
	 </div>
   </div>
 </body>

CSS Code for focused color :

  <style>
 .focused {
   background: green;
    }
 </style>

Click me to see the solution

20. Set background color of an element when the element (or any elements inside it) gets focus or loses focus.

HTML Code:

<body>
 <div>
 First name: <input type="text"><br>
  Last name: <input type="text">
  </div>
  </body>

CSS Code for background color ::

<style>
  .focusedin {
     background: green;
	   }
  .focusedout {
     background: blue;
	   }
</style>

Click me to see the solution

21. Display the tag name of the clicked element.

HTML Code:

<body>
  <p></p>
  <h2>This is a heading 2</h2>
  <div>
  First name: <input type="text"><br>
  Last name: <input type="text">
  </div>
</body>

Click me to see the solution

22. Count the number of specific elements.

HTML Code:

<body>
<ul>
  <li>List - 1</li>
  <li>List - 2</li>
  <li>List - 3</li>
  </ul>
   <button>Display the number of li elements in console</button>
   </body>

Click me to see the solution

23. Show texts when mouseup and mousedown event triggering.

Click me to see the solution

24. Display the window width while (or after) it is resized.

HTML Code:

<body>
<p>Press mouse and release here.</p>
</body>

Click me to see the solution

More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.

Live Demo:

See the Pen common-jquery-core-exercise by w3resource (@w3resource) on CodePen.