Professional Documents
Culture Documents
1 Write A Jquery Code To Check Whether Jqueery Is Loaded or Not
1 Write A Jquery Code To Check Whether Jqueery Is Loaded or Not
Practical Assignment
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button>Click me!<button>
<script>
$(document).ready(function(){
$('button').click(function(){
alert('Jquery is loaded');
});
});
</script>
</body>
</html>
Output:
2 Write a jQuery code to check whether jQuery code to scroll web
page from bottom and vice versa.
Output:
3. Write jQuery code to disable right click menu in html page
Output:
Output
Write jQuery code to Fix broken images automatically
Output
5 Write jQuery code to Blink text
Output:
6 Write jQuery code to Blink text
Slip no 9
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<style type="text/css">
body
background-color:pink}
textarea {
display:block;
margin:1em 0;
}
</style>
</head>
<script>
$('textarea').keyup(function() {
$('#rchars').text(a);
});
</script>
<body>
<form>
<h1>Maximum 15 characters</h1>
</form>
</body>
</html>
Slip 11
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<script>
$('#divSelect').append($("<option/>", {
value: key,
text: value
}));
});
</script>
</head>
<body>
<div id="divSelect"></div>
</body>
Slip 10
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<script>
$('p').each(function()
</script>
<body>
<p>PHP Exercises</p>
<p>Python Exercises</p>
<p>JavaScript Exercises</p>
<p>jQuery Exercises</p>
</body>
</html>
Slip 12
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<script>
function moveButton(elem){
if( $(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().appendTo('#selected');
else{
$(elem).detach().appendTo('#nonSelected');
</script>
<body>
<div id="nonSelected">
</div>
<div id="selected">
</div>
</body>
</html>
Output
12
Slip 14
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p span{
text-decoration: underline;
</style>
<script>
$(document).ready(function(){
$('#b1').click(function(){
$( "input" ).keyup(function() {
var tvalue = $( this ).val();
alert(tvalue);
})
.keyup();
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
Slip 14output
Slip no 16
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p span{
text-decoration: underline;
</style>
<script>
$(document).ready(function(){
$('p').each(function() {
$(this).empty().html(function() {
if (i === 0) {
} else {
}
});
});
});
</script>
</head>
<body>
<p style=color:red;font-size:30px>This is Slip no 16 Underline all the words of a text using jQuery.</p>
</body>
</html>
Out put:
Slip no 17
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p span{
text-decoration: underline;
</style>
<script>
$(document).ready(function(){
$('#b1').click(function(){
$( "input" ).keyup(function() {
alert(tvalue);
})
.keyup();
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
Slip 18
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
#divId {
padding: 100px;
font-size: 30px;
text-align: center;
</style>
</head>
<body>
<div id="divId">
[Click here]
</div>
<script>
$('#divId').mousedown(function(event) {
switch(event.which) {
case 1:
$('#divId').html('Left Mouse button pressed.');
break;
case 2:
break;
case 3:
break;
default:
});
</script>
</body>
</html>
Output18
Slip 20
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
</head>
<script>
$(document).keypress(function(e) {
if(e.which == 13) {
});
</script>
<body>
<form>
</form>
</body>
</html>
Output 20
Slip 21
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
</head>
<script>
$(document).ready(function(){
$.fn.rowCount = function() {
};
$.fn.columnCount = function() {
};
var
rowctr = $('#table1').rowCount();
alert('No of Rows:'+rowctr);
alert('No of Columns:'+colctr);
});
</script>
<body>
<tr>
<th>Tools</th>
<th>Description</th>
</tr>
<tr>
<td>Angularjs</td>
</tr>
<tr>
<td>MySQL</td>
<td>database </td>
</tr>
<tr>
<td>Nodejsr</td>
<td>Server side</td>
</tr>
<tr>
<td>jQuery </td>
<td>front end</td>
</tr>
<tr>
<td>Express</td>
</tr>
<tr>
</tr>
<tr>
<td>Maatkit</td>
</tr>
<tr>
<td>MySQL Sandbox</td>
</tr>
<tr>
<td>SQLBuddy </td>
</tr>
<tr>
<td>SQLyog </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output 20
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
</head>
<script>
$(document).ready(function(){
arr.splice(1,2);
$('p').html('Array Items after removal:<b> ' + arr + '</b>');
});
</script>
<body>
<br/><br/>
<p></p>
</body>
</html>
Slip 25
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
});
});
</script>
</head>
<body>
</body>
</html>
Slip no 27
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
});
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output 27
Slip 28
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<title>How to get the selected value and currently selected text of a dropdown box using
jQuery?</title>
</head>
<body>
<select id="s1">
</select>
</body>
<script>
$(document).ready(function(){
$('#button1').click(function(){
alert($('#op2').val());
alert($('#op4').val());
alert($('#s1').html());
});
});
</script>
</html>
slip29.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#button1').click(function(){
$("a").removeAttr('href');
});
});
</script>
<body>
<p></p>
</body>
</html>
Slip 30
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<body>
</body>
<script>
$('.numbers').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
</script>
</html>
Output 30