jQuery Practical exercises, practice, solution - Part-I

Last update on May 30 2022 10:20:27 (UTC/GMT +8 hours)

jQuery Practical exercises [ 50 exercises with solution ]

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

1. Test if jQuery is loaded. Go to the editor
Click me to see the solution

2. Scroll to the top of the page with jQuery. Go to the editor
Click me to see the solution

3. Disable right click menu in html page using jquery. Go to the editor
Click me to see the solution

4. Disable/enable the form submit button. Go to the editor
Disable the submit button until the visitor has clicked a check box.
See the sample output from here.

Click me to see the solution

5. Fix broken images automatically. Go to the editor
Hide the following broken img tag in the body section.
Sample Data :

<body>
<a href="https://www.w3resource.com"><img src="//www.w3resource.com/image/w3resourcelogo.gif" alt="w3resource logo" width="150" height="78" /></a>
</body>

Click me to see the solution

6. Blink text using jQuery. Go to the editor
See the sample output from here.

Click me to see the solution

7. Create a Zebra Stripes table effect. Go to the editor
See the sample output from here.

Click me to see the solution

8. Print a page using jQuery. Go to the editor
See the sample output from here.
Click me to see the solution

9. Limit character input in the textarea including count. Go to the editor
See the sample output from here.
Click me to see the solution

10. Make first word bold of all elements. Go to the editor
See the sample output from here.
Click me to see the solution

11. Create a div using jQuery with style tag. Go to the editor
Click me to see the solution

12. Move one DIV element inside another using jQuery. Go to the editor

Move the following 
<div id="source">
...
</div>
To 
<div id="destination">
...
</div>

Click me to see the solution

13. Select values from a JSON object using jQuery. Go to the editor
Click me to see the solution

14. Add a list elements within an unordered list element. Go to the editor
Click me to see the solution

15. Remove all the options of a select box and then add one option and select it. Go to the editor

Click me to see the solution

16. Underline all the words of a text using jQuery. Go to the editor

Click me to see the solution

17. How to get the value of a textbox using jQuery? Go to the editor

Click me to see the solution

18. Remove all CSS classes using jQuery. Go to the editor
Click me to see the solution

19. Remove style added with .css() function using jQuery. Go to the editor
Click me to see the solution

20. Distinguish between left and right mouse click with jQuery. Go to the editor
Click me to see the solution

21. Check if an object is a jQuery object. Go to the editor
Click me to see the solution

22. How to detect whether the user has pressed 'Enter Key' using jQuery. Go to the editor
Click me to see the solution

23. Count number of rows and columns in a table using jQuery. Go to the editor
Click me to see the solution

24. How to get textarea text using jQuery. Go to the editor
Click me to see the solution

25. Access form input fields using jQuery. Go to the editor
Click me to see the solution

26. Find the absolute position of an element using jQuery. Go to the editor

Click me to see the solution

27. Convert a jQuery object into a string. Go to the editor
You can see the output form here
Click me to see the solution

28. How to detect a textbox's content has changed using jQuery? Go to the editor
Click me to see the solution

29. Remove a specific value from an array using jQuery. Go to the editor
Click me to see the solution

30. Change button text using jQuery. Go to the editor
Click me to see the solution

31. Add options to a drop-down list using jQuery. Go to the editor
Click me to see the solution

32. Set background-image using jQuery CSS property. Go to the editor
Click me to see the solution

33. Delete all table rows except first one using jQuery. Go to the editor
Click me to see the solution

34. How to get the selected value and currently selected text of a dropdown box using jQuery? Go to the editor
Click me to see the solution

35. Disable a link using jQuery. Go to the editor
Click me to see the solution

36. Change a CSS class using jQuery. Go to the editor
Click me to see the solution

37. Add a CSS class using jQuery. Go to the editor
Click me to see the solution

38. Count child elements using jQuery. Go to the editor
Note: Count number of "p" elements from the following :

<body>
<div id="selected">
<p>Red</p>
<p>White</p>
<p>Green</p>
<p>Black</p>
<p>Blue</p>
<p>Orange</p>
</div>
</body>

Click me to see the solution

39. Restrict "number"-only input for textboxes including decimal points. Go to the editor
Click me to see the solution

40. Find the loaded jQuery version. Go to the editor
Click me to see the solution

41. Remove a specific table row using jQuery. Go to the editor
Click me to see the solution

42. Set value in input text using jQuery. Go to the editor
Click me to see the solution

43. Set a value in a span using jQuery. Go to the editor
Click me to see the solution

44. Find the class of the clicked element. Go to the editor
Click me to see the solution

45. Set href attribute at runtime using jquery. Go to the editor
Click me to see the solution

46. Remove disabled attribute using jQuery. Go to the editor
Click me to see the solution

47. Find the total width of an element (including width, padding, and border) in jQuery. Go to the editor
Click me to see the solution

48. Change options of select using jQuery. Go to the editor
Click me to see the solution

49. Access HTML form data using jQuery. Go to the editor
Click me to see the solution

50. Add attribute using jQuery. Go to the editor
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.

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