Scribd
Upload
68 views

D C S 1 A: Jquery Program To Apply Borders To Text Area and Paragraphs N: C: R N

The document contains code for several jQuery programs demonstrating different jQuery features and functions: 1) The first program applies borders to text areas and paragraphs when a button is clicked. 2) The second program adds a class to the last paragraph when a button is clicked. 3) The third program implements mouseover and mouseleave events by adding and removing classes on an anchor tag. 4) Further programs demonstrate hiding and showing DOM elements, loading external content via AJAX, creating an accordion widget using jQueryUI, and using the datepicker widget. Screenshots before and after each effect are included.

Uploaded by

Bhaskar Naidu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
68 views

D C S 1 A: Jquery Program To Apply Borders To Text Area and Paragraphs N: C: R N

The document contains code for several jQuery programs demonstrating different jQuery features and functions: 1) The first program applies borders to text areas and paragraphs when a button is clicked. 2) The second program adds a class to the last paragraph when a button is clicked. 3) The third program implements mouseover and mouseleave events by adding and removing classes on an anchor tag. 4) Further programs demonstrate hiding and showing DOM elements, loading external content via AJAX, creating an accordion widget using jQueryUI, and using the datepicker widget. Screenshots before and after each effect are included.

Uploaded by

Bhaskar Naidu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 34

DEPARTMENT OF COMPUTER SCIENCE PAGE |1

AIM: jQuery program to apply borders to text area and paragraphs


NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |2
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquer
y.min.js"></script>
<style> button {
display: block;
margin: 20px 0 0 0;
}
textarea {
width: 300px;
height: 100px;
margin: 10px;
float: left;
font-size: 18px;
}
p {
clear: left;
font-weight: bold;
font-size: 18px;
color: black;
margin: 5px 10px 0 10px;
padding: 2px;
} </style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("textarea").css("border","3px solid
black").add("p").css("border","3px solid black");
}); });
</script>
</head>
<body>
<textarea>
Javascript is a programming language to develop dynamic
webpages..
It is supported by all browsers...
</textarea>
<textarea>
jQuery is a javascript library..
It is developed for less code... more work...
</textarea>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<button>Click</button>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |3

BEFORE EFFECT

AFTER EFFECT

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |4
AIM: jQuery program to add a class to the last paragraph
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |5
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquer
y.min.js"></script>
<style>
.myClass
{
color:black;
font-size: 18px;
}
.splClass
{
border: 3px solid lightgray;
font-size: 24px;
font-variant: small-caps;
}
</style>
<script>
$(document).ready(function(){
$("p").addClass("myClass");
$("button").click(function(){
$("p").last().addClass("splClass");
});
});
</script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<button>Click</button>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |6
BEFORE EFFECT

AFTER EFFECT

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |7
AIM: jQuery program to implement mouse over and mouse leave events by
adding and removing class
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |8
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquer
y.min.js"></script>
<style>
.myClass
{
font-size: 18px;
font-variant: normal;
text-decoration: none;
color:black;
border: 3px solid black;
}
.splClass
{
border: none;
font-size: 24px;
font-variant: small-caps;
text-decoration: underline;
color:black;
}
</style>
<script>
$(document).ready(function(){
$("a").addClass("myClass");
$("a").hover(function(){
$(this).removeClass("myClass").addClass("splClass")
;
});
$("a").mouseleave(function(){
$(this).removeClass("splClass").addClass("myClass")
;
});
});
</script>
</head>
<body>
<a href="#">Over Me..</a>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE PAGE |9

MOUSE LEAVE EFFECT

MOUSEOVER EFFECT

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 10
AIM: jQuery program to hide and show DOM element
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 11
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery
.min.js"></script>
<style>
div
{
border: 2px solid black;
background-color: lightgray;
font-size: 20px;
width: 400px;
height: 300px;
}
button
{
font-size: 20px;
}
</style>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
});
$("#show").click(function(){
$("div").show();
});
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<div>This paragrah content will disappear when you click
on "hide" button and will appear
when you click on "show" button </div>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 12
SHOW BUTTON CLICK

HIDE BUTTON CLICK

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 13
AIM: jQuery program to call an external file using AJAX
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 14
<!DOCTYPE html>
<html>
<head>
<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery
.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("main.html", function(responseTxt,
statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " +
xhr.statusText);
});;
});
});
</script>
<style>
div{
border:1px solid black;
}
</style>
</head>
<body>

<h2>jQuery AJAX Load method</h2>


<div id="div1"></div>
<button>Get External Content</button>

</body>
</html>

main.html

<html>
<head>
<title>Sri Sai Degree College </title>
<head>
<body>
<h2>This is the content of main.html</h2>
<h3> Sri Sai Degree College </h3>
<h4>Phoolbaugh Road </h4>
<h4>Bobbili</h4>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 15

BEFORE BUTTON CLICK

