PYTHON AND JQUERY

CODING EXERCISES

CODING FOR BEGINNERS

JJ TAM
PYTHON BASIC – EXERCISES
GET PYTHON VERSION
DISPLAY CURRENT DATE AND TIME
PRINT THE CALENDAR
COMPUTES THE VALUE OF N+NN+NNN
CALCULATE NUMBER OF DAYS
VOLUME OF A SPHERE IN PYTHON
COMPUTE THE AREA OF TRIANGLE
COMPUTE THE GCD
CALCULATE THE LCM
CONVERT FEET AND INCHES TO CENTIMETERS
CONVERT TIME – SECONDS
CONVERT SECONDS TO DAY
CALCULATE BMS
SORT THREE INTEGERS
GET SYSTEM TIME
CHECK A NUMBER
PYTHON CODE TO REMOVE FIRST ITEM
FILTER POSITIVE NUMBERS
COUNT THE NUMBER 4
FIND A NUMBER EVEN OR ODD
GET N COPIES OF A GIVEN STRING
PRINT OUT A LIST WHICH ARE NOT PRESENT IN
OTHER LIST
DISPLAY DETAILS NAME, AGE, ADDRESS IN THREE
DIFFERENT LINES
PROGRAM TO SOLVE
FUTURE VALUE OF AMOUNT
CHECK WHETHER A FILE EXISTS
CONVERT THE DISTANCE
SUM ALL THE ITEMS
MULTIPLIES ALL THE ITEMS
GET THE LARGEST NUMBER
GET THE SMALLEST NUMBER
REMOVE DUPLICATES
CLONE OR COPY A LIST
DIFFERENCE BETWEEN THE TWO LISTS
GENERATE ALL PERMUTATIONS
FIND THE SECOND SMALLEST
GET UNIQUE VALUES
GET THE FREQUENCY OF THE ELEMENTS
GENERATE ALL SUBLISTS
FIND COMMON ITEMS
CREATE A LIST
REMOVE CONSECUTIVE DUPLICATES
FLATTEN A NESTED

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
PYTHON CODING EXERCISES

CODING FOR BEGINNERS

JJ TAM
Python Basic – Exercises
Get Python version
CODE
import sys
print("Python version")
print (sys.version)
print("Version info.")
print (sys.version_info)

OUTPUT
Python version
3.6.6 (default, Jun 28 2018, 04:42:43)
[GCC 5.4.0 20160609]
Version info.
sys.version_info(major=3, minor=6, micro=6, releaselevel='final', serial=0)
Display current date and time
PYTHON CODE
import datetime
now = datetime.datetime.now()
print ("Current date and time : ")
print (now.strftime("%Y-%m-%d %H:%M:%S"))
OUTPUT
Current date and time :
2020-10-22 10:35:31
Print the calendar
PYTHON CODE
import calendar
y = int(input("Input the year : "))
m = int(input("Input the month : "))
print(calendar.month(y, m))
OUTPUT
Input the year : 2020
Input the month : 10

    October 2020
Mo Tu We Th Fr Sa Su
          1  2  3  4
5  6  7  8  9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Computes the value of n+nn+nnn
PYTHON CODE
a = int(input("Input an integer : "))
n1 = int( "%s" % a )
n2 = int( "%s%s" % (a,a) )
n3 = int( "%s%s%s" % (a,a,a) )
print (n1+n2+n3)

OUTPUT
Input an integer : 6
738
Calculate number of days
PROGRAM
from datetime import date
f_date = date(2014, 7, 2)
l_date = date(2015, 7, 11)
delta = l_date - f_date
print(delta.days)
OUTPUT
374
volume of a sphere in Python
PROGRAM

pi = 3.1415926535897931
r= 6.0
V= 4.0/3.0*pi* r**3
print('The volume of the sphere is: ',V)

OUTPUT
The volume of the sphere is:  904.7786842338603
Compute the area of Triangle
PROGRAM
b = int(input("Input the base : "))
h = int(input("Input the height : "))

area = b*h/2

print("area = ", area)

OUTPUT
Input the base : 20 
Input the height : 40
area =  400.0  
Compute the GCD
PROGRAM
def gcd(x, y):
gcd = 1

if x % y == 0:
return y

for k in range(int(y / 2), 0, -1):

if x % k == 0 and y % k == 0:
gcd = k
break
return gcd

print(gcd(12, 17))
print(gcd(4, 6))
OUTPUT
1
2
CALCULATE THE LCM
PROGRAM
def lcm(x, y):
if x > y:
z=x
else:
z=y

