Scribd
Upload
30 views

HTML and Jquery Coding Exercises Coding For Beginners

Uploaded by

omni metro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

HTML and Jquery Coding Exercises Coding For Beginners

Uploaded by

omni metro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 80

HTML AND jQUERY

CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
COMMENT HTML TAGS
CREATE A HYPERLINK IN HTML
DOWNLOAD A FILE
CREATE A LINK
CREATE A NOFOLLOW LINK
OPEN A LINKED DOCUMENT
CORRECT WAY TO WRITE ADDRESS
SPECIFY AN ALTERNATE TEXT
CREATE AN HTML DOCUMENT
CREATE AN HTML DOCUMENT
TO ADD CONTROLS TO AN AUDIO
WRITE BOLD TEXT USING HTML TAGS
TO SPECIFY THE BASE URL
ISOLATE A PART OF TEXT
DEFINE A SECTION
DEFINE THE DOCUMENT'S BODY
DEFINES A SINGLE LINE BREAK
DEFINE A CLICKABLE BUTTON
SPECIFY THAT A BUTTON
SPECIFY A BUTTON SHOULD BE DISABLED
SPECIFY ONE OR MORE FORMS
SPECIFY WHERE TO SEND THE FORM-DATA
SEND THE FORM-DATA
SPECIFY WHERE TO DISPLAY
SPECIFY A NAME FOR THE BUTTON
SPECIFY THE TYPE OF BUTTON
DRAW GRAPHICS, ON THE FLY,
DEFINE A TABLE CAPTION
SPECIFY THE COLUMN PROPERTIES
DEFINE IMPORTANT TEXT
SPECIFY A LIST OF PRE-DEFINED OPTIONS
DEFINE A DESCRIPTION
DEFINE A DIALOG BOX
DEFINE A SECTION
HTMLRESOURCE TUTORIAL

JQUERY CODING EXERCISES


CHECK JQUERY IS LOADED
SCROLL TO THE TOP
DISABLE RIGHT CLICK MENU
BLINK TEXT
CREATE TABLE EFFECT
MAKE FIRST WORD BOLD
UNDERLINE ALL THE WORDS
CHANGE BUTTON TEXT USING JQUERY
ADD OPTIONS TO A DROP-DOWN LIST
SET BACKGROUND-IMAGE
DELETE ALL TABLE ROWS EXCEPT FIRST ONE
DISABLE A LINK
CHANGE A CSS CLASS
SET THE BACKGROUND COLOR
ADD THE PREVIOUS SET OF ELEMENTS
ADD A SPECIFIED CLASS
ADD TWO CLASSES
INSERT SOME HTML
COUNT EVERY ELEMENT
COUNT ALL ELEMENTS
ANIMATE PARAGRAPH ELEMENT
HTML
CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
Comment HTML tags
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to comment HTML tags</title>
</head>
<body>
<p>HTML Tutorial</p>
<!--<p>Python Tutorial</p>-->
<p>PHP Tutorial</p>
</body>
</html>
Output:
HTML Tutorial

PHP Tutorial
Create a hyperlink in HTML
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a hyperlink</title>
</head>
<body>
<p><a href="http://htmlexample.com">htmlexample.com</a><p>
</body>
</html>
Download a file
when clicking on the link
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Download a file when clicking on the link</title>
</head>
<body>
<p><a href="https://www.hmlresource.com/images/htmlresource-logo.png"
download>Download</a></p>

