Scribd
Upload
41 views

NGT (Jquery)

This document provides code examples for using various jQuery methods including: 1. Changing text on a button click, selecting elements by class, id, and name. 2. Creating animated show/hide, toggle, fade in/out, and slide up/down effects. 3. Demonstrating click, hover, on, off, and trigger events. Performing chaining and callbacks. 4. Getting and setting text and HTML contents of elements. Creating animation effects using single and multiple CSS properties. The document contains over a dozen code examples to demonstrate common jQuery tasks like manipulating DOM elements, handling events, animations, and more. Each code example is accompanied by its output.

Uploaded by

Shreya Kale
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

NGT (Jquery)

This document provides code examples for using various jQuery methods including: 1. Changing text on a button click, selecting elements by class, id, and name. 2. Creating animated show/hide, toggle, fade in/out, and slide up/down effects. 3. Demonstrating click, hover, on, off, and trigger events. Performing chaining and callbacks. 4. Getting and setting text and HTML contents of elements. Creating animation effects using single and multiple CSS properties. The document contains over a dozen code examples to demonstrate common jQuery tasks like manipulating DOM elements, handling events, animations, and more. Each code example is accompanied by its output.

Uploaded by

Shreya Kale
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Practical 8 - Programs on Basic jQuery

A. jQuery Basic, jQuery Events


Aim:- To Implement jQuery Basic and jQuery Events
1)Write a jquery to change the text contents of the element on
button click.
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
document.write("Hello,World");
})
});
</script>
</head>
<body>
<p>Hey there! Welcome to jQuery</p>
<button>Click Me</button>
</body>
</html>
Output:-

2. Write a jquery to select elements by classname, id& element


name.
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".class1").css("background", "red");
$("#id1").css("background", "magenta");
$("h1").css("background", "yellow")
});
</script>
</head>
<body>
<p class="class1">CSS Selectors:Class</p>
<h1>CSS Selectors:Element</h1>
<p id="id1">CSS Selectors:id</p>
</body>
</html>
Output:-

3. Write a jquery to show the use of


click(),hover(),on(),off(),trigger() events
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function()
{
$("#b1").hover(function()
{
document.write("Hello World");
});
$("p").on("click", function()
{
$(this).css("background-color", "pink");
});
$("#b2").click(function()
{
$("p").off("click");
});
$("#b3").on("click",function()
{
$("#t1").hide();
});
$("input").select(function()
{
$("input").after("Text marked!");
});
$("#b4").on("click",function()
{
$("input").trigger("select");
});
});
</script>
</head>
<body>
<button id="b1">hover</button><br/>
<p> Hello in Mulund College Of Commerce!</p>
<p>TYIT Student</p>
<button id="b2">off</button><br/><br/>

<p id="t1">Hello World</p>


<br/>
<button id ="b3">on</button><br/><br/>

<input type="text" value="Hello World" /><br/><br/>


<button id="b4">trigger</button>
</body>
</html>
Output:-
B. jQuery Selectors, jQuery Hide and Show effects.
Aim:- To implement jQuery Selectors, jQuery Hide and Show
effects
1)Write a jQuery to create animated show hide effects
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("#b1").click(function(){
$("p").hide();
});
$("#b2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>SIES(Nerul)College of Arts Science &Commerce</p>
<button id="b1">Hide</button>
<button id="b2">Show</button>

</body>
</html>
Output:-
2) Write a jQuery to create a simple toggle effect
Code:- with toggle
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet,consector adipiscing elit, sed
do
eiusmod tempor incididunt ut labore et dolore magna
aliqua</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
Output:-
C. jQuery fading effects, jQuery Sliding effects.
Aim:- To Implement jQuery fading effects and jQuery Sliding
effects
1) Write a jQuery to create fade-in and fade-out effects
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p> SIES(Nerul) College of Arts, Science & Commerce</p>
<button class="btn1">Fade Out</button>
<button class="btn2">Fade In</button>
</body>
</html>
Output:-

2) Write a jQuery to create a simple toggle effect on fade-in and


fade-out.
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Click</button>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Output:-
3). Write a jQuery to create slide-up and slide-down effect.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".up-btn1").click(function(){
$("p").slideUp();
});
$(".down-btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p> SIES(Nerul) College of Arts, Science & Commerce</p>
<button type="button" class="up-btn1">Slide up</button>
<button type="button" class="down-btn2">Slide down</button>
</body>
</html>
Output:-

4). Write a jQuery to toggle slide-up and slide-down effect.


Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Click</button>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Output:-
Practical 9:- jQuery Advanced
A. jQuery Animation effects, jQuery Chaining
Aim:- To implement jQuery Animation effects and jQuery
Chaining
1) Write a jQuery to create an animation effect
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<style>
img{
position:relative;/*Required to move element*/
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(){
$("img").animate({left:300});
});
});
</script>
</head>
<body>
<button>Start Animation</button><br/>
<img
src="https://images.unsplash.com/photo-1604085572504-a392ddf
0d86a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8
b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fHww&w=1000&q=80"
alt="Flower" height="270px" width="240px" />
</body>
</html>

Output:-
2)Write a jQuery to create an animation effect using multiple css
properties.
Code:-
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<style type="text/css">
.box{
width:100px;
height:100px;
background:#9d7ede;
margin-top:30;
border-style:solid;
border-color:#6f40ce;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(){
$(".box").animate({
width:"300px",
height:"300px",
marginLeft:"150px",
borderWidth:"10px",
opacity:0.5
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
Output:-
3)Write a jQuery to perform Method chaining
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
});
});

