w3resource logo


jquery exercises

jQuery Core - Exercises, Practice, Solution

Secondary Nav

jQuery Core [9 exercises with solution]

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

1. Find all h1 elements that are children of a div element and apply a background to them. Go to the editor
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. Go to the editor
Click me to see the solution

3. Hide all the input elements within a form. Go to the editor
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. Go to the editor
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? Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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 !

* To run the code mouse over on Output panel and click on 'Run with JS' button.*

JS Bin