</body>
</html>
Create a link
with a media attribute
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a link with a media attribute</title>
</head>
<body>
<a href="https://www.htmlresource.com" media="print, handheld">Media
Attribute</a>
</body>
</html>
Create a nofollow link
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create a nofollow link</title>
</head>
<body>
<a rel="nofollow" href="http://htmlexample.com">Example.com</a>
</body>
</html>
Open a linked document
in a separate browser tab
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to open a linked document in a separate browser tab</title>
</head>
<body>
<p><a href="https://htmlresource.com" target="_blank">Target HTML5
EXCECISES</a></p>
</body>
</html>
Correct way to write address
in a HTML document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>What is the correct way to write address in a HTML document</title>
</head>
<body>
<address>
Address: 21,MG Road<br>
Burdwan<br>
West Bengal.
</address>
</body>
</html>
Specify an alternate text
for the area
if the href attribute is present
HTML CODE
<body>
<img src="https://www.htmlresource.com/htmlr_images/html-area-element.png"
alt="area example" border="0" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="8,5,100,77"
href="https://www.htmlresource.com/mysql/mysql-tutorials.php"
target="_blank" alt="mysql tutorial">
<area shape="circle" coords="155,93,59"
href="https://www.htmlresource.com/php/php-home.php" target="_blank"
alt="php tutorial">
<area shape="rect" coords="197,136,306,188"
href="https://www.htmlresource.com/sql/sql-tutorials.php" alt="sql tutorials">
</map>
</body>
Create an HTML document
which uses article element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create an HTML document which uses article element</title>
</head>
<body>
<article>
<h1>Tutorial of HTML5 article element</h1>
<p>HTML5 article element represents independent item like a blog entry in an
web document.</p>
</article>
</body>
</html>
Create an HTML document
which uses aside element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create an HTML document which uses aside element</title>
</head>
<body>
<p> I visited the HTML5 tutorial of htmlresource</p>

<aside>
<h4>HTML5 tutorial</h4>
<p>I can develop excellent web applications with HTML5 and related APIs
(like GeoLocation, Drag and Drop, WebSocket etc.)in HTML5 tutorial.</p>
</aside>
</body>
</html>
OUTPUT
I visited the HTML5 tutorial of htmlresource
HTML5 tutorial
I can develop excellent web applications with HTML5 and related
APIs (like GeoLocation, Drag and Drop, WebSocket etc.)in HTML5
tutorial.
To add controls to an audio
HTML CODE
<body>
<audio controls>
<source src="https://www.htmlresource.com/html-css-
exercise/basic/solution/beach.ogg" type="audio/ogg">
<source src="https://www.htmlresource.com/html-css-
exercise/basic/solution/beach.mp3" type="audio/mpeg">
</audio>
</body>
Write bold text using HTML tags
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to write bold text using HTML tags</title>
</head>
<body>
<p>"htmlresource" is normal text - and <b>"htmlresource"</b> is bold text.
</body>
</html>
OUTPUT
"htmlresource" is normal text - and "htmlresource" is bold text.
To specify the base URL
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specifie the base URL/target for all relative URLs in a
document</title>
<base href="https://www.htmlresource.com/">
</head>
<body>
<ul>
<li><a href="php/php-home.php">PHP Tutorial</a></li>
<li><a href="javascript/javascript.php">JavaScript Tutorial</a></li>
<li><a href="mysql/mysql-tutorials.php">MySQL Tutorial</a></li>
</body>
</html>
Isolate a part of text
That might be formatted
In a different direction

HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><span class="heading">How to isolate a part of text that might be
formatted in a different direction from other text outside it</span></title>
</head>
<body>
<p>
In the example below, usernames are shown along with the number of points in a
contest.
If the bdi element is not supported in the browser, the username of the Arabic
user would confuse the text (the bidirectional algorithm would put the colon and
the number "80" next to the word "User" rather than next to the word "points").
</p>
<ul>
<li>User <bdi>hrefs</bdi>: 40 points</li>
<li>User <bdi>jdoe</bdi>: 60 points</li>
<li>User <bdi> ‫< ﺗﺮﺣﻲ ب‬/bdi>:80 points</li>
</ul>
<p><b>Note:</b> The bdi element is currently supported only in Firefox and
Chrome.</p>
</body>
</html>
OUTPUT
In the example below, usernames are shown along with the number of
points in a contest. If the bdi element is not supported in the browser,
the username of the Arabic user would confuse the text (the
bidirectional algorithm would put the colon and the number "80" next
to the word "User" rather than next to the word "points").
User hrefs: 40 points
User jdoe: 60 points
User 80:‫ ﺗﺮﺣﻴﺐ‬points

Note: The bdi element is currently supported only in Firefox and


