Gallery
Share
Explore

Student Lab Workbook: JavaScript jQuery API with Examples

Learning Outcome:
The JavaScript jQuery API with 3 examples - simple and fully detailed. Show buttons and fields on the HTML page and apply CSS under jQuery Control - change images and page colors
Introduction:
In this Student Lab Workbook, you will learn how to utilize the JavaScript jQuery API to create interactive elements on your web page. We will cover three examples that demonstrate the use of buttons, fields, and dynamic content, such as changing images and page colors.
Example 1: Changing Page Colors with a Button
HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Change Page Color</h1>
<button id="changeColorBtn">Change Page Color</button>
<script src="example1.js"></script>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
}
button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
font-size: 16px;
}

JavaScript (example1.js):

$("#changeColorBtn").click(function () {
var colors = ["#FFC107", "#8BC34A", "#9C27B0"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
$("body").css("background-color", randomColor);
});

Example 2: Updating Text Input Field with a Button

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Update Text Input Field</h1>
<input type="text" id="textInput">
<button id="updateTextBtn">Update Text</button>
<script src="example2.js"></script>
</body>
</html>
CSS:
css
Copy code
body {
font-family: Arial, sans-serif;
}
input, button {
margin: 5px;
}
button {
background-color: #2196F3;
color: white;
padding: 10px 20px;
font-size: 14px;
}
JavaScript (example2.js):
javascript
Copy code
$("#updateTextBtn").click(function () {
var newText = "New Text Content";
$("#textInput").val(newText);
});

Example 3: Changing Images with a Button

HTML:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Change Image</h1>
<img src="image1.jpg" id="imageDisplay" width="300" height="200">
<button id="changeImageBtn">Change Image</button>
<script src="example3.js"></script>
</body>
</html>
CSS:
css
Copy code
body {
font-family: Arial, sans-serif;
}
img, button {
margin: 5px;
}
button {
background-color: #f44336;
color: white;
padding: 10px 20px;
font-size: 14px;
}
JavaScript (example3.js):
javascript
Copy code
$("#changeImageBtn").click(function () {
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImage = $("#imageDisplay").attr("src");
var nextIndex = (images.indexOf(currentImage) + 1) % images.length;
$("#imageDisplay").attr("src", images[nextIndex]);
});
Conclusion:
In this Student Lab Workbook, you learned how to use the JavaScript jQuery API to create dynamic and interactive elements on a web page. The three examples covered changing page colors, updating text input fields, and changing images with a button. You also saw how to apply CSS styling under jQuery control. Keep practicing and exploring the capabilities of jQuery to enhance your web development skills.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.