Scribd
Upload
267 views

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

The document contains examples of jQuery code to perform various tasks like checking if jQuery is loaded, scrolling a webpage, disabling right click menus, fixing broken images, blinking text, limiting character input in a textarea, selecting values from a JSON object, making the first word of elements bold, moving div elements between containers, detecting keyboard entry, counting rows and columns in a table, removing values from an array, and changing button text. The document provides jQuery code snippets and explanations for completing different assignments and exercises related to jQuery.

Uploaded by

himalaya atram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
267 views

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

The document contains examples of jQuery code to perform various tasks like checking if jQuery is loaded, scrolling a webpage, disabling right click menus, fixing broken images, blinking text, limiting character input in a textarea, selecting values from a JSON object, making the first word of elements bold, moving div elements between containers, detecting keyboard entry, counting rows and columns in a table, removing values from an array, and changing button text. The document provides jQuery code snippets and explanations for completing different assignments and exercises related to jQuery.

Uploaded by

himalaya atram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

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 charset="utf-8">

<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>

<meta charset="utf-8">

<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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<meta charset="utf-8">

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

<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">

<!--Declaring BUTTON TAGS -->

<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>

<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">

<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>

<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() {

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>

<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">

<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>

<script src="https://code.jquery.com/jquery-git.js"></script>

<meta charset="utf-8">

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

<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>

<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">

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

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

</head>

<script>

$(document).ready(function(){

$.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>

<script src="https://code.jquery.com/jquery-git.js"></script>

<meta charset="utf-8">

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

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

</head>

<script>

$(document).ready(function(){

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>

$(document).ready(function(){

$("#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>

$(document).ready(function(){

// 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>

$(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>

<title>Disable a link using jQuery</title>

</head>

<script>

$(document).ready(function(){

$('#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>

<script src="https://code.jquery.com/jquery-git.js"></script>

<meta charset="utf-8">

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

<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

You might also like