Chrome.
Define a section
that is quoted from another source
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html blockquote tag example</title>
</head>
<body>
<blockquote>Freedom is not worth having if it does not connote freedom to err.
It passes my comprehension how human beings, be they ever so experienced and
able, can delight in depriving other human beings of that precious right.
</blockquote>
</body>
</html>
OUTPUT
Freedom is not worth having if it does not connote freedom to err. It
passes my comprehension how human beings, be they ever so
experienced and able, can delight in depriving other human beings of
that precious right.
Define the document's body
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define the document's body</title>
</head>
<body>
We are learning HTML body element.
</body>
</html>
OUTPUT
We are learning HTML body element.
Defines a single line break
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a single line break</title>
</head>
<body>
<p>The quick brown fox jumps<br>over the lazy dog.</p>
</body>
</html>
OUTPUT
The quick brown fox jumps
over the lazy dog.
Define a clickable button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a clickable button.</title>
</head>
<body>
<button type="button" onclick="console.log('Welcome Friends')">Click Me!
</button>
</body>
</html>
Specify that a button
automatically get focus
when the page load
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The example of autofocus attribute with button element.</title>
</head>
<body>
<button type="button" autofocus onclick="console.log('Welcome
Friends')">Click Me!</button>
</body>
</html>
Specify a button should be disabled
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of HTML disabled attribute with button</title>
</head>
<body>
<form action="example.php" method="post">
First Name : <input type="text" name="Fname"><br>
<button type="button" name="Submit" disabled>Submit</button>
</body>
</html>

OUTPUT
Specify one or more forms
the button belongs to
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify one or more forms the button belongs to</title>
</head>
<body>
<form method="POST"
action="https://www.htmlresource.com/html-css-exercise/basic/solution/button-
form-answer-demo.php" id="form1">
First name : <input type="text" name="fname"><br>
Last name : <input type="text" name="lname"><br>
Present Address : <input type="text" name="add"><br>
E-mail : <input type="text" name="mail"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
</body>
</html>
OUTPUT
Specify where to send the form-data
when a form is submitted
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Specify where to send the form-data when a form is submitted.
</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formaction-
answer-demo.php" method="post">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formaction-admin-demo.php">Submit as
admin</button>
</form>
</body>
</html>
OUTPUT
Send the form-data
(which HTTP method to use)
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to send the form-data,which HTTP method to use</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formmethod-answer-demo.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Address: <input type="text" name="place"><br>
<button type="submit">Submit</button>
<button type="submit" formmethod="post" formaction="http://localhost/html-
css-exercise/basic/solution/button-formmethod-post-answer.php">Submit using
POST</button>
</form>
</body>
</html>
OUTPUT
Specify where to display
the response after submitting the form
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify where to display the response after submitting the
form</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-formtarget-answer-demo.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button>
<button type="submit" formtarget="_blank">Submit to a new
window/tab</button>
</form>
</body>
</html>
OUTPUT
Specify a name for the button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify a name for the button</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-name-answer-demo.php" method="post">
Choose your favorite topic:
<button name="topic" type="submit" value="JavaScript">JavaScript</button>
<button name="topic" type="submit" value="PHP">PHP</button>
</form>
</body>
</html>
OUTPUT
Specify the type of button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify the type of button</title>
</head>
<body>
<form action="https://www.htmlresource.com/html-css-
exercise/basic/solution/button-type-answer-demo.php"
method="post"id="nameform">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Address: <input type="text" name="add"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
OUTPUT
Draw graphics, on the fly,
via scripting
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to use to draw graphics, on the fly, via scripting</title>
</head>
<body>
Canvas
<style>
#FirstCanvas{
width: 500px;
height: 300px;
border: 3px solid red;
background-color: blue;
}
</style>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
OUTPUT
Define a table caption
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a table caption</title>
</head>
<body>
<table border="1">
<caption>First column holds Student code and second column holds percentage
of marks obtained by the student</caption>
<tr>
<th>Student code </th>
<th>% of marks </th>
</tr>
<tr>
<td>S001</td>
<td>85</td>
</tr>
<tr>
<td>S002</td>
<td>86</td>
</tr>
<tr>
<td>S003</td>
<td>72</td>
</tr>
<tr>
<td>S004</td>
<td>89</td>
</tr>
</table
</body>
</html>
OUTPUT
Specify the column properties
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify the column properties of each column within a column
group element</title>
</head>
<body>
<table class="table table-bordered">
<colgroup>
<col span="3" style="background-color:#cc66Ff">
<col style="background-color:#cc66Ff">
</colgroup>
<tr>
<th>COL-1</th>
<th>COL-2</th>
<th>COL-3</th>
</tr>
<tr>
<td>MySQL</td>
<td>PHP</td>
<td>SQL</td>
</tr>
<tr>
<td>MySQL Exercise</td>
<td>PHP Exercise</td>
<td>SQL Exercise</td>
</tr>
</table>
</body>
</html>
OUTPUT
Define important text
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define important text</title>
</head>
<body>
<p>This is an example of <strong>HTML strong tag.</strong></p>
</body>
</html>

