JQuery Tutorial – I : Getting Started
JQuery is a 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 the 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. Let’s get started. Let’s 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>
Here I have just created an 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 stuff with selectors…. Let’s 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 la ot more possibilites with JQuery and its selectors. In the next Tutorial, we will be dealing with different CSS selectors.
You can download the above tutorial from here