while(True):
if((z % x == 0) and (z % y == 0)):
lcm = z
break
z += 1

return lcm
print(lcm(4, 6))
print(lcm(15, 17))
OUTPUT
12
255
Convert feet and inches to
centimeters
PROGRAM
print("Input your height: ")
h_ft = int(input("Feet: "))
h_inch = int(input("Inches: "))

h_inch += h_ft * 12
h_cm = round(h_inch * 2.54, 1)

print("Your height is : %d cm." % h_cm)

OUTPUT
Input your height:
Feet:  5
Inches:  3
Your height is : 160 cm.
Convert time – seconds
PYTHON CODE
days = int(input("Input days: ")) * 3600 * 24
hours = int(input("Input hours: ")) * 3600
minutes = int(input("Input minutes: ")) * 60
seconds = int(input("Input seconds: "))

time = days + hours + minutes + seconds

print("The  amounts of seconds", time)

Output:
Input days:  4
Input hours:  5
Input minutes:  20
Input seconds:  10
The  amounts of seconds 364810
Convert seconds to day
PROGRAM
time = float(input("Input time in seconds: "))
day = time // (24 * 3600)
time = time % (24 * 3600)
hour = time // 3600
time %= 3600
minutes = time // 60
time %= 60
seconds = time
print("d:h:m:s-> %d:%d:%d:%d" % (day, hour, minutes, seconds))
OUTPUT
Input time in seconds:
1234565                                                                               
d:h:m:s-> 14:6:56:5
Calculate BMS
PROGRAM
height = float(input("Input your height in meters: "))
weight = float(input("Input your weight in kilogram: "))
print("Your body mass index is: ", round(weight / (height * height), 2))
OUTPUT
Input your height in meters: 6.2
Input your weight in kilogram: 72
Your body mass index is:  1.87
Sort three integers
PROGRAM
x = int(input("Input first number: "))
y = int(input("Input second number: "))
z = int(input("Input third number: "))

a1 = min(x, y, z)
a3 = max(x, y, z)
a2 = (x + y + z) - a1 - a3
print("Numbers in sorted order: ", a1, a2, a3)
OUTPUT
Input first number: 2                                                                                        
Input second number:
4                                                                                       
Input third number:
5                                                                                        
Numbers in sorted order:  2 4 5
Get system time
PROGRAM
import time
print()
print(time.ctime())
print()
OUTPUT
Thu Oct 22 14:59:27 2020
Check a number
PYTHON CODE
num = float(input("Input a number: "))
if num > 0:
print("It is positive number")
elif num == 0:
print("It is Zero")
else:
print("It is a negative number")
OUTPUT
Input a number: 200
It is positive number
Python code to Remove first item 
PROGRAM
color = ["Red", "Black", "Green", "White", "Orange"]
print("\nOriginal Color: ",color)
del color[0]
print("After removing the first color: ",color)
print()
OUTPUT
Original Color:  ['Red', 'Black', 'Green', 'White', 'Orange']
After removing the first color:  ['Black', 'Green', 'White', 'Orange']
Filter positive numbers
PYTHON CODE
nums = [34, 1, 0, -23]
print("Original numbers in the list: ",nums)
new_nums = list(filter(lambda x: x >0, nums))
print("Positive numbers in the list: ",new_nums)
OUTPUT
Original numbers in the list:  [34, 1, 0,
-23]                                                               
Positive numbers in the list:  [34, 1]
Count the number 4
in a given list
SAMPLE PROGRAM
def list_count_4(nums):
count = 0
for num in nums:
if num == 4:
count = count + 1

return count

print(list_count_4([1, 4, 6, 7, 4]))
print(list_count_4([1, 4, 6, 4, 7, 4]))

OUTPUT
2                                                                                                            
3
Find a number even or odd
SAMPLE PROGRAM
num = int(input("Enter a number: "))
mod = num % 2
if mod > 0:
print("This is an odd number.")
else:
print("This is an even number.")
OUTPUT
Enter a number: 5                                                                                            
This is an odd number.
Get n copies of a given string
PROGRAM
def larger_string(str, n):
result = ""
for i in range(n):
result = result + str
return result

print(larger_string('abc', 2))
print(larger_string('.py', 3))
OUTPUT
abcabc                                                                                                       
.py.py.py
Print out a list which are not
present in other list
DATA
color_list_1 = set(["White", "Black", "Red"])
color_list_2 = set(["Red", "Green"])
Expected Output  :
{'Black', 'White'}
SAMPLE PROGRAM
color_list_1 = set(["White", "Black", "Red"])
color_list_2 = set(["Red", "Green"])

