0% found this document useful (0 votes)
32 views

J Query Programs

Bcgl456 lab manual 2

Uploaded by

l70669985
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
32 views

J Query Programs

Bcgl456 lab manual 2

Uploaded by

l70669985
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

<!

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>
$(document).ready(function(){
// 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>
$(document).ready(function(){
$("#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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
$(document).ready(function(){
$('#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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
$(document).ready(function(){
$('#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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</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>
$(document).ready(function(){
$('#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>

You might also like