AFTER BUTTON CLICK (AZAX LOAD)

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 16
AIM: jQuery program to create accordion using jQueryUI widget
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 17
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Accordion </title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-
1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-
ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<style>
h3{
font-family: 'Cambria';
font-size: 20px;
background-color: lightgrey;
border: 1px solid gray;
}
div > div
{
background-color: white;
border: 1px solid lightgray;
font-size: 16px;
font-family: 'cambria';
}
</style>
</head>
<body>
<div id="accordion">
<h3>JQuery</h3>
<div>
<p>
jQuery is a concise and fast JavaScript library that can
be used to simplify
event handling, HTML document traversing, Ajax
interactions and animation for
speedy website development. jQuery simplifies the HTML's
client-side scripting,
thus simplifying Web 2.0 applications development.
</p>
</div>
<h3>JQueryUI</h3>
<div>
<p>
jqueryui.com. jQuery UI is a collection of GUI widgets,
animated visual effects,

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 18
and themes implemented with jQuery (a JavaScript library),
Cascading Style Sheets,
and HTML.
</p>
</div>
<h3>AJAX</h3>
<div>
<p>
Ajax is a client-side script that communicates to and from
a server/database without
the need for a postback or a complete page refresh. The
best definition I've read for
Ajax is “the method of exchanging data with a server, and
updating parts of a web page –
without reloading the entire page
</p>
</div>
<h3>AngularJS</h3>
<div>
<p>
AngularJS (commonly referred to as "Angular.js" or
"AngularJS 1.X") is a JavaScript-based
open-source front-end web application framework mainly
maintained by Google and by a
community of individuals and corporations to address many
of the challenges encountered
in developing single-page applications.
</p>
</div>
</div>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 19
WHEN CLICK ON AJAX HEADER

WHEN CLICK ON JQUERY HEADER

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 20
AIM: jQuery program to demonstrate date picker using jQueryUI widget
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 21
<html>

<head>

<meta name="viewport" content="width=device-width, initial-


scale=1">

<title>jQuery UI Datepicker - Default functionality</title>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/j
query-ui.css">

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

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

<script>

$( function() {

$( "#datepicker" ).datepicker();

} );

</script>

</head>

<body>

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

</body>

</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 22

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 23
AIM: jQuery program to implement working with tabs using jQueryUI
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 24
<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/j
query-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-
1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-
ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body> <div id="tabs">
<ul>
<li><a href="#tabs-1">JQuery</a></li>
<li><a href="#tabs-2">JQueryUI</a></li>
<li><a href="#tabs-3">AngularJS</a></li>
</ul>
<div id="tabs-1">
<p>jQuery is a concise and fast JavaScript library that
can be used to simplify
event handling, HTML document traversing, Ajax
interactions and animation for
speedy website development. jQuery simplifies the HTML's
client-side scripting,
thus simplifying Web 2.0 applications development.</p>
</div>
<div id="tabs-2">
<p>jqueryui.com. jQuery UI is a collection of GUI widgets,
animated visual effects,
and themes implemented with jQuery (a JavaScript library),
Cascading Style Sheets,
and HTML.</p>
</div> <div id="tabs-3">
<p>Ajax is a client-side script that communicates to and
from a server/database without
the need for a postback or a complete page refresh. The
best definition I've read for
Ajax is “the method of exchanging data with a server, and
updating parts of a web page –
without reloading the entire page</p>
</div> </div>
</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 25

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 26
AIM: Program using AngularJS to implement two way binding using ng-model,
ng-bind and expressions
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 27
<html>
<head>
<title>Angular Two Way Binding</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angula
r.min.js"></script>
</head>
<body>
<h1> Working with Angular </h1>
<div ng-app="myApp" ng-controller="myCtrl" >
<p>Enter First Name <input type="text" ng-model="fname">
</p>
<p>Enter Last Name <input type="text" ng-model="lname">
</p>
<p>Your Name is : <span ng-bind="fname"></span> <span ng-
bind="lname"></span></p>
{{ fullName() }}
</div>
<script>
var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
$scope.fname = "Sri ";
$scope.lname = "Sai";
$scope.fullName = function(){
return $scope.fname + " " + $scope.lname;
};
});
</script>

</body>
</html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 28

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 29
AIM: Program using AngularJS to include other HTML files using ng-include
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 30
<html> <head>
<title>Angular JS Includes</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angula
r.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even){
background-color: #ffffff;
}
</style> </head> <body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller =
"studentController">
<div ng-include = "'main.html'"></div>
<div ng-include = "'subjects.html'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController',
function($scope) {
$scope.student = {
firstName: "Bhuvanesh",
lastName: "Kumar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " +
studentObject.lastName;
}
};
});
</script>
</body> </html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 31

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 32
AIM: Program using ng-route to create menu in AngularJS
NAME:
CLASS:
REGISTER NO:

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 33
<html>
<head> <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boot
strap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery
.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootst
rap.min.js"></script></head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/ang
ular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/ang
ular-route.js"></script>
<body ng-app="myApp">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/!">Main</a></li>
<li><a href="#!courses">Courses</a></li>
<li><a href="#!contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="container-fluid" ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/courses", {
templateUrl : "courses.html"
})
.when("/contact", {
templateUrl : "contact.html"
})
.otherwise({
templateUrl : "main.html"
});
});
</script>
</body> </html>

SRI SAI DEGREE COLLEGE - BOBBILI


DEPARTMENT OF COMPUTER SCIENCE P A G E | 34

SRI SAI DEGREE COLLEGE - BOBBILI

You might also like