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.]1. Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red. Go to the editor
You can see the output from here
2. Set the background color red of the following elements using jQuery. Go to the editor
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. Go to the editor
You can see the output from here
4. Using jQuery add the previous set of elements on the stack to the current set. Go to the editor
You can see the output from here
5. Using jQuery add the class " w3r_font_color " to the last paragraph element. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
You can see the output from here
9. Using jQuery insert a DOM element after all paragraphs. Go to the editor
You can see the output from here
10. Insert a jQuery object after all paragraphs. Go to the editor
You can see the output from here
11. Register a handler to be called when Ajax requests complete. Go to the editor
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. Go to the editor
You can see the output from here
13. Attach a function to be executed before an Ajax request is sent. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
You can see the output from here
17. Using jQuery count every element (including head, body, etc.) in the document. Go to the editor
You can see the output from here
18. Using jQuery count all elements within a division. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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 Go to the editor
You can see the output from here
29. Using jQuery find all links with an hreflang attribute de. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
<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. Go to the editor
You can see the output from here
36. Inserts some HTML before all paragraphs using JQuery. Go to the editor
<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. Go to the editor
<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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
<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. Go to the editor
43. Disable a callback list from doing anything more. Go to the editor
44. Test if the callback list has been disabled. Go to the editor
45. Using jQuery remove all of the callbacks from a list. Go to the editor
46. Call all of the callbacks with the given arguments. Go to the editor
47. Using jQuery check if the callbacks have already been called at least once. Go to the editor
48. Fire a list of callbacks with a specific context and an array of arguments. Go to the editor
49. Check if a callback list contains a specific callback. Go to the editor
50. Lock a callback list in its current state. Go to the editor
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