Home CSS

jQuery – Simple & Powerful

jQuery seems the new player as far the client side manipulation is the issue. I had always thanked JavaScript for allowing us to do the dirty job on the client side starting from validation to amazing animations and magics – as it was seen on the Google earth, we should due credit.
Then comes Ajax, yup I have loved and played with it and it is so logical. Why do I have to submit the whole page while the intension is to submit only, say, a single value like an email for subscription. Of course it has done even more than that.
And now, jQuery which is a bundle of the two nice tools. JQuery is collection of JavaScript libraries that would make coding easy, fast navigation experience and almost a shortcut to Ajax.
The functions in the jQuery are human friendly and easy to remember.
It is possible to access an element only, or a group of elements or elements under the same class in easier way. Above all uses nicely callback functions – cooool.
All one has to do to start jQuery is to download the library from http://docs.jquery.com/Downloading_jQuery and locate it like any other JavaScript code:
Following this, be ready to plough. The main character in play would be the jquery object itself. Accessing it could be done either by directly calling it or using its alias($) – which is the custom to go. How it does is: first it would select single or group of elements and then apply tasks like editing, hide/show, replacing, assigning new style and many more. Let us use the following simpe XHTML code for illustration

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Sample jQuery </title>

<script src="JQuery/jquery-1.3.2.min.js" type="text/javascript" ></script>

<style type="text/css">

   .highlight{

       background-color: palegreen;

       font-family: verdana;

       color: black;

       font-size: 12px;

       width: 300px;

   }

   .emphasis{

       text-weight: bold;

       border: solid 1px blue;

       width: 300px;

    }

</style>



</head>



<body>

<p id="description" class="highlight">This is for the illustration purpose</p>

<p id="attention" class="emphasis">give attention for this</P>

<a href="http://www.devx.com/codemag/Article/40923/0/page/1">More examples</a>

<input type="button" id="toggler" value="toggle" />

</body>

</html>

Basic jQuery statement would have the following format:

<script type="text/javascript">
       $(document).ready( function(){
               logic goes here;
         });
</script>

Here the ‘$’ is an alias for the jQuery object, document is the representation of documents as in DOM. The ready method makes sure if the page is ok to proceed or not.
function() inside the ready() method is the callback function. The beauty begins here, we can define any function of our own as we like.
Lets remove the highlight style from description and assign it emphais
The first part “p#description” would select the paragraph with id description. Had it been “p”, it would select all paragraphs.
In this particular case it is also possible to say (“#description”).
removeClass and addClass are self-explanatory.
The chaining is possible as a dot operated methods because each selection would return an object.
Remember how to toggle in JavaScript? Had to use if .. how about in jQuery.
Lets make a click on the first paragraph to hide and show the second paragraph.

        $("#description").click( function(event){
              $("#attention").toggle();
        });

That is all. A single line would keep our fingers from being tired.

Here, the click method would accept the callback function. This call back function is specific to the call only. Say if I have used (“p”), then when I click on a particular <p>, the click method would be applicable only to the clicked paragraph element.

	$("p#description").click(function(event){
            $(this).hide();$("p#attention").show();
        });
	$("p#attention").click(function(event){
            $(this).hide();$("p#description").show();
        });

The above snippet shows only one paragraph at a time. But it shows them alternatively.

This is just to give a very highlight about jQuery. There are a lot of things especially on the selection area.

The following are are good sources of jQuery tutorial and references
jQuery.com
http://www.devx.com/codemag/Article/40923/0/page/1
http://roshanbh.com.np/2008/03/jquery-benefits-examples-free-ebook.html