J query programs

<!
DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Disable form
$("#disableFormBtn").click(function(){
$("form :input").prop("disabled", true);
});
// Enable form
$("#enableFormBtn").click(function(){
$("form :input").prop("disabled", false);
});
// Disable right-click menu
$(document).on("contextmenu",function(e){
e.preventDefault();// this will chanfe default behaviour
});
});
</script>
</head>
<body>
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<br/>
<button id="disableFormBtn">Disable Form</button>
<button id="enableFormBtn">Enable Form</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>LAB-1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// Underline all words and bold first word
$("p").each(function(){
var text = $(this).text().split(" ");
for(var i=0; i<text.length; i++){
if (i === 0) {
text[i] = "<b>" + text[i] + "</b>"; // Bold first word
}
text[i] = "<u>" + text[i] + "</u>"; // Underline all words
}
$(this).html(text.join(" "));
});
});
</script>
</head>
<body>
<p>This is a sample paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Add Options to Dropdown List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#addBtn").click(function(){
var optionText = $("#optionText").val();
$("#dropdownList").append(`<option>${optionText}</option>`);
$("#addBtn").text("Item Added ");
});
});
</script>
</head>
<body>
<h2>Add Options to Dropdown List</h2>
<label for="optionText">Option Text:</label>
<input type="text" id="optionText"><br><br>
<button id="addBtn">Add Item</button><br><br>
<select id="dropdownList">
<option value="1">Item</option>
</select>
</body>
</html>
9a
<!DOCTYPE html>
<html>
<head>
<title>Disable Link</title>
<script>
$("#disableLinkBtn").click(function(){
$("#disableLink").off("click"); // Remove the click event handler from the link
$("#disableLink").removeAttr("href"); // Remove the href attribute to disable the link
alert("Link is disabled!");
});
});
</script>
</head>
<body>
<h2>Disable Link</h2>
<a href="https://www.example.com" id="disableLink">Click me to disable</a>
<button id="disableLinkBtn">Disable Link</button><br><br>
</body>
</html>
9b
<!DOCTYPE html>
<html>
<head>
<title>Delete Table Rows Except First</title>
<script>
$("#deleteRowsBtn").click(function(){
$("#myTable tr:not(:first-child)").remove();
});
});
</script>
</head>
<body>
<h2>Delete Table Rows Except First</h2>
<table id="myTable" border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
<tr>
<td>Jim</td>
<td>35</td>
</tr>
</table>
<br>
<button id="deleteRowsBtn">Delete Rows Except First</button>
</body>
</html>
10
<!DOCTYPE html>
<html>
<head>
<title>LAB-10</title>
<style>
.original {
color: blue;
font-weight: bold;
}
.changed {
color: red;
font-style: italic;
}
#myDiv {
width: 500px;
height: 100px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDiv">
<p id="text" class="original">This is a paragraph Where class changes will be appear.</p>
</div>
<br/>
<button id="changeClass">Change Class</button>
<script>
$('#changeClass').click(function(){
$('#text').removeClass('original').addClass('changed');
$('#myDiv').css('background-color', 'lightgreen');
});
});
</script>
</body>
</html>
11
<!DOCTYPE html>
<html>
<head>
<title>Add Multiple Classes with jQuery</title>
<style>
.class1 {
color: blue;
}
.class2 {
font-weight: bold;
}
.new {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br/>
<button id="addClasses">Add Classes</button>
<br/><br/>
<button id="addNewClasses">Add new Classes</button>
<input type="text" id="newClass" placeholder="Enter a class name">
<script>
$('#addClasses').click(function(){
$('#myDiv').addClass('class1').addClass('class2');
});
$('#addNewClasses').click(function(){
var newClass = $('#newClass').val();
if(newClass){
$('#myDiv').addClass(newClass);
$('#newClass').val('');
} else {
alert('Please enter a class name.');
}
});
});
</script>
</body>
</html>
12
<!DOCTYPE html>
<html>
<head>
<title>Read and Display Textbox and Dropdown Values</title>
</head>
<body>
<input type="text" id="textBox" placeholder="Enter text">
<br> <br> <br>
<select id="dropdown">
<option value="1">Select</option>
<option value="2">CSE</option>
<option value="3">ISE</option>
<option value="4">AIML</option>
<option value="5">EC</option>
</select>
<br>
<br><br>
<button id="animateButton">Animate</button>
<p id="output"></p>
<script>
$('#textBox').keyup(function(){
var textBoxValue = $(this).val();
$('#output').text('Text entered: ' + textBoxValue);
});
$('#dropdown').change(function(){
var dropdownValue = $(this).val();
var selectedOptionText = $(this).find('option:selected').text();
$('#output').append('<br>Option chosen: ' + selectedOptionText );
});
//Animate paragraph
$('#animateButton').click(function(){
$('#output').animate({
fontSize: '24px',
color: 'red'
}, 1000); // Animation duration in milliseconds (1000ms = 1s)
$('#output').css('color', 'red');
});
});
</script>
</body>
</html>

J query programs

Uploaded by

Document Information

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

J query programs

Uploaded by

Copyright:

Available Formats

<!

// Disable right-click menu

You might also like