Professional Documents
Culture Documents
Task1 Code
Task1 Code
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('#accept').click(function () {
if ($('#submitbtn').is(':disabled')) {
$('#submitbtn').removeAttr('disabled');
} else {
$('#submitbtn').attr('disabled', 'disabled');
});
});
</script>
</head>
<body>
</body>
</html>
Output:
Task2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
setInterval(blink_text, 1000);
});
</script>
</head>
<body>
</body>
</html>
Output:
Task3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
function Remove_options()
{
$("#myColor")
.empty()
.append('<option selected="selected" value="Test">White</option>
');
}
});
</script>
</head>
<body>
<select id="myColor">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
<input type="button" value="Click to Remove all Options" onclick="Remo
ve_options()">
</body>
</html>
Output:
Task4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass();
});
});
</script>
<style>
.myColor
background-color: sienna;
color: yellow;
</style>
</head>
<body>
<button >Remove</button>
</body>
</html>
Output:
Task5
Code:
<form>
</form>
$(document).keypress(function (e) {
if (e.which == 13) {
});
Output:
Task6
Code:
<form action="demo_form.asp">
</form>
<script>
});
</script>
Output:
Task7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<script>
$(document).ready(function(){
$("#button1").prop('value', 'Save');
});
</script>
</head>
<body>
<input type='button'value='Cancel'id='button1'>
</body>
</html>
Output:
Task8
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Documnetr</title>
<script>
$(document).ready(function(){
$('.numbers').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
});
</script>
</head>
<body>
</body>
</html>
Output:
Task9
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
<script>
$(document).ready(function(){
$('#button1').click(function(){
});
});
</script>
</head>
<body>
<textarea>TutoRIAL</textarea>
<p>jQuery</p>
<span>Exercises</span>
</body>
Output:
Task10
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script>
$(document).ready(function(){
$( demo_form ).hide();
});
});
</script>
</head>
<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>
</html>
Output:
Task11
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h1>abc</h1>
<div>
<h1>div-1</h1>
<h1>div-2</h1>
</div>
<h1>xyz</h1>
</body>
<script>
</script>
</body>
</html>
Output:
Task12
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
<style>
p {
p.dbl {
background: yellow; color: black;
>
</style>
</head>
<body>
</body>
<script>
pdbl.toggleClass("dbl");
});
</script>
</body>
</html>
Output:
Task13
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
</body>
<script>
$( "#field1" ).focus();
</script>
</body>
</html>
Output:
Task14
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<p></p>
</body>
<script>
$('#mysql').click(function(e) { e.preventDefault();
});
</script>
</body>
</html>
Output:
Task15
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">
<title>Document</title>
<script>
$(document).ready(function(){
$("form").submit(function(){ alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
</form>
</body>
</html>
Output: