jQuery Core - Exercises, Practice, Solution

Last update on May 31 2023 16:04:04 (UTC/GMT +8 hours)

jQuery Core [9 exercises with solution]

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

1. Find all h1 elements that are children of a div element and apply a background to them.
Sample Data :

<body>
<h1>abc</h1>
<div>
  <h1>div-1</h1>
  <h1>div-2</h1>
  </div>
  <h1>xyz</h1>
 </body>

Click me to see the solution

2. Set the background color of a page to red.
Click me to see the solution

3. Hide all the input elements within a form.
Test Data :

<body>
  <form  name='demo_form'>
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  </form>
  </body>

Click me to see the solution

4. Find the specific option tag text value of a selected option.
Sample Data :

<body>
 <select id="myselect">
    <option value="1">Option-1</option>
	<option value="2">Option-2</option>
	<option value="3">Option-3</option>
	</select>
</body>

Expected Output :
"Option-2"

Click me to see the solution

5. Check/uncheck a checkbox input or radio button?
Sample Data :

 <body>
  <form action="">
 <input type="radio" name="sex" value="male" checked>Male<br>
 <input type="radio" name="sex" value="female">Female
 </form>
 </body>

Click me to see the solution

6. Write jQuery code to append a div element (and all of its contents) dynamically to the body element.
Insert the following within HTML <body> tag :

<div><h1>JQuery Core</h1></div>

Click me to see the solution

7. Write a jQuery Code to get a single element from a selection.
Sample Data :

<body>
<ui>
<li>Html Tutorial</li>
<li>Mongodb Tutorial</li>
<li>Python Tutorial</li>
</body>

Sample Output : "Mongodb Tutorial"

Click me to see the solution

8. Write jQuery Code to add a <b> tag at the beginning of the list item, containing the index of the list item.
Sample Data :

<body>
<ui>
<li>Html Tutorial</li>
<li>Mongodb Tutorial</li>
<li>Python Tutorial</li>
</body>

Sample Output:

0: Html Tutorial
1: Mongodb Tutorial
2: Python Tutorial

Click me to see the solution

9. Write jQuery Code to change the hyperlink and the text of a existing link.
Sample Data :

<a href="www.w3resource.com/sqlite/" id='tut'>SQLite Tutorial</a>

Change the hyperlink to -> www.w3resource.com/mysql/mysql-tutorials.php
text -> MySQL Tutorial

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.

Live Demo:

See the Pen common-jquery-core-exercise by w3resource (@w3resource) on CodePen.