OUTPUT
This is an example of HTML strong tag.
Specify a list of pre-defined options
for input controls
HTML CODE
<!doctype html>
<html>
<head>
<title>HTML5 datalist example</title>
</head>
<body>
<input list="Languages" />
<datalist id="Languages">
<option value="PHP">
<option value="ASP">
<option value="Python">
<option value="Ruby">
<option value="Java">
</datalist>
</body>
</html>
OUTPUT
Define a description
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a description/value of a term in a description list</title>
</head>
<body>
<dl>
<dt>PHP</dt>
<dd>A server side scripting language.</dd> <dt>JavaScript</dt>
<dd>A client side scripting language.</dd> </dl>
</body>
</html>
OUTPUT
PHP
A server side scripting language.
JavaScript
A client side scripting language.
Define a dialog box
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a dialog box or window</title>
</head>
<body>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>March <dialog open>This is an open dialog window</dialog></th>
<th>April</th>
<th>May</th>
</tr>
<tr>
<td>31</td>
<td>30</td>
<td>31</td>
</tr>
</table>

</body>
</html>
OUTPUT
Define a section
in a document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a section in a document</title>
</head>
<body>
<div>
<h1>htmlresource Tutorial</h1>
<p>This is example of division</p>
</div>
</body>
</html>
OUTPUT

htmlresource Tutorial
This is example of division
JQUERY
CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
JQUERY CODING EXERCISES
Check jQuery is loaded
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Test if jQuery is loaded</title>
</head>
<body>
<p>Click me!</p>
</body>
</html>
JAVASCRIPT CODE
$("p").bind("click", function(){
$( "This is a click Event").appendTo( "body" );
});

$("p").bind("dblclick", function(){
$( "This is a double-click Event" ).appendTo( "body" );
});
OUTPUT
Click me!
This is a click Event
Scroll to the top
of the page
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Scroll to the top of the page with jQuery</title>
</head>
<body>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<a href='#top'>Go Top</a>
</body>
</html>
JAVASCRIPT CODE
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Disable right click menu
In html page
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Disable right click menu in html page using jquery</title>
</head>
<body>
</body>
</html>
JAVASCRIPT CODE
$(document).bind("contextmenu",function(e){
return false;
});
Disable/enable the form
submit button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Disable/enable the form submit button</title>
</head>
<body>
<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>
<input id="submitbtn" disabled="disabled" name="Submit" type="submit"
value="Submit" />
</body>
</html>
JAVASCRIPT CODE
$('#accept').click(function() {
if ($('#submitbtn').is(':disabled')) {
$('#submitbtn').removeAttr('disabled');
} else {
$('#submitbtn').attr('disabled', 'disabled');
}
});
OUTPUT
Blink text
using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Blink text using jQuery</title>
</head>
<body>
<p>jQuery <span class="blink">Exercises</span> and Solution</p>
</body>
</html>
JAVASCRIPT CODE

