jQuery Practical exercises, practice, solution - Fundamental-II
jQuery Fundamental - I exercises [ 50 exercises with solution ]
[An editor is available at the bottom of the page to write and execute the scripts.]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
52. Remove a single callback or a set of callbacks from a callback list. Go to the editor
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
54. Finds all checkbox inputs. Go to the editor
You can see the output from here
55. Finds all elements that are checked or selected. Go to the editor
You can see the output from here
56. Finds the checked radio input. Go to the editor
You can see the output from here
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
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
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
60. Find all the text nodes inside a paragraph and wrap them with an italic tag. Go to the editor
<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. Go to the editor
<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. Go to the editor
You can see the output from here
63. Get the background color of a clicked division. Go to the editor
You can see the output from here
64. Get the styles (width, height, text color, and background color) of a clicked division. Go to the editor
<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. Go to the editor
66. Increase the width of a division by specified pixels once it is clicked. Go to the editor
67. Click a word in the paragraph and highlight it. Go to the editor
68. Change the font weight and color of paragraphs on mouseenter and mouseleave. Go to the editor
69. Increase the size of a division when you click it. Go to the editor
You can see the output from here
70. Retrieve the stored value from the division element.Go to the editor
71. Display a message to the dblclick event on all paragraphs on a page. Go to the editor
72. Double click to toggle background color of a paragraph. Go to the editor
73. Resolve a deferred object when the user clicks a button, triggering a number of callback functions. Go to the editor
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
75. Click on a paragraph and add another paragraph. Go to the editor
You can see the output from here
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.
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
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.
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>
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>
81. Finds every paragraph element. Go to the editor
<body> <p>Paragraph1</p> <p>Paragraph1</p> <div>Division1</div> </body>
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>
83. Finds all elements that are empty. Go to the editor
Note: Don't have child elements or text.
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>
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>
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;
}
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>
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>
89. Check whether the META key was pressed when the event fired. Go to the editor
90. Check whether the event namespace is used. Go to the editor
91. Display the mouse position relative to the left and top edges of the document (within this iframe). Go to the editor
92. Cancel the default action (navigation) of the click. Go to the editor
<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. Go to the editor
94. On mouseout of anchors, alert the element type being entered. Go to the editor
<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.
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework