Scribd
Upload
4 views

JQUERY PRACTICALS

The document provides a series of jQuery demos showcasing various functionalities such as using ID, class, and tag selectors, as well as handling events like click and mouseover. It includes examples for creating a multiplication table, changing background colors, and implementing fade effects on images. Each demo is structured with HTML and jQuery code snippets to illustrate the concepts effectively.

Uploaded by

jaydeepleuva2007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

JQUERY PRACTICALS

The document provides a series of jQuery demos showcasing various functionalities such as using ID, class, and tag selectors, as well as handling events like click and mouseover. It includes examples for creating a multiplication table, changing background colors, and implementing fade effects on images. Each demo is structured with HTML and jQuery code snippets to illustrate the concepts effectively.

Uploaded by

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

‭ NIT-1‬

U
‭jQuery SYLLABUS DEMOS‬
‭ OOGLE CDN LINK:‬
G
‭<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>jquery demo</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭alert("jQuery via CDN is working!");‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭<!--14-A. Write a JQuery to show the use of ID-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>jquery id demo</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function()‬
‭{‬
‭$("button").click(function()‬
‭{‬
‭$("#a").hide();‬
‭});‬
‭});‬

‭</script>‬
‭ /head>‬
<
‭<body>‬
‭<h1>jquery using id selector</h1>‬
‭<p> this is a demo lecture </p>‬
‭<p id="a"> this line will hide </p>‬
‭<p id="a"> this line will be hide when button clicked </p>‬
‭<h1> This Line will not hide </h1>‬
‭<p> this is a demo lecture </p>‬
‭<h1> This Is example </h1>‬
‭<button> click here to hide </button>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭<!--14-B. Write a JQuery to show the use of Class selector.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> jquery class selector</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function()‬
‭{‬
‭$("button").click(function()‬
‭{‬
‭$(".a").hide();‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<h1> Jquery using class selector </h1>‬
‭<p> this is a demo lecture </p>‬
‭<p class="a"> this line will hide </p>‬
‭<p class="a"> this line will be hide when button clicked </p>‬
‭<h1> This Line will not hide </h1>‬
‭<p class="a"> this is a demo lecture </p>‬
‭<h1> This Is example </h1>‬
‭<button> click here to hide </button>‬
‭ /body>‬
<
‭</html>‬

‭_______________________________________‬
‭<!--14-C. Write a JQuery to show the use of Tag selector.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> Jquery using tag selector</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭$("button").click(function(){‬
‭$("p").hide();‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<h1> Jquery using tag selector </h1>‬
‭<h2>This is a heading</h2>‬
‭<p>This is a paragraph.</p>‬
‭<p>This is another paragraph.</p>‬
‭<button>Click here to hide</button>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--15. Write a JQuery to show the use of First, Last and eq selector.-->‬
<
‭<!DOCTYPE html>‬
‭<html>‬
‭<head>‬
‭<title> First, Last and eq selector</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function()‬
‭{‬
‭$("button").click(function()‬
‭{‬
$‭ ("p:first").hide();‬
‭$("p:last").hide();‬
‭$("p:eq(1)").css("background-color","red");‬
‭});‬
}‭ );‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<h1>Use of First, Last and eq selector</h1>‬
‭<p> This is first Line </p>‬
‭<p> This is second Line </p>‬
‭<p> This is third Line </p>‬
‭<p> This is fourth Line </p>‬
‭<p> This is fifth Line </p>‬
‭<button> click here </button>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--16.‬ ‭Write‬ ‭a‬ ‭jQuery‬ ‭for‬ ‭table‬ ‭where‬ ‭odd‬‭no‬‭of‬‭rows‬‭must‬‭be‬‭with‬‭background‬‭color‬‭in‬
<
‭Blue‬ ‭and‬ ‭Even‬ ‭no‬ ‭of‬ ‭rows‬ ‭in‬ ‭Pink‬ ‭color‬ ‭while‬ ‭move‬ ‭mouse‬ ‭on‬ ‭table‬ ‭row‬ ‭it‬ ‭will‬ ‭change‬
‭background color green.-->‬
‭<!DOCTYPE html>‬
‭<html>‬
‭<head>‬
‭<title> demo 16 - mouse over and mouse out demo</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function()‬
‭{‬
‭$("tr:even").css("background-color","pink");‬
‭$("tr:odd").css("background-color","lightblue");‬
‭$("tr").mouseover(function()‬
‭{‬
‭$(this).css("background-color","lightgreen");‬
‭});‬
‭$("tr").mouseout(function()‬
‭{‬
‭$(this).css("background-color","red");‬
‭});‬
‭});‬
‭ /script>‬
<
‭</head>‬
‭<body>‬
‭<h1> student details </h1>‬

‭ table border="2" cellspacing="5" cellpadding="7">‬


<
‭<tr>‬
‭<th> roll no </th>‬
‭<th> name </th>‬
‭</tr>‬
‭<tr>‬
‭<td> 4001 </td>‬
‭<td> binita </td>‬
‭</tr>‬
‭<tr>‬
‭<td> 4002 </td>‬
‭<td> saumya </td>‬
‭</tr>‬
‭<tr>‬
‭<td> 4003 </td>‬
‭<td> dhruvi </td>‬
‭</tr>‬
‭<tr>‬
‭<td> 4004 </td>‬
‭<td> twisha </td>‬
‭</tr>‬
‭<tr>‬
‭<td> 4005 </td>‬
‭<td> jinal </td>‬
‭</tr>‬
‭</table>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--17.Write‬ ‭jQuery‬ ‭for‬ ‭paragraph‬ ‭hide‬ ‭and‬ ‭show‬ ‭when‬ ‭click‬ ‭on‬ ‭title‬ ‭of‬ ‭paragraph‬ ‭that‬
<
‭paragraph only show rest of paragraphs will hide make 4 paragraphs with title.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭ head>‬
<
‭<title> demo 17 - paragraph hide and show</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function() {‬
‭$(".title").click(function(){‬
‭$(".paragraph").hide(); // Hide all paragraphs‬
‭$(this).next(".paragraph").toggle(); // Show only the clicked paragraph‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬

‭ h3 class="title">Title 1</h3>‬
<
‭<p class="paragraph">This is Paragraph 1 content.</p>‬

‭ h3 class="title">Title 2</h3>‬
<
‭<p class="paragraph">This is Paragraph 2 content.</p>‬

‭ h3 class="title">Title 3</h3>‬
<
‭<p class="paragraph">This is Paragraph 3 content.</p>‬

‭ h3 class="title">Title 4</h3>‬
<
‭<p class="paragraph">This is Paragraph 4 content.</p>‬

‭ /body>‬
<
‭</html>‬

‭_______________________________________‬
‭ !--18.Write‬‭a‬‭JQuery‬‭to‬‭print‬‭a‬‭multiplication‬‭table‬‭to‬‭get‬‭data‬‭from‬‭the‬‭user‬‭and‬‭must‬‭be‬
<
‭numeric data. Also not allow less than 1 value as input.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 18</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
$‭ ("button").click(function(){‬
‭var n=$("#num").val();‬
‭if(n!=0)‬
‭{‬
‭for($i=1; $i<=10; $i++)‬
‭{‬
‭var tbl=n*$i;‬
‭var t=$("#output").append("<tr><td>"+n+"*"+$i+"="+tbl+"</td></tr><br>");‬
‭}‬
‭}‬
‭else‬
‭alert("Invalid Output");‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<table id="output">‬
‭<tr>‬
‭<td>‬
‭<h1>Multiplication Table</h1>‬
‭</td>‬
‭</tr>‬
‭<tr><td>‬
‭<input type="text" id="num">‬
‭<button>Click to See Table</button>‬
‭</td>‬
‭</tr>‬
‭</table>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--19.‬ ‭Write‬ ‭a‬ ‭jQuery‬ ‭for‬ ‭change‬ ‭the‬ ‭background‬ ‭color‬ ‭of‬ ‭web‬ ‭page,‬ ‭select‬ ‭background‬
<
‭color from dropdown list.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 19</title>‬
‭ script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
<
‭<script>‬
‭$(document).ready(function(){‬
‭$("#1").change(function(){‬
‭var clr=document.getElementById("1").value;‬
‭$("body").css("background-color",clr);‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<select id="1">‬
‭<option value="blue">blue</option>‬
‭<option value="green">green</option>‬
‭<option value="silver">silver</option>‬
‭<option value="teal">teal</option>‬
‭<option value="red">red</option>‬
‭<option value="white">white</option>‬
‭<option value="maroon">maroon</option>‬
‭<option value="yellow">yellow</option>‬
‭</select>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--20.‬ ‭Write‬ ‭a‬ ‭jQuery‬ ‭to‬ ‭show‬‭the‬‭fade‬‭effect‬‭on‬‭image‬‭while‬‭user‬‭click‬‭on‬‭fade‬‭in‬‭image‬
<
‭will show and while click on fade out image will hide.-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>fade in and out image</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function()‬
‭{‬
‭$("#b1").click(function()‬
‭{‬
‭$("#1").fadeIn();‬
‭});‬
$‭ ("#b2").click(function(){‬
‭$("#1").fadeOut();‬

‭});‬
}‭ );‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<button id="b1">FADE IN </button>‬
‭<button id="b2">FADE OUT </button>‬
‭<div>‬
‭<div id="1" style="display:none;">‬
‭<img src="wallpaper.jpg" height="auto" width="900"></img> &nbsp;&nbsp;&nbsp;‬
‭</div>‬
‭</div>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--21.Write‬‭a‬‭jQuery‬‭to‬‭create‬‭a‬‭dropdown‬‭Menu‬‭on‬‭the‬‭following‬‭list.‬‭While‬‭user‬‭click‬‭on‬
<
‭SEM1 then SEM1 list only display SEM2 list should not visible‬

‭I. SEM1‬
‭a. C‬
‭b. HTML‬
‭c. ICET‬
‭d. MATHS‬
‭II. SEM2‬
‭a. ADV.C‬
‭b. DHTML‬
‭c. CN‬
‭-->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 21</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
$‭ (document).ready(function(){‬
‭$('#menu1').click(function() {‬
‭$('#submenu1').slideToggle(); // Toggle the visibility of Submenu 1‬
‭$('#submenu2').slideUp(); // Hide Submenu 2‬
‭});‬

‭$('#menu2').click(function() {‬
‭$('#submenu2').slideToggle(); // Toggle the visibility of Submenu 2‬
‭$('#submenu1').slideUp(); // Hide Submenu 1‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<ol type="I">‬
‭<li id="menu1">SEM1</li>‬
‭<ol type="a" id="submenu1">‬
‭<li>C</li>‬
‭<li>HTML</li>‬
‭<li>ICET</li>‬
‭<li>MATHS</li>‬
‭</ol>‬
‭<li id="menu2">SEM2</li>‬
‭<ol type="a" id="submenu2">‬
‭<li>ADV.C</li>‬
‭<li>DHTML</li>‬
‭<li>CN</li>‬
‭</ol>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--‬‭22.Write‬‭a‬‭jQuery‬‭to‬‭get‬‭the‬‭value‬‭from‬‭checkbox‬‭and‬‭display‬‭on‬‭screen‬‭only‬‭selected‬
<
‭values -->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 22</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭$("button").click(function(){‬
‭alert($("input:checkbox:checked").val());‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<input type="checkbox" value="C" > C‬
‭<input type="checkbox" value="HTML"> HTML‬
‭<input type="checkbox" value="java"> java‬
‭<input type="checkbox" value="PHP"> PHP‬
‭<button>Click</button>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭<!--23. Write a jQuery to get Value from Radio button and display on Screen. -->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 24</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭$("button").click(function(){‬
‭alert($("input:radio[name=rdbtn]:checked").val());‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<input type = "radio" name = "rdbtn" value = "female" >Female<br/><br/>‬
‭<input type = "radio" name = "rdbtn" value = "male" >Male<br/><br/>‬
‭<button>Click here</button>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭<!--24.Write a jQuery to copy fullname, Address, mobile number on Keyboard Event. -->‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title> demo 24</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭$("input").keyup(function() {‬
‭// Get the values from the input fields‬
‭var fullName = $("#fullname").val();‬
‭var address = $("#address").val();‬
‭var mobileNumber = $("#mobile").val();‬
‭// Display the copied values in the output paragraph‬
‭$("#output").text("Full‬ ‭Name:‬ ‭"‬ ‭+‬ ‭fullName‬ ‭+‬ ‭"\nAddress:‬ ‭"‬ ‭+‬ ‭address‬ ‭+‬
‭"\nMobile Number: " + mobileNumber);‬
‭});‬
‭});‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<p>Full Name: <input type="text" id="fullname" ></p>‬
‭<p>Address: <input type="text" id="address"></p>‬
‭<p>Mobile Number: <input type="text" id="mobile" ></p>‬
‭<p id="output"></p>‬
‭</body>‬
‭</html>‬

‭_______________________________________‬
‭ !--25.Write‬‭a‬‭jQuery‬‭code‬‭for‬‭verifies‬‭first‬‭password‬‭and‬‭second‬‭password‬‭is‬‭same‬‭or‬‭note.‬
<
‭Verify the strength of password in week, medium and strong.-->‬

‭ OTE:Directly‬‭checks‬‭for‬‭at‬‭least‬‭one‬‭uppercase‬‭letter‬‭([A-Z]),‬‭one‬‭lowercase‬‭letter‬‭([a-z]),‬
N
‭one number ([0-9]), and one special character ([^a-zA-Z0-9]).‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>Demo25</title>‬
‭ script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
<
‭</head>‬
‭<body>‬

‭Enter Password <input type="password" id="password"><br>‬


‭<div id="passwordStrength"></div>‬

‭<script>‬
‭$(document).ready(function(){‬
‭$("#password").keyup(function(){‬
‭var password = $(this).val();‬
‭var numbers = /[0-9]/;‬
‭var uppercaseLetters = /[A-Z]/;‬
‭var lowercaseLetters = /[a-z]/;‬
‭var specialCharacters = /[^a-zA-Z0-9]/;‬

‭if (password.length < 8) {‬


‭$('#passwordStrength').html("Weak‬ ‭password‬ ‭(should‬ ‭be‬ ‭at‬ ‭least‬ ‭8‬
‭characters).").css("color", "red");‬
‭}‬
‭else‬‭if‬‭(password.match(numbers)‬‭&&‬‭password.match(uppercaseLetters)‬‭&&‬
‭password.match(lowercaseLetters) && password.match(specialCharacters)) {‬
‭$('#passwordStrength').html("Strong password").css("color", "green");‬
‭}‬
‭else {‬
‭$('#passwordStrength').html("Medium‬‭strength‬‭(Include‬‭upper‬‭and‬‭lowercase‬
‭letters, numbers, and special characters).").css("color", "orange");‬
‭}‬
‭});‬
‭});‬
‭</script>‬
‭</body>‬
‭</html>‬

‭MULTIPLE CHECKBOX VALUE SELECTION:‬


‭ !DOCTYPE html>‬
<
‭<html>‬
‭<head>‬
‭<title>Demo 22</title>‬
‭<script src="C:\Users\Lenovo\Downloads/jquery-3.7.1.min.js"></script>‬
‭<script>‬
‭$(document).ready(function(){‬
‭$("button").click(function(){‬
‭var selectedValues = [];‬
‭$("input:checkbox:checked").each(function(){‬
‭selectedValues.push($(this).val());‬
‭});‬

‭if(selectedValues.length > 0){‬


‭alert("Selected values: " + selectedValues.join(", "));‬
‭} else {‬
‭alert("No options selected.");‬
‭}‬
‭});‬
}‭ );‬
‭</script>‬
‭</head>‬
‭<body>‬
‭<h3>Select Technologies:</h3>‬
‭<input type="checkbox" value="C"> C‬
‭<input type="checkbox" value="HTML"> HTML‬
‭<input type="checkbox" value="java"> java‬
‭<input type="checkbox" value="PHP"> PHP‬
‭<button>Click</button>‬
‭</body>‬
‭</html>‬

You might also like