Programming Tutorials: Jquery

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.

Friday, 24 June 2011

Animate a link using 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>
<title> Jquery Programming Tutorial by Anurag</title>
</head>
<body>
<a href="http://anurag-tutorial.blogspot.com/"> Programming Tutorial by Anurag</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
});
</script>
</body>
</html>

You can test it, just click on hyper link in this HTML page and it will disappear with animation.