function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blink_text, 1000);
Create table effect
Like Zebra Stripes
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<style type="text/css">.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 1px solid #ff751a;
padding: 5px;
}
table tr th{
border: 1px solid #79ff4d;
padding: 5px;
}
.zebra{
background-color: #ff0066;
}
</style>
<title>Create a Zebra Stripes table effect</title>
</head>
<body>
<div class="table_style">
<table>
<tr>
<th>Student Name</th>
<th>Marks in Science</th>
</tr>
<tr>
<td>James</td>
<td>85.00</td>
</tr>
<tr>
<td>David</td>
<td>92.00</td>
</tr>
<tr>
<td>Arthur</td>
<td>79.00</td>
</tr>
<tr>
<td>George</td>
<td>82.00</td>
</tr>
</table>
</div>
</body>
</html>

JAVASCRIPT CODE
$(document).ready(function(){
$("tr:odd").addClass("zebra");
});

OUTPUT
Make first word bold
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Make first word bold of all elements</title>
</head>
<body>
<p>PHP Exercises</p>
<p>Python Exercises</p>
<p>JavaScript Exercises</p>
<p>jQuery Exercises</p>
</body>
</html>

JAVASCRIPT CODE
$('p').each(function(){
var pdata = $(this);
pdata.html( pdata.text().replace(/(^\w+)/,'$1') );
});

OUTPUT
PHP Exercises
Python Exercises
JavaScript Exercises
jQuery Exercises
Underline all the words
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Underline all words of a text through jQuery</title>
</head>
<body>
<p>The best way we learn anything is by practice and exercise questions</p>
</body>
</html>

CSS CODE
p span{
text-decoration: underline;
}

JAVASCRIPT CODE
$('p').each(function() {

var text_words = $(this).text().split(' ');

$(this).empty().html(function() {

for (i = 0; i < text_words.length; i++) {


if (i === 0) {
$(this).append('<span>' + text_words[i] + '</span>');
} else {
$(this).append(' <span>' + text_words[i] + '</span>');
}
}
});
});

OUTPUT
Change button text using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change button text using jQuery.</title>
</head>
<body>
<input type='button' value='Cancel' id='button1'>
</body>
</html>

JAVASCRIPT CODE
//Uncomment the following code and see the changes.

//$("#button1").prop('value', 'Save');
Add options to a drop-down list
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add options to a drop-down list using jQuery.</title>
</head>
<body>
<p>List of Colors :</p>
<select id='myColors'>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
</body>
</html>
JAVASCRIPT CODE
var myOptions = {
val1 : 'Blue',
val2 : 'Orange'
};
var mySelect = $('#myColors');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
OUTPUT
Set background-image
Using jQuery CSS property
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Set background-image using jQuery CSS property.</title>
</head>
<body>
</body>
</html>
JAVASCRIPT CODE
$('body').css('background-image',
'url("https://www.htmlresource.com/includes/jquery-images/jquery.gif")');

Output
Delete all table rows except first one
using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Delete all table rows except first one using jQuery.</title>
</head>
<body>
<table border="1" id="myTable">
<tr>
<th>Year</th>
<th>Savings</th>
</tr>
<tr>
<td>2014</td>
<td>$10000</td>
</tr>
<tr>
<td>2015</td>
<td>$8000</td>
</tr>
<tr>
<td>2016</td>
<td>$9000</td>
</tr>
</table>
<p>
<input id="button1" type="button" value="Click to remove all rows except first
one"/></p>
</body>
</html>
JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function(){
$("#myTable").find("tr:gt(0)").remove();
});
});

