Jquery Lab

1) JQuery for Demonstrating Fade-in & Fade-Out
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#fadeIn").click(function(){
$("p").fadeIn();
});
$("#fadeOut").click(function(){
$("p").fadeOut();
});
});
</script>
</head>
<body>
<p>RCP</p>
<p>IMRD</p>
<p>Shirpur</p>
<input type="button" id="fadeIn" value="fadein">
<input type="button" id="fadeOut" value="fadeout">
</body>
</html>
1
Page
2) JQuery for Demonstrating Slide Up , Slide down & Slide Toggle
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#slide").click(function(){
$("#div").slideUp();
});
$("#slide1").click(function(){
$("#div").slideDown();
});
$("#slide2").click(function(){
$("#div").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" id="slide" value="slideup">
<input type="button" id="slide1" value="slidedown">
<input type="button" id="slide2" value="slidetoggle">
<div id="div" style="background:purple;height:100px;width:100px;margin:6px;">
<p>RCP</p>
<p>IMRD</p>
<p>Shirpur</p>
</div>
</body>
</html>
2
Page
3) JQuery for Demonstrating Animate Method
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#btn1").click(function(){
$("#div").animate({height: "300px"});
});
$("#div").animate({width: "500px"});
});
$("#div").animate({marginLeft: "200px"},2000,"linear");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="height">
<input type="button" id="btn2" value="width">
<input type="button" id="btn3" value="left">
<div id="div" style="background:purple;height:100px;width:100px;margin:6px;">
</div>
</body></html>
3
Page
4) JQuery for Demonstrating Animation Chaining
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#b1").click(function(){
$("p").animate({fontSize: '300%'},2000)
.animate({fontSize: '100%'},2000)
});
});
</script>
</head>
<body>
<p>RCPIMRD</p>
<input type="button" id="b1" value="change">
</body>
</html>
4
Page
5) JQuery for Demonstrating Animation Queuing
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#b1").click(function(){
});
});
</script>
</head>
<body>
<p>RCPIMRD</p>
<input type="button" id="b1" value="change">
</body>
</html>
5
Page
6) Program for custom(User Defined) plugin
// myjq.jsfile
(function($){
$.fn.makeChange=function(){
this.css({color:"red",fontStyle:"Italic",fontSize:50});
return this;
};
}(jQuery));
//.html file
<!DOCTYPE html>
<html>
<head>
</script>
<script src="myjq.js">
</script>
<script>
$("#b1").click(function()
{
$("p").makeChange();
}
)
});
</script>
</head>
<body>
<p>This is my plugin</p>
<input type="button" id="b1" value="show">
</body>
</html>
6
Page
7) Program for Jquery UI Draggable Interaction
<HTML>
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px;
height: 150px;
background:blue;
}
</style>
<scriptsrc="jquery-3.1.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p >Drag me around</p>
</div>
</body>
</html>
7
Page
8) Program for Jquery UI Resizable Interaction
<HTML>
<head>
<style>
#resizable{ width: 150px;
height: 150px;
background:blue;
}
</style>
<link rel="stylesheet" href="jquery-ui.css">

<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable">
<p >Drag me around</p>
</div>
</body>
</html>
8
Page
9) Program for Jquery UI Selectable Interaction
<HTML>
<head>
<style>
#selectable .ui-selected { background: #F39814; color: white; }

</style>
<script>
$( function() {
$( "#selectable" ).selectable();
} );
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
</ol>
</body>
</html>
9
Page
10) Program for Jquery UI Sortable Interaction
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<head>
<script>
$( function() {
$( "#sortable" ).sortable();
} );
</script>
</head>
<body>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</body>
</html>
10
Page
11) Program for demonstrating Autocomplete Widget

<HTML>
<head>
</head>
<body>
<script>
$( function() {
varavailableTags = [
"ActionScript", "AppleScript", "Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
Enter Name <input type="text" id="tags">
</body>
</html>
11
Page
12) Program for demonstrating Datepicker Widget

<HTML>
<head>
</head>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
12
Page
13) Program for demonstrating Dialog Widget

<HTML>
<head>
</head>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">

<p>This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
13
Page
14) Program for demonstrating Slider Widget

<HTML>
<head>
</head>
<script>
$( function() {
$( "#slider" ).slider();
} );
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
14
Page
15) Demonstration of Ajax XMLHTTPRequest Object
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();
}
</script>
15
</body>
Page
</html>
info.txt
this is ajax demo
for demonstraing Ajax XMLHTTPRequest.
16) Demonstration of Ajax with XML Data
<html>
<body>
<h1>The XMLHttpRequest Object with XML Data</h1>
<p id="demo"></p>
<script>
var xhttp, xmlDoc, txt, x, i;

xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

xmlDoc = this.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Class");
for (i = 0; i < x.length; i++) {

txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "stud.xml", true);
xhttp.send();
</script>
16
</body>
Page
</html>
stud.xml
<College>
<Dept>
<TITLE>MCA</TITLE>
<Class>MCA-3</Class>
<Student>60</Student>
</Dept>
<Dept>
<TITLE>Dual MCA</TITLE>
<Class>Daul MCA-3</Class>
</Dept>
<Dept>
<TITLE>MBM</TITLE>
<Class>MBM2</Class>
</Dept>
</College>
17) Demonstration of Ajax GET Method
<html>
<head>
<scriptsrc="jquery-3.1.1.min.js"></script>
<script>
$("button").click(function(){
$.get("demo.php",
{
name: "RCPIMRD",
17
city: "Shirpur"
},
Page
function(data,status){
alert("Data: " + data+ "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>
demo.php :-
<?php
$name=$_GET['name'];
$city=$_GET['city'];
echo $name." ".$city;
?>
18) Demonstration of Ajax POST Method
<html>
<head>
<scriptsrc="jquery-3.1.1.min.js"></script>
<script>
$("button").click(function(){
$.post("demo.php",
{
name: "RCPIMRD",
18
city: "Shirpur"
},
Page
function(data,status){
alert("Data: " + data+ "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
demo.php :-
<?php
$name=$_POST['name'];
$city=$_POST['city'];
echo $name." ".$city;
?>
19
Page

Jquery Lab

Uploaded by

Copyright:

Available Formats

Jquery Lab

Uploaded by

Document Information

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

Jquery Lab

Uploaded by

Copyright:

Available Formats

1) JQuery for Demonstrating Fade-in & Fade-Out

<input type="button" id="b1" value="change">

<input type="button" id="b1" value="change">

<link rel="stylesheet" href="jquery-ui.css">

#selectable .ui-selected { background: #F39814; color: white; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<p>Date: <input type="text" id="datepicker"></p>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<div id="dialog" title="Basic dialog">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

16) Demonstration of Ajax with XML Data

<h1>The XMLHttpRequest Object with XML Data</h1>

var xhttp, xmlDoc, txt, x, i;

if (this.readyState == 4 && this.status == 200) {

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

17) Demonstration of Ajax GET Method

18) Demonstration of Ajax POST Method

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.