</script>
</head>
<body>
<p id="p1">Welcome to jQuery!</p>
<button>Click me</button>
</body>
</html>
Output:-
B. jQuery Callback, jQuery Get and Set Contents
Aim:- To implement jQuery Callback, jQuery Get and Set
Contents
1) Write a jQuery effect method with Callback function
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Click</button>
<p>This is paragraph</p>
</body>
</html>
Output:-
2)Write a jQuery to get and set text contents of the elements.
Code:-
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("p").text();
alert(str);
});
$(".b2").click(function(){
$("p").text("This is demo text.");
});
});
</script>
</head>
<body>
<button class="b1">Get All Paragraph's Text.</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button class="b2">Set All Paragraph's Text</button>


<p>This is a test paragraph.</p>
<p>This is another test paragraph.</p>
</body>
</html>

Output:-
3)Write a jQuery to get and set HTML contents of the elements
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("p").html();
alert(str);
});
$(".b2").click(function(){
$("body").html("<p>Hello World<p>");
});
});
</script>
</head>
<body>
<button class="b1">Get Paragraph's</button>
<p>The quick<b>brown fox</b>jumps over the lazy dog.</p>
<button class="b2">Write Message</button>
</body>
</html>
Output:-
4) Write a jQuery to get and set value of attribute of an element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("img#jquery").attr("alt");
alert(str);
});
$(".b2").click(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
});
</script>
</head>
<body>
<button class="b1">Get Link's HREF
Attribute</button><br/><br/>
<img id="jquery"
src="https://th.bing.com/th/id/OIP.ofw3TU4aVP-v2XEizJ0eJwHaE
o?w=358&h=185&c=7&r=0&o=5&pid=1.7" alt="jquery"
heigth="290px"
width="250px"/><br/><br/>
<p><input type="checkbox"/> I agree with terms and
conditions.</p>
<button class="b2">Check</button>
</body>
</html>

Output:-
C. jQuery Insert Content, jQuery Remove Elements and Attribute
Aim:- To implement jQuery Insert Content, jQuery Remove
Elements and Attribute
1)Write a jQuery to Insert HTML element at the beginning and
end of the element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
$("p").prepend("<strong>Note:</strong> ");
});
$(".b2").click(function(){
$("#container").append("This is demo text.");
});
});
</script>
</head>
<body>
<button class="b1">Insert Text at Begin</button>
<p>Welcome in Jquery</p>

<button class="b2">Insert Text at End</button>


<div id="container">
<p>Mulund College of Commerce</p>
</div>
</body>
</html>
Output:-
2)Write a jQuery to Insert multiple HTML elements at the
beginning and end of the elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var newHeading="<h1>Important Note:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Hello World</em>";

$("body").append(newHeading,newParagraph);
});
});
</script>
</head>
<body>
<button class="b1">Insert Contents</button>
<p>Hello Everyone welcome to SIES(Nerul)College of
Arts,Science and Comerce</p>
</body>
</html>
Output:-
3)Write a jQuery to insert multiple HTML elements before and
after the elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var newHeading="<h1>Important Note 1:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Switch off the pc before
leaving the lab</em>";

$("p").before(newHeading, newParagraph);
});
$(".b2").click(function(){
var newHeading="<h1>Important Note 2:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Switch off the light before
leaving the class</em>";

$("body").append(newHeading,newParagraph);
});
});
</script>
</head>
<body>
<button class="b1">Insert Contents Begin</button>
<p>Hello Everyone welcome to SIES(Nerul)College of
Arts,Science and Commerce</p>
<button class="b2">Insert content After</button>
</body>
</html>
Output:-
4)Write a jQuery to remove the content of the element
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".btn").click(function(){
$("div#demo").remove();
});
});
</script>
</head>
<body>
<div id="demo">
<p>Inside Div Element</p>
</div>
<p>Outside Div Element</p>
<button class="btn">Hide the elements inside div</button>
</body>
</html>
Output:-
5)Write a jQuery to remove the parent element of an HTML
element from the page.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").unwrap();
});
});
</script>
<style>
div{
background-color:yellow;
}
article{
background-color:pink;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph inside a div element.</p>
</div>
<article>
<p>This is paragraph inside an article element.</p>
</article>
<button>Remove the parent element of each p
element</button>
</body>
</html>

Output:-
6)Write a jQuery to remove attribute of the HTML elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
<style>
div{
background-color:yellow;
}
article{
background-color:pink;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p style="font-size: 120%; color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another
paragraph</p>
<button>Remove attribute for all p element</button>
</body>
</html>
Output:-
7)Write a jQuery to add and remove css classes from the HTML
element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style>
.intro{
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph</p>
<button>Remove the "intro" from all p elements</button>
</body>
</html>
Output:-
8)Write a jQuery to set the duration in slide toggle effect.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
$(".box").slideToggle(1500);
});
});
</script>
</head>
<body>
<button type="button" class="b1">Slide Toggle</button>
<hr/>
<div class="box">
<div class="box-inner">
Hello Good Morning Welcome to TYIT
</div>
</div>
</body>
</html>
Output:-
9)Write a jQuery to remove the HTML elements from the page
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div
id="div1"
style="
height: 100px;
width: 300px;
border:1px solid black;
background-color:#bcf0f5;">
This is some text in the div
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br/>
<button>Remove div element</button>
</body>
</html>
Output:-

You might also like