w3resource logo


jQuery exercises

jQuery Practical exercises, practice, solution - Fundamental-I

Secondary Nav

jQuery Fundamental - I exercises [ 50 exercises with solution ]

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

1. Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red. Go to the editor
You can see the output from here

Click me to see the solution

2. Set the background color red of the following elements using jQuery. Go to the editor


jQuery
Exercises

You can see the output from here

Click me to see the solution

3. Create a paragraph element with some text and append it to the end of the document body using jQuery. Go to the editor

You can see the output from here

Click me to see the solution

4. Using jQuery add the previous set of elements on the stack to the current set. Go to the editor

You can see the output from here

Click me to see the solution

5. Using jQuery add the class " w3r_font_color " to the last paragraph element. Go to the editor

<p>PHP</p>
<p>Java</p>
<p>Python</p>
p {
    margin: 8px;
    font-size: 16px;
  }
  .w3r_font_color{
    color: red;
  }
  .w3r_background {
    background: yellow;
  }
 

You can see the output from here

Click me to see the solution

6. Using jQuery add the class "w3r_font_color" and w3r_background to the last paragraph element. Go to the editor

<p>PHP</p>
<p>Java</p>
<p>Python</p>
p {
    margin: 8px;
    font-size: 16px;
  }
.w3r_font_color{
    color: blue;
  }
.w3r_background {
    background: orange;
  }
 

You can see the output from here

Click me to see the solution

7. Using jQuery add a new class to an element that already has a class. Go to the editor

 <p class="w3r_bg_orange">The best way we learn anything is by practice and exercise questions.</p>
 
p {
    background: white;
  }
  .w3r_bg_orange{
    background: orange;
  }
  .w3r_bg_red {
    color: red;
  }
 

You can see the output from here

Click me to see the solution

8. Using jQuery insert some HTML after all paragraphs. Go to the editor

You can see the output from here

Click me to see the solution

9. Using jQuery insert a DOM element after all paragraphs. Go to the editor

You can see the output from here

Click me to see the solution

10. Insert a jQuery object after all paragraphs. Go to the editor

You can see the output from here

Click me to see the solution

11. Register a handler to be called when Ajax requests complete. Go to the editor

Note: Set up a basic Ajax load request, attach the event handler to the document. Now make an Ajax request using any jQuery method.

You can see the output from here

Click me to see the solution

12. Register a handler to be called when Ajax requests complete with an error. Go to the editor

You can see the output from here

Click me to see the solution

13. Attach a function to be executed before an Ajax request is sent. Go to the editor

Note: Set up a basic Ajax load request, attach the event handler to the document. Now make an Ajax request using any jQuery method.

You can see the output from here

Click me to see the solution

14. Register a handler to be called when the first Ajax request begins. Go to the editor

Note: Set up a basic Ajax load request, attach the event handler to the document. Now make an Ajax request using any jQuery method.

You can see the output from here

Click me to see the solution

15. Register a handler to be called when all Ajax requests have completed. Go to the editor

Note: Set up a basic Ajax load request, attach the event handler to the document. Now make an Ajax request using any jQuery method

You can see the output from here

Click me to see the solution

16. Attach a function to be executed whenever an Ajax request completes successfully. Go to the editor

You can see the output from here

Click me to see the solution

17. Using jQuery count every element (including head, body, etc.) in the document. Go to the editor

You can see the output from here

Click me to see the solution

18. Using jQuery count all elements within a division. Go to the editor

<body>
 <div  id="iddiv"> 
<span>This is a span</span>
  <p>This is a Paragraph</p>
 <button id="button1">Click to see the effect</button> 
  </div>
</body>

You can see the output from here

Click me to see the solution

19. Using jQuery count all elements within a division. Go to the editor

<body>
<p id="pid">jQuery</p>  
<button id="button1">Click to see the animation</button> 
</body>
p {
    background-color: #B0E0E6;
    width: 70px;
    border: 1px solid red;
  }
