1 Write A Jquery Code To Check Whether Jqueery Is Loaded or Not

Subject Name:-jQuery
Practical Assignment
1 Write a jQuery code to check whether jQueery is loaded or not.

Code for load.html
Code
<!DOCTYPE html>
<html>
<head>
<title>Test if jQuery is loaded</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</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">
<title>Limit character input in the textarea including count</title>
<style type="text/css">
body
background-color:pink}
textarea {
display:block;
margin:1em 0;
}
</style>
</head>
<script>
var maxLength = 15;
$('textarea').keyup(function() {
var a = maxLength - $(this).val().length;
$('#rchars').text(a);
});
</script>
<body>
<form>
<h1>Maximum 15 characters</h1>
<textarea id="textarea" maxlength="15"></textarea>
<span id="rchars">You can enter only15 Character(s) Remaining</span>
</form>
</body>
</html>
Slip 11
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta name="viewport" content="width=device-width">
<title>Select values from a JSON object using jQuery.</title>
<script>
colors = { "color1": "Red", "color2": "Green", 'color3': "Blue" };
$.each(colors, function(key, value) {
$('#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>
<title>Make first word bold of all elements</title>

</head>
<script>
$('p').each(function()
{ var $p = $(this);$p.html($p.html().replace(/^(\w+)/, '<strong>$1</strong>')); });
</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>
<title>Move one DIV element inside another.</title>
</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">

<button id="btnDefault" onclick="moveButton(this)" type="button">Button1</button>
<button id="btnPrimary" onclick="moveButton(this)" type="button">Button2</button>
<button id="btnDanger" onclick="moveButton(this)" type="button">Button3</button>
</div>
<div id="selected">
</div>
</body>
</html>
Output
12
Slip 14
<!DOCTYPE html>
<html>
<head>
<title>ADD elements in unorderd list</title>
<style>
p span{
text-decoration: underline;
</style>
<script>
$('#b1').click(function(){
$( "input" ).keyup(function() {
var tvalue = $( this ).val();
alert(tvalue);
})
.keyup();
});
});
</script>
</head>
<body>
<input type="text">
<button id=b1>click here</button>
</body>
</html>
Slip 14output
Slip no 16
<!DOCTYPE html>
<html>
<head>
<title>Underline all words of a text through jQuery</title>
<style>
p span{
</style>
<script>
$('p').each(function() {
var text_words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < text_words.length; i++) {
if (i === 0) {
$(this).append('<span>' + text_words[i] + '</span>');
} else {
$(this).append(' <span>' + text_words[i] + '</span>');
}
});
});
});
</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>
<title>Underline all words of a text through jQuery</title>
<style>
p span{
</style>
<script>
$('#b1').click(function(){
$( "input" ).keyup(function() {
var tvalue = $( this ).val();
alert(tvalue);
})
.keyup();
});
});
</script>
</head>
<body>
<input type="text">
<button id=b1>click here</button>
</body>
</html>
Slip 18
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
#divId {
padding: 100px;
border: 3px solid red;
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:
$('#divId').html('Middle Mouse button pressed.');
break;
case 3:
$('#divId').html('Right Mouse button pressed.');
break;
default:
$('#divId').html('You have a strange Mouse!');
});
</script>
</body>
</html>
Output18
Slip 20
<!DOCTYPE html>
<html>
<head>
<title>Detect pressing Enter key on keyboard using jQuery.</title>
</head>
<script>
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
});
</script>
<body>
<p>Input a value within the textbox and press Enter</p>
<form>
<input type="text" id="hello"></p>
</form>
</body>
</html>
Output 20
Slip 21
<!DOCTYPE html>
<html>
<head>
<title>Count number of rows and columns in a table using jQuery.</title>
</head>
<script>
$.fn.rowCount = function() {
return $('tr', $(this).find('tbody')).length;
};
$.fn.columnCount = function() {
return $('th', $(this).find('tbody')).length;
};
var
rowctr = $('#table1').rowCount();
var colctr = $('#table1').columnCount();
alert('No of Rows:'+rowctr);
alert('No of Columns:'+colctr);
});
</script>
<body>
<table id="table1" border="2">
<tr>
<th>Tools</th>
<th>Description</th>
</tr>
<tr>
<td>Angularjs</td>
<td>open source Free, Web based </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>
<td>web base </td>
</tr>
<tr>
<td> Navicat </td>

<td>Third party, Commercial </td>
</tr>
<tr>
<td>Maatkit</td>
<td>Third party, Command line, free </td>
</tr>
<tr>
<td>MySQL Sandbox</td>
<td>Third party, Command line, free</td>
</tr>
<tr>
<td>SQLBuddy </td>
<td> A free Web-based front end, developed in PHP.</td>
</tr>
<tr>
<td>SQLyog </td>
<td>Commercial, but a free 'community' edition is available.</td>
</tr>
<tr>
<td>Toad for MySQL </td>
<td>Third party, free from Quest Software</td>
</tr>
</table>
</body>
</html>
Output 20
<!DOCTYPE html>
<html>
<head>
<title>Remove a specific value from an array using jQuery.</title>
</head>
<script>
var arr = ["jQuery","JavaScript","HTML","Ajax","Css"];
$('span').html('Array Items before removal:<b> ' + arr + '</b>');
arr.splice(1,2);
$('p').html('Array Items after removal:<b> ' + arr + '</b>');
});
</script>
<body>
<span> Array Items before removal </span>
<br/><br/>
<p></p>
</body>
</html>
Slip 25
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Change Button Text</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#b1").click(function(){
$("#myInput").prop("value", "Input New Text");
// Change text of button element
$("#myButton").html("Button New Text");
});
});
</script>
</head>
<body>
<input type="button" id="myInput" value="Input Text">
<button type="button" id="myButton">Button Text</button>
<button type="button" id="b1">click here to chane</button>
</body>
</html>
Slip no 27
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Setting background-image CSS Property</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Set background image of a div on click of the button
$("button").click(function(){
var imageUrl = "b.jpg";
$("body").css("background-image", "url(" + imageUrl + ")");
});
});
</script>
</head>
<body>
<div class="box"></div>
<p><button type="button">Set Background Image</button></p>
</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">
<option id="op1" value="AngularJs">AngularJs</option>
<option id="op2" value="Nodejs">Nodejs</option>
<option id="op3" value="JQuery">JQuery</option>
<option id="op4" value="Mongodb">Mongodb</option>
</select>
<input id="button1" type="button" value="Click!" />
</body>
<script>
$('#button1').click(function(){
alert($('#op2').val());
alert($('#op4').val());
alert($('#s1').html());
});
});
</script>
</html>
slip29.
<!DOCTYPE html>
<html>
<head>
<title>Disable a link using jQuery</title>
</head>
<script>
$('#button1').click(function(){
$("a").removeAttr('href');
});
});
</script>
<body>
<a href="https://www.atcbhor.com">Anantrao Thopte College Bhor</a>
<p></p>
<input id="button1" type="button" value="Click to remove the link!" />
</body>
</html>
Slip 30
<!DOCTYPE html>
<html>
<head>
<title>Restrict number only input for textboxes including decimal points.</title>

</head>
<body>
<p>Input the Amount:
<input type="text" class="numbers" value="" /></p>
</body>
<script>
$('.numbers').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
</script>
</html>
Output 30

1 Write A Jquery Code To Check Whether Jqueery Is Loaded or Not

Uploaded by

Document Information

Original Description:

Original Title

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

1 Write A Jquery Code To Check Whether Jqueery Is Loaded or Not

Uploaded by

Copyright:

Available Formats

Subject Name:-jQuery

1 Write a jQuery code to check whether jQueery is loaded or not.

<title>Test if jQuery is loaded</title>

<title>Limit character input in the textarea including count</title>

var maxLength = 15;

var a = maxLength - $(this).val().length;

<textarea id="textarea" maxlength="15"></textarea>

<span id="rchars">You can enter only15 Character(s) Remaining</span>

<meta name="viewport" content="width=device-width">

<title>Select values from a JSON object using jQuery.</title>

colors = { "color1": "Red", "color2": "Green", 'color3': "Blue" };

$.each(colors, function(key, value) {

<title>Make first word bold of all elements</title>

{ var $p = $(this);$p.html($p.html().replace(/^(\w+)/, '<strong>$1</strong>')); });

<meta name="viewport" content="width=device-width">

<title>Move one DIV element inside another.</title>

<button id="btnDefault" onclick="moveButton(this)" type="button">Button1</button>

<button id="btnPrimary" onclick="moveButton(this)" type="button">Button2</button>

<button id="btnDanger" onclick="moveButton(this)" type="button">Button3</button>

<title>ADD elements in unorderd list</title>

<button id=b1>click here</button>

<title>Underline all words of a text through jQuery</title>

var text_words = $(this).text().split(' ');

for (i = 0; i < text_words.length; i++) {

$(this).append('<span>' + text_words[i] + '</span>');

$(this).append(' <span>' + text_words[i] + '</span>');

<title>Underline all words of a text through jQuery</title>

var tvalue = $( this ).val();

<button id=b1>click here</button>

<title>Title of the document</title>

border: 3px solid red;

$('#divId').html('Middle Mouse button pressed.');

$('#divId').html('Right Mouse button pressed.');

$('#divId').html('You have a strange Mouse!');

<meta name="viewport" content="width=device-width">

<title>Detect pressing Enter key on keyboard using jQuery.</title>

alert('You pressed enter!');

<p>Input a value within the textbox and press Enter</p>

<input type="text" id="hello"></p>

<meta name="viewport" content="width=device-width">

<title>Count number of rows and columns in a table using jQuery.</title>

return $('tr', $(this).find('tbody')).length;

return $('th', $(this).find('tbody')).length;

var colctr = $('#table1').columnCount();

<table id="table1" border="2">

<td>open source Free, Web based </td>

<td>web base </td>

<td> Navicat </td>

<td>Third party, Command line, free </td>

<td>Third party, Command line, free</td>

<td> A free Web-based front end, developed in PHP.</td>

<td>Commercial, but a free 'community' edition is available.</td>

<td>Toad for MySQL </td>

<td>Third party, free from Quest Software</td>

<meta name="viewport" content="width=device-width">

<title>Remove a specific value from an array using jQuery.</title>

var arr = ["jQuery","JavaScript","HTML","Ajax","Css"];

$('span').html('Array Items before removal:<b> ' + arr + '</b>');

<span> Array Items before removal </span>

<title>jQuery Change Button Text</title>

$("#myInput").prop("value", "Input New Text");