.NET Answers

Last week we started looking at the jQuery selector by looking at the syntax we used to get our “hello world” demo working.

Today, we’ll start digging a little deeper into this main feature of jQuery.

There are four basic ways to get data using the selector.

• By the tag name
• By the ID
• By the class name
• Using an XPath statement

We can’t really deal with XPath statements until we fully understand the first three, so we’ll spend our time today dealing with the first three and then come back and look at XPath selectors later.

Probably the most common way of retrieving an element in JavaScript is by using the ID:

var someVariable;
someVariable = document.getElementById("someIdHere");

We can do the same thing in jQuery by writing:

var someVariable;
someVariable = $("#someIdHere");

Note that anytime you want to retrieve an element by its ID in jQuery, you prefix the value of the ID with a “#”.

Once you have the object, you can then call functions like you would in JavaScript.

In JavaScript, you can also retrieve all of a particular set of tags on a page.  For example, to get all of the anchor tags and loop through them, you’d do something like:

var anchorTags;
anchorTags = document.getElementsByTagName("a");
var anchorIndex;
for (anchorIndex = 0;
   anchorIndex < anchorTags.length;
   anchorIndex++)
{
/* do something here */
}

In jQuery you can do the same thing, often in one line:

$("a").SomeBuiltInFunction();

We’ll get into the details of how to call our own functions in a later post.

Where I personally really started to get excited was when I saw that I could do the same thing I’ve been doing with tags with classes.

Have you ever wanted to get a list of all of the elements of a particular class and iterate over them so that you could perform some action on them?  Now you can.  It is as simple as:

$(".classNameHere").SomeBuiltInFunction();

As you can probably see, a lot of this works a lot like CSS does.  That’s the beauty of it all.  You can actually select elements using CSS select statements.  If you are familiar with CSS, you should be very comfortable with our next post on jQuery.

One Response to “jQuery Simple Selectors”