Scribd
Upload
21 views

JQUERYADV

Uploaded by

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

JQUERYADV

Uploaded by

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

JQUERY ADVANCED

Practical 8.a) Aim: jQuery Animation effects, jQuery Chaining.


I. Write a Jquery Create animation effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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="jquery.png" alt="jQuery" height="270px" width="240px" />
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
II. Write a Jquery to animate multiple CSS properties.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>

<style type="text/css">
.box {
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
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>
-----------------------------------------------------------------------------------
------------------------------------------------------------
III. Write a Jquery to perform Method chaining.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>

<script>
$(document).ready(function () {
$("button").click(function () {
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">Welcome in jQuery!!</p>
<button>Click me</button>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
Practical 8.b)
Aim: jQuery Callback, jQuery Get and Set Contents.
I. Write a Jquery effect method with a callback function.
Code:
<!DOCTYPE html>

<html>
<head>
<title></title>
<script src="jquery.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 a paragraph</p>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
II. Write a Jquery to get and set text contents of the elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>
-----------------------------------------------------------------------------------
------------------------------------------------------------
III. Write a Jquery to get and set HTML contents of the elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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 HTML Contents</button>
<p>The quick <b>brown fox</b> jumps over the lazy dog.</p>

<button class="b2">Write Message</button>


</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
IV. Write a Jquery to get and set value of attribute of an element.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>
<img id="jquery" src="jquery.png" alt="jquery" height="290px"
width="250px" /><br /><br />

<p><input type="checkbox" />I agree with terms and conditions.</p>


<button class="b2">Check</button>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
Practical 8.c)
Aim: jQuery Insert Content, jQuery Remove Elements and Attribute.
I. Write a Jquery to insert HTML elements at the beginning and end of the
elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
II.
Write a Jquery to insert multiple HTML elements at the beginning and end
of the elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
-----------------------------------------------------------------------------------
--------------------------------------------------------
III. Write a Jquery to insert multiple HTML elements before and after the elements.

Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>

<script>
$(document).ready(function () {
$(".b1").click(function () {
var newHeading = "<h1>Important Note:</h1>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy
text...</em>";

$("p").before(newHeading, newParagraph);
});
$(".b2").click(function () {
var newHeading = "<h1>Important Note:</h1>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";

$("body").append(newHeading, newParagraph);
});
});
</script>
</head>
<body>
<button class="b1">Insert Contents Begin</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button class="b2">Insert Contents End</button>


</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
IV. Write a Jquery to remove the contents of the elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>
-----------------------------------------------------------------------------------
------------------------------------------------------------
V. Write a Jquery to remove the parent element of an HTML element from the
page.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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 a paragraph inside an article element.</p>
</article>

<button>Remove the parent element of each p element</button>


</body>
</html>
-----------------------------------------------------------------------------------
----------------------------------------------------------
VI. Write a Jquery to remove an attribute from the HTML elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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 the style attribute from all p elements</button>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
VII. Write a Jquery to add and remove CSS classes from the HTML elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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" class from all p elements</button>


</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
VIII. Write a Jquery to set the duration in slide toggle effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>

<script>
$(document).ready(function () {
$(".b1").click(function () {
$(".box").slideToggle();
Sweta Prajapati, T.20.112

});
});
</script>
</head>
<body>
<button type="button" class="b1">Slide Toggle</button>
<hr />
<div class="box">
<div class="box-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem
tempor, varius quam at, luctus dui.
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
----------------------------------------------------
IX. Write a Jquery to remove the HTML elements from the page.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.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>

You might also like