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
2. Set the background color red of the following elements using jQuery.
jQuery
Exercises
You can see the output from here
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
4. Using jQuery add the previous set of elements on the stack to the current set.
You can see the output from here
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
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
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
8. Using jQuery insert some HTML after all paragraphs.
You can see the output from here
9. Using jQuery insert a DOM element after all paragraphs.
You can see the output from here
10. Insert a jQuery object after all paragraphs.
You can see the output from here
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
12. Register a handler to be called when Ajax requests complete with an error.
You can see the output from here
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
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
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
16. Attach a function to be executed whenever an Ajax request completes successfully.
You can see the output from here
17. Using jQuery count every element (including head, body, etc.) in the document.
You can see the output from here
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
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
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
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
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
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
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
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
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
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
28. Find the title attribute of the first emphasized in the page
You can see the output from here
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
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
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
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
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
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
35. Finds all inputs with an attribute name that starts with 'P' and puts text in them.
You can see the output from here
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
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>
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>
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
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
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
42. Using jQuery add a callback or a collection of callbacks to a callback list.
43. Disable a callback list from doing anything more.
44. Test if the callback list has been disabled.
45. Using jQuery remove all of the callbacks from a list.
46. Call all of the callbacks with the given arguments.
47. Using jQuery check if the callbacks have already been called at least once.
48. Fire a list of callbacks with a specific context and an array of arguments.
49. Check if a callback list contains a specific callback.
50. Lock a callback list in its current state.
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.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics