My blog has moved!

You will be automatically redirected to the new address. If that does not occur, visit
http://ashokbasnet.com.np
and update your bookmarks.

Saturday, July 2, 2011

JQuery Tutorial - I : Getting Started

JQuery is very great tool for accessing the DOM(Document Object Model) elements is any webpage. JQuery is really a cool Javascript. In this tutorial I am going to show you how to use Jquery to make life easier without having to know all the Javascript lengthy codes or statements.

First of all u need is the Jquery file downloaded from the JQuery site or a link of Google code repository for JQuery. U can either download the development version for testing purposes or min version for depolyment purpose. After u download, create a webpage of ur choice and put your jquery.file into the folder.

I will be teaching you some events handling with the simple JQuery selectors. Lets get started. Lets create a page called index.html.

 

<html>
<head>
	<title>JQuery Tutorial I - Getting Started</title>
</head>
<body>
	<h2>JQuery Tutorial I- Getting Stared</h2>
	<a href="#">Show</a><br />
	<p>This is JQuery Tutorial demonstrating the use of JQuery and its easiness to access and manipulate the DOM elements.</p>
</body>
</html>

index.html


Here I have just created a index.html with simple HTML tags.


Now the in the <head> … </head> section of the HTML , insert the Javascript code i.e. our JQuery code as shown below:

	<script type="text/javascript" src="jquery.js"></script>

Test whether or not the JQuery is working by alerting some information.

<script type="text/javascript">
	$(function(){
		alert("Page successfully loaded.");
	});
</script>

 


Now time for some cools stuffs with selectors…. Lets control the paragraph property by  using link selectors to change the visibility of the paragraph.


Lets alert when a href is clicked. U can do this simply by following JQuery..

<script type="text/javascript">
	$(function(){
		$('a').click(function(){
			alert("A href was clicked.");
		});
	});
</script>

You can also change the visibility using toggle () function which shows and hides alternatively.

<script type="text/javascript">
	$(function(){
		$('a').click(function(){
			$('p').toggle();  // shows and hide with clicks alerternately
		});
	});
</script>

In this way JQuery can be easily integrated into your website and there are lot more possibilites with JQuery and its selectors. In next Tutorial we will be dealing with different CSS selecors….


U can download the above tutorial from here..

0 comments :

Post a Comment