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.
52. Remove a single callback or a set of callbacks from a callback list.
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
54. Finds all checkbox inputs.
You can see the output from here
55. Finds all elements that are checked or selected.
You can see the output from here
56. Finds the checked radio input.
You can see the output from here
57. Border around all list items that are children of a specified class of an unordered list.
You can see the output from here
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
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
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
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
62. Using jQuery right click to toggle background color.
You can see the output from here
63. Get the background color of a clicked division.
You can see the output from here
64. Get the styles (width, height, text color, and background color) of a clicked division.
<body> <p id="result"> </p> <div id="box1">A</div> <div id="box2">B</div> <div id="box3">C</div>
You can see the output from here
65. Change the color of any paragraph to red on mouseover event.
66. Increase the width of a division by specified pixels once it is clicked.
67. Click a word in the paragraph and highlight it.
68. Change the font weight and color of paragraphs on mouseenter and mouseleave.
69. Increase the size of a division when you click it.
You can see the output from here
70. Retrieve the stored value from the division element.
71. Display a message to the dblclick event on all paragraphs on a page.
72. Double click to toggle background color of a paragraph.
73. Resolve a deferred object when the user clicks a button, triggering a number of callback functions.
74. Animate the hiding and showing of two divs, delaying the first before showing it.
You can see the output from here
75. Click on a paragraph and add another paragraph.
You can see the output from here
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.
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
78. Remove all paragraphs from the DOM.
Note: .detach() is used to remove the set of matched elements from the DOM.
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>
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>
81. Finds every paragraph element.
<body> <p>Paragraph1</p> <p>Paragraph1</p> <div>Division1</div> </body>
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>
83. Finds all elements that are empty.
Note: Don't have child elements or text.
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>
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>
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;
}
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>
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>
89. Check whether the META key was pressed when the event fired.
90. Check whether the event namespace is used.
91. Display the mouse position relative to the left and top edges of the document (within this iframe).
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>
93. Display previous handler's (the last value returned triggered by this event by an event handler that was.) return value.
94. On mouseout of anchors, alert the element type being entered.
<body> <a href="https://www.w3resource.com/">Visit w3resource</a> </body>
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.
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://w3resource.com/jquery-exercises/2/index.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics