jquery lab programs 1&2
1. Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery
object to set their borders red.
Aim : To add border to textareas and give red borders to paragraphs.
Exercise1.html
<!DOCTYPE html>
<html>
<head>
<title>First JQuery Page</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('textarea').css({'border-style' :
'solid','border-color':'blue'});
$('p').css({'border-style' : 'solid','border-
color':'red'});
});
</script>
</head>
<body>
<p>
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far
from the madding coowd of 112 acres.
</p>
<p>
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade
the NAAC with 3.02 CGPA in the year 2017.
</p>
<p>
It has been fulfilling the aspirations of the marginalized
sections of the society of the Chittoor region by imparting value
based education and employability skills since its inception.
</p>
<textarea rows='6' cols='40'></textarea>
</body>
</html>
Output :
2. Using jQuery add the class "w3r_font_color" and
“w3r_background” to the last paragraph element.
Aim : To add the class "w3r_font_color" and “w3r_background” to
the last paragraph element.
Exercise2.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.w3r_background{
background-color: skyblue;
}
.w3r_font_color{
color:red;
}
</style>
<title>Excercise - 2</title>
<script type="text/javascript" src="jquery-
3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p:last-of-type').addClass('w3r_font_color');
$('p:last-of-type').addClass('w3r_background');
});
</script>
</head>
<body>
<p>
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far
from the madding coowd of 112 acres.
</p>
<p>
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade
the NAAC with 3.02 CGPA in the year 2017
</p>
<p>
It has been fulfilling the aspirations of the marginalized
sections of the society of the Chittoor region by imparting value
based education and employability skills since its inception.
</p>
</body>
</html>
Output :
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far from the madding coowd of 112 acres.
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade the NAAC with 3.02 CGPA in the year 2017
object to set their borders red.
Aim : To add border to textareas and give red borders to paragraphs.
Exercise1.html
<!DOCTYPE html>
<html>
<head>
<title>First JQuery Page</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('textarea').css({'border-style' :
'solid','border-color':'blue'});
$('p').css({'border-style' : 'solid','border-
color':'red'});
});
</script>
</head>
<body>
<p>
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far
from the madding coowd of 112 acres.
</p>
<p>
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade
the NAAC with 3.02 CGPA in the year 2017.
</p>
<p>
It has been fulfilling the aspirations of the marginalized
sections of the society of the Chittoor region by imparting value
based education and employability skills since its inception.
</p>
<textarea rows='6' cols='40'></textarea>
</body>
</html>
Output :
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far from the madding coowd of 112 acres.
The College is afliated to Sri Venkateswara Univeosityr Tirupati.. It has been accredited with ‘A’ goade the NAAC with 3.02 CGPA in the year 2017.
It has been fulfilling the aspirations of the marginalized sections of the society of the Chittoor region by imparting value based education and employability skills since its inception.
2. Using jQuery add the class "w3r_font_color" and
“w3r_background” to the last paragraph element.
Aim : To add the class "w3r_font_color" and “w3r_background” to
the last paragraph element.
Exercise2.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.w3r_background{
background-color: skyblue;
}
.w3r_font_color{
color:red;
}
</style>
<title>Excercise - 2</title>
<script type="text/javascript" src="jquery-
3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p:last-of-type').addClass('w3r_font_color');
$('p:last-of-type').addClass('w3r_background');
});
</script>
</head>
<body>
<p>
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far
from the madding coowd of 112 acres.
</p>
<p>
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade
the NAAC with 3.02 CGPA in the year 2017
</p>
<p>
It has been fulfilling the aspirations of the marginalized
sections of the society of the Chittoor region by imparting value
based education and employability skills since its inception.
</p>
</body>
</html>
Output :
P.V.K.N. Govt. College was established in 1961 in Chittoor Andhoa Pradesh on the sprawling campus far from the madding coowd of 112 acres.
The College is afliated to Sri Venkateswara Universityr Tirupati.. It has been accredited with ‘A’ grade the NAAC with 3.02 CGPA in the year 2017
It has been fulfilling the aspirations of the marginalized sections of the society of the Chittoor region by imparting value based education and employability skills since its inception.
background color is not applying ....how to solve it?
ReplyDelete