Animation properties :
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"

You can see the output from here

Click me to see the solution

20. Using jQuery animates a div's left property with a relative value. Go to the editor

<body>
<button id="left"><</button>
<button id="right">></button>
<div class="block"></div>
</body>
div {
    position: absolute;
    background-color: #B0E0E6;
    left: 40px;
    width: 80px;
    height: 80px;
    margin: 5px;
  }

You can see the output from here

Click me to see the solution

21. Using jQuery animates the first div's left property and synchronizes the remaining divs. Go to the editor

Note: Use the step function to set their left properties at each stage of the animation.

<body>
<p><button id="run">Click to Run </button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>
div {
    position: relative;
    background-color: #B0E0E6;
    width: 45px;
    height: 45px;
    float: left;
    margin: 5px;
  }

You can see the output from here

Click me to see the solution

22. Using jQuery change the color of any div that is animated. Go to the editor

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<button id="button1">Click to see the effect</button>   
</body>
div {
    background: #B0E0E6;
    border: 1px solid #e30ae8;
    width: 20px;
    height: 30px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: #000000;
  }

You can see the output from here

Click me to see the solution

23. Using jQuery appends some text to all paragraphs. Go to the editor

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<button id="button1">Click to see the effect</button>   
</body>

You can see the output from here

Click me to see the solution

24. Using jQuery appends a jQuery object to all paragraphs. Go to the editor

<body>
<strong> Exercises</strong>  
<p>JavaScript</p>
<p>jQuery</p>
<button id="button1">Click to see the changes</button>   
</body>

You can see the output from here

Click me to see the solution

25. Using jQuery appends an Element to all paragraphs. Go to the editor

<body>
<p>JavaScript</p>
<p>jQuery</p>
<button id="button1">Click to see the changes</button>   
</body>

You can see the output from here

Click me to see the solution

26. Using jQuery append all spans to the element with specified id. Go to the editor

<body>
<span> Exercises  </span>
<p  id="myid">jQuery</p>
<button id="button1">Click to see the effect</button>
</body>

You can see the output from here

Click me to see the solution

27. Using jQuery display the checked attribute and property of a checkbox as it changes. Go to the editor

<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
</body>

You can see the output from here

Click me to see the solution

28. Find the title attribute of the first emphasized in the page Go to the editor

You can see the output from here

Click me to see the solution

29. Using jQuery find all links with an hreflang attribute de. Go to the editor

<body>
<p>jQuery Exercises, Practice,  <em title="Real life jQuery or  all.">Solution</em>.</p>
<p  id="id1"></p>
<button  id="button1">Click to see the effect</button>
</body>

You can see the output from here

Click me to see the solution

30. Using jQuery find all the divisions with a name attribute that contains 'tutorial' and sets the background color yellow. Go to the editor

<body>
<div  name="tutorial-php">
<p>PHP</p>
</div>
<div  name="java-articles"<p>Java</p>
</div>
<div  name="python-tutorial-and-exercises">
<p>Python</p>
</div>

<button  id="button1">Click to see the effect</button>
</body>

You can see the output from here

Click me to see the solution

31. Using jQuery find all the divisions with a name attribute that contains the word 'tutorial' and sets the background color yellow. Go to the editor

<body>
<div  name="tutorial-php">
 <p>PHP</p>
</div>
<div name="java  tutorial"<p>Java</p>
</div>
<div  name="python-tutorial-and-exercises">
 <p>Python</p>
</div>
 
<button  id="button1">Click to see the effect</button>  
</body>

You can see the output from here

Click me to see the solution

32. Using jQuery finds all the divisions with an attribute name that ends with 'tutorial' and sets the background color yellow. Go to the editor

<body>
<div  name="tutorial-php">
<p>PHP</p>
</div>
<div  name="JAVAtutorial"<p>Java</p>
</div>
<div  name="python-tutorial">
  <p>Python</p>
    </div>
  <button  id="button1">Click to see the effect</button>
