w3resource logo


jQuery exercises

jQuery Practical exercises, practice, solution - Fundamental-II

Secondary Nav

jQuery Fundamental - II exercises [44 exercises with solution ]

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

51. Check the lock-state of a callback list. Go to the editor

Click me to see the solution

52. Remove a single callback or a set of callbacks from a callback list. Go to the editor

Click me to see the solution.

53. Attaches a change event to the select element (Use to create a drop-down list.) that gets the text for each selected option and writes them in a paragraph. Go to the editor

You can see the output from here

Click me to see the solution.

54. Finds all checkbox inputs. Go to the editor

You can see the output from here

Click me to see the solution.

55. Finds all elements that are checked or selected. Go to the editor

You can see the output from here

Click me to see the solution.

56. Finds the checked radio input. Go to the editor

You can see the output from here

Click me to see the solution.

57. Border around all list items that are children of a specified class of an unordered list. Go to the editor

You can see the output from here

Click me to see the solution.

58. Using jQuery find all children of each division. Go to the editor

<p>This is a paragraph.</p> 
<div><p>This is a paragraph within a division.</p></div>
<p>Here is a another paragraph.</p> 
<div>This is a <span>span</span> element within a division.</div>

You can see the output from here

Click me to see the solution.

59. Using jQuery find all children with a specified class of each division. Go to the editor

<body>
<div>
  <span>This is a span within a division.</span>
  <p class="test">This is a paragraph with specified class within a division.</p>
  <div class="test">This is a division with specified class.</div>
  <p>This is another paragraph within a division</p>
</div>
</body>

You can see the output from here

Click me to see the solution.

60. Find all the text nodes inside a paragraph and wrap them with an italic tag. Go to the editor

<body>
<p><a href="http://www.w3resource.com/jquery-exercises/">jQuery</a> Exercises, Practice and Solution</p>
<p><a href="http://www.w3resource.com/javascript-exercises/">JavaScript</a>  Exercises, Practice and Solution</p>  
</body>

You can see the output from here

Click me to see the solution.

61. Display a message when the contextmenu event is triggered on the paragraph elements. Go to the editor

<body>
  <p>Right click here.</p>
  <p>Again right click here.</p>  
</body>

You can see the output from here

Click me to see the solution.

62. Using jQuery right click to toggle background color. Go to the editor

You can see the output from here

Click me to see the solution.

63. Get the background color of a clicked division. Go to the editor

You can see the output from here

Click me to see the solution.

64. Get the styles (width, height, text color, and background color) of a clicked division. Go to the editor

 <body>
 <p  id="result">&nbsp;</p>
 <div  id="box1">A</div>
 <div  id="box2">B</div>
 <div  id="box3">C</div>
 

You can see the output from here

Click me to see the solution.

65. Change the color of any paragraph to red on mouseover event. Go to the editor

Click me to see the solution.

66. Increase the width of a division by specified pixels once it is clicked. Go to the editor

Click me to see the solution.

67. Click a word in the paragraph and highlight it. Go to the editor

Click me to see the solution.

68. Change the font weight and color of paragraphs on mouseenter and mouseleave. Go to the editor

Click me to see the solution.

69. Increase the size of a division when you click it. Go to the editor

You can see the output from here

Click me to see the solution.

70. Retrieve the stored value from the division element.Go to the editor

Click me to see the solution.

71. Display a message to the dblclick event on all paragraphs on a page. Go to the editor

Click me to see the solution.

72. Double click to toggle background color of a paragraph. Go to the editor

Click me to see the solution.

73. Resolve a deferred object when the user clicks a button, triggering a number of callback functions. Go to the editor

Click me to see the solution.

74. Animate the hiding and showing of two divs, delaying the first before showing it. Go to the editor

You can see the output from here

Click me to see the solution.

75. Click on a paragraph and add another paragraph. Go to the editor

You can see the output from here

Click me to see the solution.

76. End a custom queue function using dequeue which allows the queue to keep going. Go to the editor

Note: .dequeue() method is used to execute the next function on the queue for the matched elements. When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

Click me to see the solution.

77. Find all inputs that are descendants of a form and mark them with a dotted red border . Go to the editor

Note: Descendant Selector ("ancestor descendant") selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

<body>
<form>
  <label for="name">Child of form:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
Sibling to form: <input name="none">
</body>

You can see the output from here

Click me to see the solution.

78. Remove all paragraphs from the DOM. Go to the editor

Note: .detach() is used to remove the set of matched elements from the DOM.

Click me to see the solution.

79. Find all elements that are disabled. Go to the editor

<body>
<form>
First name: <input type="text"  name="fname"><br>
Last name: <input type="text" name="lname"  disabled><br>
</form>
</body>

Click me to see the solution.

80. Iterate over three paragraphs and sets their color property red. Go to the editor

<body>
<p>Click here</p>
<p>to iterate  through</p>
<p>these  paragraphs.</p>
</body>

Click me to see the solution.

81. Finds every paragraph element. Go to the editor

<body>
<p>Paragraph1</p>
<p>Paragraph1</p>
<div>Division1</div>
</body>

Click me to see the solution.

82. Removes all child nodes from all paragraphs. Go to the editor

<body>
<p>jQuery  <b>Exercises</b>.</p>
<p>JavaScript  exercises</p>?
<button>Click to removes all  child nodes of above paragraphs</button>
</body>

Click me to see the solution.

83. Finds all elements that are empty. Go to the editor

Note: Don't have child elements or text.

Click me to see the solution.

84. Find all input elements that are enabled. Go to the editor

<form>
First name: <input type="text"  name="fname"><br>
Last name: <input type="text" name="lname"  disabled><br>
</form>

Click me to see the solution.

85. Selects all paragraphs and finds span elements inside these and reverts the selection back to the paragraphs. Go to the editor

<body>
<p><span>w3resource</span>.com</p>
<button  id="button1">Click to see the effect</button> 
</body>

Click me to see the solution.

86. Set the background color of the 4th division red by adding an appropriate class. Go to the editor

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button  id="button1">Click to see the effect</button>
</body>
div {
width: 20px;
height: 20px;
margin: 5px;
float: left;
border: 2px solid green;
}
.red {
background: red;
}

Click me to see the solution.

87. Find the sixth cell (second row and third column ) of a 3x3 table. Go to the editor

<body>
  <table border="1">
  <tr><td>Cell-1</td><td>Cell-2</td><td>Cell-3</td></tr>
  <tr><td>Cell-4</td><td>Cell-5</td><td>Cell-6</td></tr>
  <tr><td>Cell-7</td><td>Cell-8</td><td>Cell-9</td></tr>
  </table>
  </body>
  

Click me to see the solution.

88. Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.). Go to the editor

<body>
<table border="1"> 
<tr><td>R1C1  Index-0</td><td>R1C2 Index-0</td></tr> 
<tr><td>R2C1  Index-0</td><td>R2C2 Index-1</td></tr> 
<tr><td>R3C1  Index-0</td><td>R3C2 Index-2</td></tr> 
<tr><td>R4C1  Index-0</td><td>R4C2 Index-3</td></tr> 
<tr><td>R5C1  Index-0</td><td>R5C2 Index-4</td></tr> 
lt;/table> 
<button  id="button1">Click to see the effect</button>  
</body> 
  

Click me to see the solution.

89. Check whether the META key was pressed when the event fired. Go to the editor

Click me to see the solution.

90. Check whether the event namespace is used. Go to the editor

Click me to see the solution.

91. Display the mouse position relative to the left and top edges of the document (within this iframe). Go to the editor

Click me to see the solution.

92. Cancel the default action (navigation) of the click. Go to the editor

<body>
<a href="http://www.w3resource.com/">Clicked  anchors will not take the browser to a new URL</a>
<p  id="log"></p>
</body>

Click me to see the solution.

93. Display previous handler's (the last value returned triggered by this event by an event handler that was.) return value. Go to the editor

Click me to see the solution.

94. On mouseout of anchors, alert the element type being entered. Go to the editor

<body>
<a  href="http://www.w3resource.com/">Visit w3resource</a>
</body>

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.

Solve these problems:

Java: How to convert a string to an integer in Java?

C#: Loops in c#

SQL: JOIN using more than 5 tables