Saturday 25 June 2011

Change the Style with jQuery

This is a basic tutorial, written to help you get started using jQuery.
This tutorial shows you how you can do some special effect using jquery.
Download a copy of jquery from here.



Just start by creating a new HTML page with the following contents:



<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").width("500px");
 });
});
</script>
<title>jQuery Programming Tutorial by Anurag</title>
</head>
<body><button>Click me</button>
<div id="test" style="background-color:#B6FFA4;height:20px;width:240px">Welcome To Programming Tutorials</div>
</body>
</html>


You can test it, just click on Click me button in this HTML page and the width of the div will be changed. Yo can do more same way.



No comments:

Post a Comment