</body>

You can see the output from here

Click me to see the solution

33. Finds all inputs with a value of "Red" and changes the text of the next sibling span. Go to the editor

<body>
<div>
<label>
<input type="radio" name="color"  value="Red">
<span>name?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color"  value="Green">
<span>value?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color"  value="Black">
<span>value?</span>
</label>
</div>
<button id="button1">Click to see the  effect</button>
</body>

You can see the output from here

Click me to see the solution

34. Finds all inputs that don't have the name 'color' and appends text to the span next to it. Go to the editor

<body>
<div>
<input type="radio" name="color"  value="Red">
<span>Red</span>
</div>
<div>
<input type="radio" value="Cold Fusion">
<span>Sky</span>
</div>
<div>
<input type="radio" name="accept"  value="Evil Plans">
<span>Sea</span>
</div>
<button id="button1">Click to see the  effect</button>
</body>

You can see the output from here

Click me to see the solution

35. Finds all inputs with an attribute name that starts with 'P' and puts text in them. Go to the editor

You can see the output from here

Click me to see the solution

36. Inserts some HTML before all paragraphs using JQuery. Go to the editor

<body>
<p>PHP Tutorial</p>
<p>Python Tutorial</p>
<p>Java Tutorial</p>  
  <button id="button1">Click to see the effect</button> 
</body>

You can see the output from here

Click me to see the solution

37. Inserts a DOM element before all paragraphs using jQuery. Go to the editor

<body>
<p>PHP Tutorial</p>
<p>Python Tutorial</p>
<p>Java Tutorial</p>  
  <button id="button1">Click to see the effect</button> 
</body>

Click me to see the solution

38. Inserts a jQuery object before all paragraphs. Go to the editor

Note: Here object is similar to an Array of DOM Elements.

<body>
<p>PHP Tutorial</p><b>w3resource</b>
<button id="button1">Click to see the effect</button> 
</body>

Click me to see the solution

39. Demonstrate how to handle click and double-click on a paragraph. Go to the editor

Note: As the coordinates are window relative, so in this case relative to the demo iframe.

<body>
<p>Click or double click here.</p>
  <p id="result"></p>
</body>

You can see the output from here

Click me to see the solution

40. Display a message when the focus is removed from an element. Go to the editor

Note: Set and remove focus from field1.

<body>
  <form>
  <fieldset>
   <textarea rows="4" cols="50">
At w3resource.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>
    <input type="button" value="Input Button">
     </fieldset>
</form>
  <p></p>
<button id="button1">Click to see the effect</button> 
</body>

You can see the output from here

Click me to see the solution

41. Find all button inputs and mark them using jQuery. Go to the editor

<body>
  <form>
  <fieldset>
   <textarea rows="4" cols="50">
At w3resource.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>
    <input type="button" value="Input Button">
     </fieldset>
</form>
  <p></p>
<button id="button1">Click to see the effect</button> 
</body>

You can see the output from here

Click me to see the solution

42. Using jQuery add a callback or a collection of callbacks to a callback list. Go to the editor

Click me to see the solution

43. Disable a callback list from doing anything more. Go to the editor

Click me to see the solution

44. Test if the callback list has been disabled. Go to the editor

Click me to see the solution

45. Using jQuery remove all of the callbacks from a list. Go to the editor

Click me to see the solution

46. Call all of the callbacks with the given arguments. Go to the editor

Click me to see the solution

47. Using jQuery check if the callbacks have already been called at least once. Go to the editor

Click me to see the solution

48. Fire a list of callbacks with a specific context and an array of arguments. Go to the editor

Click me to see the solution

49. Check if a callback list contains a specific callback. Go to the editor

Click me to see the solution

50. Lock a callback list in its current state. Go to the editor

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.

Help the community:

PHP: Loop

JavaScript: Delete duplicates in an array

Oracle: Round the number