Beginning the jQuery - Get the Element by it's ID

What is meant by jQuery?

Well.. to be simple, jQuery is nothing but javascript library. As we people know SQL is a Structured Query Language for retrieving and manipulating data stored in database, and XQuery for XML. In the same way jQuery is a javascript library to retrieve and manipulate the HTML in a very easy and friendly manner.

What we need to work with jQuery?

All we need to work with jQuery is the jQuery library, which is available at http://jquery.com/ and http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=42051. At the time of this writing the jQuery's version is 1.3.2. This is a library with around 55.9 kb, which is perfectly acceptable for the work it will offer.

Let's begin with..

As my intention is to make every one free to work with jQuery. So, in this blog entry I am not going to explain all the complex details included with in. I will provide a very simple example that is very much useful for all the beginners.

Find Element By ID..

The biggest trouble that most of the developers feel at any time is getting the reference to the control in javascript by using document.getElementById() method or something similar. However, this method won't work perfectly many times. The reason is simple, it fails due to incompatibility with the browsers, Inner controls(the control may be present inside some other control such as div etc) etc.

To overcome such kind of issues jQuery addresses a very simple way to get the reference of the required control. In this simple demonstration I will provide a user to enter some value to a text box( input type="text"). And on a button click the text goes to the span tag. This sounds very simple, but this will be really great feature when it comes to large complex page.

Here is the HTML code for this example,

<div>
Name:
<input type="text" id="getName" />
<button id="clickMe">
Display My Name in Span
<br />
</div>
<span id="mySpan">This is the text appeared in span tags

And the jQuery code is very simple as around 3-5 lines to accomplish this task,

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$("#mySpan").text($("#getName").val());
});
});
</script>


For the moment you forgot about the first lines such as $(document).ready(function()..)}; etc, because I don't want to make you scare by explaining all the complicated details with in this. Think this as a standard for all your future jquery coding.

So at the moment, let us concentrate how to retrieve the value of getName text box. This is very simple as,
$("#getName").val();

Yes, this is where we are passing the id of any control with the prefix of #.
The val() is a function provided by jQuery to get the value in that particular control. This works for all the HTML controls that supports value attribute.
Remember all the jQuery coding should be enclosed with in the brackets as $(..). However we can replace with any other symbols which is out of discussion in the entry. And now we got the reference to the control span by passing it's id as,

$("#mySpan").val() and for button as $("#clickMe") etc..

and the function click() is the event handler for the button.

You can download the source code for this simple solution here. In the future version of this blog, I am going to explain all the jQuery features one by one and later we can move to the most advanced features of the jQuery such as working with jQuery Plugins. If you frequently follow this blog you are going to be create your own jQuery plugin on one day.