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

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

<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>

BEFORE EFFECT
AFTER EFFECT

AIM: jQuery program to add a class to the last paragraph
NAME:
CLASS:
REGISTER NO:

<!DOCTYPE html>
<html>
<head>
<script
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>
$("p").addClass("myClass");
$("p").last().addClass("splClass");
});
});
</script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<button>Click</button>
</body>
</html>

BEFORE EFFECT
AFTER EFFECT

AIM: jQuery program to implement mouse over and mouse leave events by
adding and removing class
NAME:
CLASS:
REGISTER NO:

<!DOCTYPE html>
<html>
<head>
<script
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>
$("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>

MOUSE LEAVE EFFECT
MOUSEOVER EFFECT

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

<!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>
$("#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>

SHOW BUTTON CLICK
HIDE BUTTON CLICK

AIM: jQuery program to call an external file using AJAX
NAME:
CLASS:
REGISTER NO:

<!DOCTYPE html>
<html>
<head>
<script
.min.js"></script>
<script>
$("#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>

BEFORE BUTTON CLICK
AFTER BUTTON CLICK (AZAX LOAD)

AIM: jQuery program to create accordion using jQueryUI widget
NAME:
CLASS:
REGISTER NO:

<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,

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>

WHEN CLICK ON AJAX HEADER
WHEN CLICK ON JQUERY HEADER

AIM: jQuery program to demonstrate date picker using jQueryUI widget
NAME:
CLASS:
REGISTER NO:

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

scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/j
query-ui.css">
ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>


AIM: jQuery program to implement working with tabs using jQueryUI
NAME:
CLASS:
REGISTER NO:

<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/j
query-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
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>


AIM: Program using AngularJS to implement two way binding using ng-model,
ng-bind and expressions
NAME:
CLASS:
REGISTER NO:

<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>


AIM: Program using AngularJS to include other HTML files using ng-include
NAME:
CLASS:
REGISTER NO:

<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>


AIM: Program using ng-route to create menu in AngularJS
NAME:
CLASS:
REGISTER NO:

<html>
<head> <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boot
strap.min.css">
<script
.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>


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

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

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

Uploaded by

Copyright:

Available Formats

DEPARTMENT OF COMPUTER SCIENCE PAGE |1

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

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

MOUSE LEAVE EFFECT

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

HIDE BUTTON CLICK

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

<h2>jQuery AJAX Load method</h2>

SRI SAI DEGREE COLLEGE - BOBBILI

BEFORE BUTTON CLICK

AFTER BUTTON CLICK (AZAX LOAD)

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

WHEN CLICK ON JQUERY HEADER

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

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

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

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

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

SRI SAI DEGREE COLLEGE - BOBBILI

You might also like