OUTPUT
Disable a link
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Disable a link using jQuery</title>
</head>
<body>
<a href="https://www.htmlresource.com/jquery-exercises/">jQuery Exercises,
Practice, Solution</a>
<p></p>
<input id="button1" type="button" value="Click to remove the link!" />
</body>
</html>
JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function(){
$("a").removeAttr('href');
});
});
OUTPUT
Change a CSS class
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change a CSS class name using jQuery.</title>
</head>
<body>
<p id="pid" class="center"> jQuery Exercises</p>
<input id="button1" type="button" value="Click to change the Class" />
</body>
</html>
CSS CODE
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 200%;
}
JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function()
{ $('#pid').removeClass('center').addClass('large');
});
});
OUTPUT
Set the background color
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Set the background color red of the following elements using jQuery.
</title>
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
} </style>
</head>
<body>
<textarea>TutoRIAL</textarea>
<p>jQuery</p>
<span>Exercises</span>
<button id="button1">Click to see the effect</button>
</body>
</html>
JAVASCRIPT CODE
$('#button1').click(function(){
$("p").add( "span" ).add("textarea").css( "background", "red" );
});
Add the previous set of elements
On the stack to the current set
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using jQuery add the previous set of elements on the stack to the current
set.</title>
</head>
<body>
<div class="left">
<p><strong>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>JavaScript</p>
<p>jQuery</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>JavaScript</p>
<p>jQuery</p>
</div>
</div>
</body>
</html>
CSS CODE
p, div {
margin: 5px;
padding: 5px;
color: #c03199;
}
.border {
border: 2px solid #360e9b;
}
.background {
background: #cdc8b1;
}
.left, .right {
width: 40%;
float: left;
}
.right {
margin-left: 2%;
}

JAVASCRIPT CODE
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );

// First Part
$( "div.before-addback" ).find( "p" ).addClass( "background" );

// Second Part
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
Add a specified class
To the matched elements
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add a specified class to the matched elements.</title>
</head>
<body>
<p>PHP</p>
<p>Java</p>
<p>Python</p>
</body>
</html>
CSS CODE
p{
margin: 8px;
font-size: 16px;
}
.h3r_font_color{
color: red;
}
.h3r_background {
background: yellow;
}
JAVASCRIPT CODE
$( "p" ).last().addClass( "h3r_font_color" );
Add two classes
To the matched elements
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add two classes to the matched elements.</title>
</head>
<body>
<p>PHP</p>
<p>Java</p>
<p>Python</p>
</body>
</html>
CSS CODE
p{
margin: 8px;
font-size: 16px;
}
.h3r_font_color{
color: blue;
}
.h3r_background {
background: orange;
}
JAVASCRIPT CODE
$( "p" ).last().addClass( "w3r_font_color h3r_background " );
Insert some HTML
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using jQuery insert a paragraph after all paragraphs.</title>
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
} </style>
</head>
<body>
<p>jQuery Exercises</p>
<button id="button1">Click to see the effect</button>
</body>
</html>

CSS CODE
$('#button1').click(function(){
$( "p" ).after( "<b><i>With solution.</i></b>" );
});

JAVASCRIPT CODE
$('#button1').click(function(){
$( "p" ).after( "<b><i>With solution.</i></b>" );
});

OUTPUT
Count every element
In the document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Count every element (including head, body, etc.) in the document.
</title>
</head>
<body>
<div>This is division</div>
<span>This is a span</span>
<p>This is a Paragraph</p>
<button id="button1">Click to see the effect</button>
</body>
</html>
CSS CODE
button {
display: block;
margin: 20px 0 0 0;
clear: both
}

div, span, p {
width: 160px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #B0E0E6
}
JAVASCRIPT CODE
$('#button1').click(function(){

var elementCount = $( "*" ).css( "border", "3px solid blue" ).length;


$( "body" ).prepend( "<h2>" + elementCount + " elements found</h3>" );
});
OUTPUT
Count all elements
Within a division
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Count all elements within a division.</title>
</head>
<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>
</html>
CSS CODE
button {
display: block;
margin: 20px 0 0 0;
clear: both
}

span, p {
width: 160px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #B0E0E6
}

JAVASCRIPT CODE
$('#button1').click(function(){

var elementCount = $( "#iddiv" ).find( "*" ).css( "border", "2px solid blue"
).length;

$( "body" ).prepend( "" + elementCount + " element(s) found" );


});
OUTPUT
Animate paragraph element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Click the button to animate the paragraph element with a number of
different properties.</title>
</head>
<body>
<p id="pid">jQuery</p>
<button id="button1">Click to see the animation</button>
</body>
</html>

CSS CODE
button {
display: block;
margin: 20px 0 0 0;
}

p{
background-color: #B0E0E6;
width: 70px;
border: 1px solid red;
}

JAVASCRIPT CODE
$('#button1').click(function(){
$( "#pid" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});

You might also like