jQuery Events - Exercises, Practice, Solution
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>
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>
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>
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>
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;
}
6. Click a header to add another
Sample Data :
<h1>Click me to add another!</h1>
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>
9. Find the position of the mouse pointer relative to the left and top edges of the document
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>
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>
12. Return previous values of custom events.
Sample Data :
<body> <button>Display event.result</button> <p></p> </body>
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>
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>
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>
16. Display the keyboard key which was pressed in a textbox:.
Sample Data :
<body>Input your name: <input type="text"> <div></div> </body>
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>
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>
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>
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>
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>
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>
23. Show texts when mouseup and mousedown event triggering.
24. Display the window width while (or after) it is resized.
HTML Code:
<body> <p>Press mouse and release here.</p> </body>
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.
What is the difficulty level of this exercise?
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://w3resource.com/jquery-exercises/jquery-events-exercises.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics