Task1 Code

Task1
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(){
$('#accept').click(function () {
if ($('#submitbtn').is(':disabled')) {
$('#submitbtn').removeAttr('disabled');
} else {
$('#submitbtn').attr('disabled', 'disabled');
});
});
</script>
</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"/>
<p>jQuery <span class="blink">Exercises</span> and Solution</p>
</body>
</html>
Output:
Task2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
setInterval(blink_text, 1000);
});
</script>
</head>
<body>
<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit"/>
<p>jQuery <span class="blink">Exercises</span> and Solution</p>
</body>
</html>
Output:
Task3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
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>
<script>
$("button").click(function(){
$("h1").removeClass();
});
});
</script>
<style>
.myColor
background-color: sienna;
color: yellow;
</style>
</head>
<body>
<h1 class="myColor" id="myClor">Zeeshan Arshad</h1>
<button >Remove</button>
</body>
</html>
Output:
Task5
Code:
<form>
<input type="text" id="hello"></p>
</form>
$(document).keypress(function (e) {
if (e.which == 13) {
console.log('You pressed enter!'); return

false;
});
Output:
Task6
Code:
<form action="demo_form.asp">
First name: <input type="text" id="name1" name="fname"><br> Last name:

<input type="text" id="name2" name="lname"><br>
<input type="submit" value="Submit">
</form>
<script>
$('#name1').on('input', function () { console.log('New

First name added');
});
</script>
Output:
Task7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script>
$("#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>
<title>Documnetr</title>
<script>
$('.numbers').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
});
</script>
</head>
<body>
<p>Input the Amount: <input type="text" class="numbers" value="" /></p>
</body>
</html>
Output:
Task9
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$('#button1').click(function(){
$("p").add( "span" ).add("textarea").css( "background", "red" );
});
});
</script>
</head>
<body>
<textarea>TutoRIAL</textarea>
<p>jQuery</p>
<span>Exercises</span>
<button id="button1">Click to see the effect</button>
</body>
Output:
Task10
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script>
$( 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>
</form>
</body>
</html>
Output:
Task11
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>abc</h1>
<div>
<h1>div-1</h1>
<h1>div-2</h1>
</div>
<h1>xyz</h1>
</body>
<script>
$( "div > h1 " ).css("background", "#0686c9");
</script>
</body>
</html>
Output:
Task12
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
background: blue; color: white;
p.dbl {
background: yellow; color: black;
>
</style>
</head>
<body>
<p>Double-click here to change the background color.</p>
</body>
<script>
var pdbl = $("p:first"); pdbl.dblclick(function () {
pdbl.toggleClass("dbl");
});
</script>
</body>
</html>
Output:
Task13
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>First Name: <input type="text" id='field1'></p>
<p>Last Name: <input type="password" id='field2'></p>
</body>
<script>
$( "#field1" ).focus();
</script>
</body>
</html>
Output:
Task14
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a id="mysql" href="https://www.w3resource.com/mysql/mysql-tutorials.php">MySQL

Tutorial</a>
<p></p>
<a id="sqlite" href="https://www.w3resource.com/sqlite/">SQLite Tutorial</a>
</body>
<script>
$('#mysql').click(function(e) { e.preventDefault();
});
</script>
</body>
</html>
Output:
Task15
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$("form").submit(function(){ alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input

type="text" name="LastName" value="Mouse"><br>
</form>
</body>
</html>
Output:

Task1 Code

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Task1 Code

Uploaded by

Copyright:

Available Formats

Task1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>

<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit"/>

<p>jQuery <span class="blink">Exercises</span> and Solution</p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit"/>

<p>jQuery <span class="blink">Exercises</span> and Solution</p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h1 class="myColor" id="myClor">Zeeshan Arshad</h1>

<input type="text" id="hello"></p>

console.log('You pressed enter!'); return

First name: <input type="text" id="name1" name="fname"><br> Last name:

<input type="submit" value="Submit">

$('#name1').on('input', function () { console.log('New

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width">

<p>Input the Amount: <input type="text" class="numbers" value="" /></p>

<meta name="viewport" content="width=device-width">

$("p").add( "span" ).add("textarea").css( "background", "red" );

<button id="button1">Click to see the effect</button>

<meta name="viewport" content="width=device-width">

$( "div > h1 " ).css("background", "#0686c9");

<meta name="viewport" content="width=device-width">

background: blue; color: white;

<p>Double-click here to change the background color.</p>

var pdbl = $("p:first"); pdbl.dblclick(function () {

<meta name="viewport" content="width=device-width">

<p>First Name: <input type="text" id='field1'></p>

<p>Last Name: <input type="password" id='field2'></p>

<meta name="viewport" content="width=device-width">

<a id="mysql" href="https://www.w3resource.com/mysql/mysql-tutorials.php">MySQL

<a id="sqlite" href="https://www.w3resource.com/sqlite/">SQLite Tutorial</a>

<meta name="viewport" content="width=device-width">

First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input

<input type="submit" value="Submit">

You might also like