w3resource

jQuery Practical exercises, practice, solution - Fundamental-II

jQuery Fundamental - I exercises [ 50 exercises with solution ]

jQuery Fundamental - II exercises [44 exercises with solution ]

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

51. Check the lock-state of a callback list.

Click me to see the solution

52. Remove a single callback or a set of callbacks from a callback list.

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.

You can see the output from here

Click me to see the solution.

54. Finds all checkbox inputs.

You can see the output from here

Click me to see the solution.

55. Finds all elements that are checked or selected.

You can see the output from here

Click me to see the solution.

56. Finds the checked radio input.

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.

You can see the output from here

Click me to see the solution.

58. Using jQuery find all children of each division.

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

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

<body>
<p><a href="https://www.w3resource.com/jquery-exercises/">jQuery</a> Exercises, Practice and Solution</p>
<p><a href="https://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.

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

You can see the output from here

Click me to see the solution.

63. Get the background color of a clicked division.

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.

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

Click me to see the solution.

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

Click me to see the solution.

67. Click a word in the paragraph and highlight it.

Click me to see the solution.

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

Click me to see the solution.

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

You can see the output from here

Click me to see the solution.

70. Retrieve the stored value from the division element.

Click me to see the solution.

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

Click me to see the solution.

72. Double click to toggle background color of a paragraph.

Click me to see the solution.

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

Click me to see the solution.

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

You can see the output from here

Click me to see the solution.

75. Click on a paragraph and add another paragraph.

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.

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 .

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.

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.

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

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

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

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

Note: Don't have child elements or text.

Click me to see the solution.

84. Find all input elements that are enabled.

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

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

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

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

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

Click me to see the solution.

90. Check whether the event namespace is used.

Click me to see the solution.

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

Click me to see the solution.

92. Cancel the default action (navigation) of the click.

<body>
<a href="https://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.

Click me to see the solution.

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

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

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.



Follow us on Facebook and Twitter for latest update.