ADVANCED JAVA SCRIPT: JQUERY,AJAX, JSON
PRACTICAL EXPERIMENTS
1. Using jQuery find all text areas, add a border, and make paragraphs' borders red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Borders</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("textarea").css("border", "1px solid black");
$("p").css("border", "1px solid red");
});
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<textarea rows="4" cols="50"></textarea>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</body>
</html>
Output:
Two text areas will have a black border, and two paragraphs will have a red border.
2. Using jQuery add the class "w3r_font_color" and "w3r_background" to the last paragraph
element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Classes</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("p:last").addClass("w3r_font_color w3r_background");
});
</script>
<style>
.w3r_font_color {
color: blue;
}
.w3r_background {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
</body>
</html>
Output:
The last paragraph will have blue text color and yellow background.
3. Using jQuery add a new class to an element that already has a class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Class to Element</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("p").addClass("new_class");
});
</script>
<style>
.new_class {
font-weight: bold;
}
</style>
</head>
<body>
<p class="old_class">This is a paragraph with old_class</p>
<p class="old_class">This is another paragraph with old_class</p>
</body>
</html>
Output:
Both paragraphs will have the new class "new_class" added, making their text bold.
4. Using jQuery insert some HTML after all paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Insert HTML After Paragraphs</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("p").after("<div>Inserted HTML after paragraph</div>");
});
</script>
</head>
<body>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</body>
</html>
Output:
A `<div>` containing "Inserted HTML after paragraph" will be added after each paragraph.
5. Using jQuery insert a DOM element after all paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Insert DOM Element After Paragraphs</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("p").after([Link]("hr"));
});
</script>
</head>
<body>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</body>
</html>
Output:
An `<hr>` element will be added after each paragraph.
6. Convert three headers and content panels into an accordion. Initialize the accordion and specify
the animate option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Accordion</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("#accordion").accordion({
animate: 200
});
});
</script>
<style>
.panel {
display: none;
}
</style>
</head>
<body>
<div id="accordion">
<h3>Header 1</h3>
<div class="panel">
<p>Content 1</p>
</div>
<h3>Header 2</h3>
<div class="panel">
<p>Content 2</p>
</div>
<h3>Header 3</h3>
<div class="panel">
<p>Content 3</p>
</div>
</div>
</body>
</html>
Output:
Three headers with content panels will be displayed as
Here are the jQuery programs for each task along with their outputs:
7. Convert three headers and content panels into an accordion. Initialize the accordion and specify
the height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Accordion with Height</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#accordion").accordion({
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Header 1</h3>
<div>
<p>Content 1</p>
</div>
<h3>Header 2</h3>
<div>
<p>Content 2</p>
</div>
<h3>Header 3</h3>
<div>
<p>Content 3</p>
</div>
</div>
</body>
</html>
Output: Three headers with content panels will be displayed as an accordion with the specified
height.
8. Create a pre-populated list of values and delay in milliseconds between a keystroke occurs and a
search is performed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Autocomplete</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
var availableTags = ["Apple", "Banana", "Orange", "Pineapple", "Mango"];
$("#tags").autocomplete({
source: availableTags,
delay: 500 // milliseconds
});
});
</script>
</head>
<body>
<label for="tags">Tags: </label>
<input id="tags">
</body>
</html>
Output: A text field will appear with autocomplete functionality and a delay of 500 milliseconds
between keystrokes.
9. Initialize the button and specify the disable option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Button Disable</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#button").button({
disabled: true
});
});
</script>
</head>
<body>
<button id="button">Click me</button>
</body>
</html>
Output: The button will appear disabled.
10. Initialize the button and specify an icon on the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Button with Icon</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#button").button({
icon: "ui-icon-search"
});
});
</script>
</head>
<body>
<button id="button">Search</button>
</body>
</html>
Output: The button will appear with a search icon.
11. Initialize the button and do not show the label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Button without Label</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#button").button({
icon: "ui-icon-gear",
showLabel: false
});
});
</script>
</head>
<body>
<button id="button">Settings</button>
</body>
</html>
Output: The button will appear with only the gear icon without any label.
12. Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Datepicker</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText){
$("#selectedDate").val(dateText);
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<input type="text" id="selectedDate" readonly>
</body>
</html>
Output: A datepicker will appear, and when a date is selected, it will be displayed in the text box.
13. Initialize the date picker and specify a text to display for the week of the year column heading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Datepicker with Week Column Text</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$(document).ready(function(){
$("#datepicker").datepicker({
showWeek: true,
weekHeader: "Week"
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Output: A datepicker will appear with the week column heading displaying "Week".