print(color_list_1.difference(color_list_2))
OUTPUT
{'White', 'Black'}
Display details name, age, address
in three different lines
SAMPLE PROGRAM
def personal_details():
name, age = "JJ Tam", 28
address = "Bangalore, Karnataka, India"
print("Name: {}\nAge: {}\nAddress: {}".format(name, age, address))

personal_details()
OUTPUT
Name: JJ Tam
Age: 28
Address: Bangalore, Karnataka, India
Program to solve
(x + y) * (x + y)
DATA
program to solve (x + y) * (x + y).
Test Data : x = 4, y = 3
Expected Output : (4 + 3) ^ 2) = 49

PROGRAM
x, y = 4, 3
result = x * x + 2 * x * y + y * y
print("({} + {}) ^ 2) = {}".format(x, y, result))

OUTPUT
(4 + 3) ^ 2) = 49
Future value of amount
Of the given rate of interest, and a number
of years
DATA
Test Data : amt = 10000, int = 3.5, years = 7
Expected Output : 12722.79
PROGRAM
amt = 10000
int = 3.5
years = 7

future_value  = amt*((1+(0.01*int)) ** years)

print(round(future_value,2))
OUTPUT
12722.79
Check whether a file exists
PROGRAM
import os.path
open('abc.txt', 'w')
print(os.path.isfile('abc.txt'))
OUTPUT
True
Convert the distance
Feet to inches, yards, and miles
SAMPLE PROGRAM
d_ft = int(input("Input distance in feet: "))
d_inches = d_ft * 12
d_yards = d_ft / 3.0
d_miles = d_ft / 5280.0

print("The distance in inches is %i inches." % d_inches)

print("The distance in yards is %.2f yards." % d_yards)
print("The distance in miles is %.2f miles." % d_miles)
OUTPUT
Input distance in feet:
100                                                                                  
The distance in inches is 1200
inches.                                                                       
The distance in yards is 33.33
yards.                                                                        
The distance in miles is 0.02 miles.
Sum all the items
in a list
Python Code
def sum_list(items):
sum_numbers = 0
for x in items:
sum_numbers += x
return sum_numbers
print(sum_list([1,2,-8]))

OUTPUT
-5
Multiplies all the items
in a list
Python Code
def multiply_list(items):
tot = 1
for x in items:
tot *= x
return tot
print(multiply_list([1,2,-8]))

OUTPUT
-16
Get the largest number
from a list
Python Code
def max_num_in_list( list ):
max = list[ 0 ]
for a in list:
if a > max:
max = a
return max
print(max_num_in_list([1, 2, -8, 0]))
OUTPUT
2
Get the smallest number
from a list
PYTHON CODE
def smallest_num_in_list( list ):
min = list[ 0 ]
for a in list:
if a < min:
min = a
return min
print(smallest_num_in_list([1, 2, -8, 0]))
OUTPUT
-8
Remove duplicates
from a list
PROGRAM
a = [10,20,30,20,10,50,60,40,80,50,40]

dup_items = set()
uniq_items = []
for x in a:
if x not in dup_items:
uniq_items.append(x)
dup_items.add(x)

print(dup_items)
Output:
{40, 10, 80, 50, 20, 60, 30}
Clone or copy a list
PYTHON CODE
original_list = [10, 22, 44, 23, 4]
new_list = list(original_list)
print(original_list)
print(new_list)

OUTPUT
[10, 22, 44, 23, 4]                                                                                          
[10, 22, 44, 23, 4]
Difference between the two lists
PYTHON CODE
list1 = [1, 3, 5, 7, 9]
list2=[1, 2, 4, 6, 7, 8]
diff_list1_list2 = list(set(list1) - set(list2))
diff_list2_list1 = list(set(list2) - set(list1))
total_diff = diff_list1_list2 + diff_list2_list1
print(total_diff)

OUTPUT
[9, 3, 5, 8, 2, 4, 6]
Generate all permutations
of a list
PYTHON CODE
import itertools
print(list(itertools.permutations([1,2,3])))
OUTPUT
[(1, 2, 3), (1, 3, 2), (2, 1, 3), (2, 3, 1), (3, 1, 2), (3, 2, 1)]
Find the second smallest
number in a list
PYTHON PROGRAM
def second_smallest(numbers):
if (len(numbers)<2):
return
if ((len(numbers)==2)  and (numbers[0] == numbers[1]) ):
return
dup_items = set()
uniq_items = []
for x in numbers:
if x not in dup_items:
uniq_items.append(x)
dup_items.add(x)
uniq_items.sort()   
return  uniq_items[1]  

