w3resource

jQuery Practical exercises, practice, solution - Fundamental-I

jQuery Fundamental - I 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. Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red.
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.


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.

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.

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.

<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.

<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.

 <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.

You can see the output from here

Click me to see the solution

9. Using jQuery insert a DOM element after all paragraphs.

You can see the output from here

Click me to see the solution

10. Insert a jQuery object after all paragraphs.

You can see the output from here

Click me to see the solution

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

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.

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.

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.

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.

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.

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.

You can see the output from here

Click me to see the solution

18. Using jQuery count all elements within a division.

<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 click the button to animate the paragraph element with a number of different properties.

<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.

<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.

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.

<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.

<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.

<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.

<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.

<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.

<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

You can see the output from here

Click me to see the solution

29. Using jQuery find all links with an hreflang attribute de.

<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.

<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.

<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.

<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.

<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.

<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.

You can see the output from here

Click me to see the solution

36. Inserts some HTML before all paragraphs using JQuery.

<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.

<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.

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.

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.

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.

<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.

Click me to see the solution

43. Disable a callback list from doing anything more.

Click me to see the solution

44. Test if the callback list has been disabled.

Click me to see the solution

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

Click me to see the solution

46. Call all of the callbacks with the given arguments.

Click me to see the solution

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

Click me to see the solution

48. Fire a list of callbacks with a specific context and an array of arguments.

Click me to see the solution

49. Check if a callback list contains a specific callback.

Click me to see the solution

50. Lock a callback list in its current state.

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.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

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://www.w3resource.com/jquery-exercises/1/index.php