jQuery Practical exercises, practice, solution - Part-I

Last update on May 31 2023 16:05:13 (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. Go to the editor]

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

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

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

4. Disable/enable the form submit button.
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.
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.
See the sample output from here.

Click me to see the solution

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

Click me to see the solution

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

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

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

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

12. Move one DIV element inside another using jQuery.

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.
Click me to see the solution

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

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

Click me to see the solution

16. Underline all the words of a text using jQuery.

Click me to see the solution

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

Click me to see the solution

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

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

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

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

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

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

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

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

26. Find the absolute position of an element using jQuery.

Click me to see the solution

27. Convert a jQuery object into a string.
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?
Click me to see the solution

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

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

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

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

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

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

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

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

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

38. Count child elements using jQuery.
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.
Click me to see the solution

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

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

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

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

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

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

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

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

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

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

50. Add attribute using jQuery.
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.