print(second_smallest([1, 2, -8, -2, 0, -2]))

print(second_smallest([1, 1, 0, 0, 2, -2, -2]))
print(second_smallest([1, 1, 1, 0, 0, 0, 2, -2, -2]))
print(second_smallest([2,2]))
print(second_smallest([2]))
OUTPUT
-2
0
0
None
None
Get unique values
from a list
Python Code
my_list = [10, 20, 30, 40, 20, 50, 60, 40]
print("Original List : ",my_list)
my_set = set(my_list)
my_new_list = list(my_set)
print("List of unique numbers : ",my_new_list)

OUTPUT
Original List :  [10, 20, 30, 40, 20, 50, 60,
40]                                                            
List of unique numbers :  [40, 10, 50, 20, 60, 30] 
Get the frequency of the elements
Python Code
import collections
my_list = [10,10,10,10,20,20,20,20,40,40,50,50,30]
print("Original List : ",my_list)
ctr = collections.Counter(my_list)
print("Frequency of the elements in the List : ",ctr)
OUTPUT
Original List :  [10, 10, 10, 10, 20, 20, 20, 20, 40, 40, 50, 50,
30]                                        
Frequency of the elements in the List :  Counter({10: 4, 20: 4, 40: 2, 50: 2,
30: 1})
Generate all sublists
of a list in Python
Python Code
from itertools import combinations
def sub_lists(my_list):
subs = []
for i in range(0, len(my_list)+1):
  temp = [list(x) for x in combinations(my_list, i)]
  if len(temp)>0:
    subs.extend(temp)
return subs

l1 = [10, 20, 30, 40]

l2 = ['X', 'Y', 'Z']
print("Original list:")
print(l1)
print("S")
print(sub_lists(l1))
print("Sublists of the said list:")
print(sub_lists(l1))
print("\nOriginal list:")
print(l2)
print("Sublists of the said list:")
print(sub_lists(l2))

OUTPUT
Original list:
[10, 20, 30, 40]
S
[[], [10], [20], [30], [40], [10, 20], [10, 30], [10, 40], [20, 30], [20, 40], [30,
40], [10, 20, 30], [10, 20, 40], [10, 30, 40], [20, 30, 40], [10, 20, 30, 40]]
Sublists of the said list:
[[], [10], [20], [30], [40], [10, 20], [10, 30], [10, 40], [20, 30], [20, 40], [30,
40], [10, 20, 30], [10, 20, 40], [10, 30, 40], [20, 30, 40], [10, 20, 30, 40]]

Original list:
['X', 'Y', 'Z']
Sublists of the said list:
[[], ['X'], ['Y'], ['Z'], ['X', 'Y'], ['X', 'Z'], ['Y', 'Z'], ['X', 'Y', 'Z']]
Find common items
from two lists
Python Code
color1 = "Red", "Green", "Orange", "White"
color2 = "Black", "Green", "White", "Pink"
print(set(color1) & set(color2))

OUTPUT
'Green', 'White'}
Create a list
with infinite elements
Python Code
import itertools
c = itertools.count()
print(next(c))
print(next(c))
print(next(c))
print(next(c))
print(next(c))

OUTPUT
0                                                                                                            
1                                                                                                            
2                                                                                                            
3                                                                                                            
4
Remove consecutive duplicates
of a given list
Python Code
from itertools import groupby
def compress(l_nums):
return [key for key, group in groupby(l_nums)]
n_list = [0, 0, 1, 2, 3, 4, 4, 5, 6, 6, 6, 7, 8, 9, 4, 4 ]
print("Original list:")
print(n_list)
print("\nAfter removing consecutive duplicates:")
print(compress(n_list))

OUTPUT
Original list:
[0, 0, 1, 2, 3, 4, 4, 5, 6, 6, 6, 7, 8, 9, 4, 4]

After removing consecutive duplicates:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 4]
Flatten a nested
list structure
Python Code
def flatten_list(n_list):
result_list = []
if not n_list: return result_list
stack = [list(n_list)]
while stack:
c_num = stack.pop()
next = c_num.pop()
if c_num: stack.append(c_num)
if isinstance(next, list):
if next: stack.append(list(next))
else: result_list.append(next)
result_list.reverse()
return result_list
n_list = [0, 10, [20, 30], 40, 50, [60, 70, 80], [90, 100, 110, 120]]
print("Original list:")
print(n_list)
print("\nFlatten list:")
print(flatten_list(n_list))

OUTPUT
Original list:
[0, 10, [20, 30], 40, 50, [60, 70, 80], [90, 100, 110, 120]]

Flatten list:
[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
 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 );
});