Scribd
Upload
60 views

Task1 Code

The document contains 15 coding tasks related to jQuery. Each task contains HTML, CSS, and jQuery code to demonstrate different jQuery features such as event handling, DOM manipulation, and AJAX functionality. The output for each task is not displayed.

Uploaded by

Saad Mehmood
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
60 views

Task1 Code

The document contains 15 coding tasks related to jQuery. Each task contains HTML, CSS, and jQuery code to demonstrate different jQuery features such as event handling, DOM manipulation, and AJAX functionality. The output for each task is not displayed.

Uploaded by

Saad Mehmood
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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>

<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 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>
    <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">

<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(){

$("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>

<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(){

$("#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">

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

<title>Documnetr</title>

<script>
$(document).ready(function(){

$('.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 src="jquery-3.4.1.min.js"></script>

<meta charset="utf-8">

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

<title>Document</title>

<script>

$(document).ready(function(){

$('#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>
<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">

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

<title>Document</title>

</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>

<script src="jquery-3.4.1.min.js"></script>

<meta charset="utf-8">

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

<title>Document</title>

<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>

<script src="jquery-3.4.1.min.js"></script>
<meta charset="utf-8">

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

<title>Document</title>

</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>
<script src="jquery-3.4.1.min.js"></script>

<meta charset="utf-8">

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

<title>Document</title>

</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 src="jquery-3.4.1.min.js"></script>

<meta charset="utf-8">

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

<title>Document</title>

<script>

$(document).ready(function(){

$("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>

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

</form>

</body>

</html>

Output:

You might also like