w3resource logo


jquery exercises

jQuery Events - Exercises, Practice, Solution

Secondary Nav

jQuery Events [24 exercises with solution]

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

1. Attach a click and double-click event to the <p> element. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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 Go to the editor
Sample Data :

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

Click me to see the solution

7. Write a jQuery Code to get a single element from a selection. Go to the editor
Sample Data :

<body>
<ui>
<li>Html Tutorial</li>
<li>Mongodb Tutorial</li>
<li>Python Tutorial</li>
</body>

Sample Output : "Mongodb Tutorial"

Click me to see the solution

8. Change the background color of the <div> element of the following code on clicking the button. Go to the editor
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 Go to the editor

Click me to see the solution

10. Stop people from writing in first text input box (user ID). Go to the editor

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. Go to the editor

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. Go to the editor

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. Go to the editor

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. Go to the editor

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. Go to the editor

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:. Go to the editor

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. Go to the editor

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. Go to the editor

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? Go to the editor

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. Go to the editor

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. Go to the editor

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. Go to the editor

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. Go to the editor

Click me to see the solution

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

HTML Code:

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

Click me to see the solution

 

More to Come !

* To run the code mouse over on Output panel and click on 'Run with JS' button.*

JS Bin



Join our Question Answer community to learn and share your programming knowledge.