.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.

Other Related Items:

Western Digital WD Elements 1.5 TB USB 2.0 Desktop External Hard Drive WDBAAU0015HBK-NESNWD Elements USB 2.0 external hard drive is an easy-to-use, reliable way to add more storage to your PC or Macintosh. Simply plug it in to a USB port a... Read More >

Mystery Masterpiece: The Moonstone [Game Download]Who stole the Moonstone diamond? Is it cursed? It's up to you to investigate and unravel the mystery! Investigate every person who was in the Victoria... Read More >

Hugger Mugger Cork Yoga BlockRefine your yoga routine when performing Iyengar, Anusara, Ashtanga, restorative, or power yoga with this Hugger Mugger cork yoga block. Made of fast-... Read More >

Related Post

• jQuery – class manipulation
• jQuery Selectors – Looks just like CSS
• jQuery – Explaining Last Week’s Code
• jQuery – The Man, The Myth, The Legend
• jQuery 1.4 Released

Bookmark to:

Hide Sites

One Response to “jQuery Simple Selectors”