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.
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.
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"?>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title> Sample jQuery </title>
border: solid 1px blue;
<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" />
Basic jQuery statement would have the following format:
logic goes here;
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.
Lets make a click on the first paragraph to hide and show the second paragraph.
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.
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