Sunday, December 25, 2011

Use of first(), last(), eq() function


Example : change the background and foreground effect of the paragraph when you click on the button by using css [first(), last(), eq()] function.

<html>
<head>
<title> css function</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "#333");
$("p:first").css("background", "yellow");
$("p:last").css("background", "green");
$("p:eq(3)").css("font", "20px tahoma");
$("p").eq(2).css("font-style","italic");
});
});
</script>
</head>

<body>
<center>
<h2>change the background and foreground effect of the paragraph when you click on the button by using css[first(), last(), eq()] function.</h2>
<p>[I am the first paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the second paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the third paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the fourth paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am fifth paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<button>Click me</button>
</center>
</body>
</html>

No comments:

Post a Comment